/
143.txt
1270 lines (962 loc) · 62.5 KB
/
143.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
[33] [[HTML]] の [DFN[[CODE(HTMLe)@en[img]] [[要素]]]]は、
[[画像]]を埋込みます。
* 仕様書
[REFS[
- [16] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-03-23 21:27:20 +09:00]] 版) <https://html.spec.whatwg.org/#origin-2>
]REFS]
* タグ
[17] [[開始タグ]]は、必須です。
[18] [[終了タグ]]は、使ってはなりません。
* 属性
[35]
[FIG(short list)[
- [[大域属性]]
- [CODE(HTMLa)@en[decoding][<img decoding>]]
- [CODE(HTMLa)@en[referrerpolicy]]
[HISTORY[
- [CODE(HTMLa)@en[async][<img async>]]
- [CODE[direction][<img direction>]]
- [CODE[flash][<img flash>]]
- [CODE[internal][<img internal>]]
]HISTORY]
]FIG]
,[CODE(HTMLa)[[[align]]]] , , ,揃え位置 ,[HTML 4] 非推奨
,[CODE(HTMLa)[[[alt]]]] ,[CODE(SGML)[%[[Text]]]] ,(必須) ,[[代替文]] ,[HTML 4]
,[CODE(HTMLa)[[[border]]]] , , ,枠線 ,[HTML 4] 非推奨
,[CODE(HTMLa)@en[[[composite]]]] , , ,非標準 ,[[Dashboard]]
,[CODE(HTMLa)[[[controls]]]] , , , ,非標準
,[CODE(HTMLa)@en[[[copyright]]]],,,,非標準,[[EMOBILE]]
,[CODE(HTMLa)[[[datafld]]]] , , ,データ欄 ,非標準
,[CODE(HTMLa)[[[datasrc]]]] ,[CODE(SGML)[%[[URI]]]] , ,データ源 ,非標準
,[CODE(HTMLa)@en[[[dojoattachpoint]]]] , , , ,非標準 ,[[Dojo]]
,[CODE(HTMLa)@en[[[dojotype]]]] , , , ,非標準 ,[[Dojo]]
,[CODE(HTMLa)[[[dynsrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,動画 URI ,[WinIE]
,[CODE(HTMLa)[[[gaiji]]]] ,([[真偽値属性]]) ,(偽) ,[[外字]]画像かどうか ,[[T-Time]]
,[CODE(HTMLa)[[[galleryimg]]]] , , , ,非標準 ,[[WinIE 6]]
,[CODE(HTMLa)@en[[[generator-unable-to-provide-required-alt]]]]
,[CODE(HTMLa)[[[height]]]] ,[CODE(SGML)[%[[Length]]]] ,(自動) ,高さ ,[HTML 4] おすすめしない
,[CODE(HTMLa)@en[[[hflip]]]],,([[偽]]),[[W3C]] [[WD]],[[html-bidi]]
,[CODE(HTMLa)@en[[[hb:hoversrc]]]] ,[CODE(SGML)@en[%[[URI]];]] , , ,''非''標準
,[CODE(HTMLa)@en[[[href]]]] , , ,[[リンク先]] ,[[W3C]] [[WD]] ,[[XHTML 2.0]]
,[CODE(XMLa)@en[[QN[xlink:[[href]]] [[[http://www.w3.org/1999/xlink]]]]]] , , ,[[リンク先]] ,[[W3C]] [[WD]] 内部案 ,[[XHTML 2.0]]
,[CODE(HTMLa)[[[hspace]]]] , , ,水平余白 ,[HTML 4] 非推奨
,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr
,[CODE(HTMLa)[[[ismap]]]] ,([[真偽値属性]]) ,(偽) ,[[鯖側画像写像]] ,[HTML 4]
,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1]
,[CODE(HTMLa)@en[[[livesrc]]]] , , , ,非標準
,[CODE(HTMLa)@en[[[localsrc]]]] , , , ,非標準
,[CODE(HTMLa)[[[longdesc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,説明文書 ,[HTML 4]
,[CODE(HTMLa)[[[loop]]]] , , ,繰返し回数 ,非標準
,[CODE(HTMLa)[[[loopdelay]]]] , , , ,非標準
,[CODE(HTMLa)[[[lowsrc]]]] ,[CODE(SGML)[%URI]] ,(なし) ,低解像度画像 URI
,[CODE(HTMLa)[[[x-maintain-ratio]]]] ,[SAMP(HTML)[TRUE]] , ,縦横比保存 ,非標準 ,[[ROBOHelp]]]]
,[CODE(HTMLa)@en[[[mediaout]]]],,[CODE(HTML)@en[[[no]]]],,非標準,[[EMOBILE]]
,[CODE(HTMLa)[[[motion]]]] ,[CODE(SGML)[%URI]] ,(なし) ,動画こま URI
,[CODE(HTMLa)[[[name]]]] , ,(なし) ,名前 ,[HTML 4]
,[CODE(HTMLa)@en[[[nosend]]]]
,[CODE(HTMLa)@en[[[onload]]]] ,[CODE(SGML)@en[%[[Script]]]] ,(なし) , ,非標準 ,[[NetFront]]
- [CODE(HTMLa)@en[orgsrc]]
- [CODE(HTMLa)@en[oversrc]]
- [CODE(HTMLa)@en[pagespeed_url_hash]]
,[CODE(HTMLa)@en[[[private]]]],,[CODE(HTML)@en[[[no]]]],,非標準,[[EMOBILE]]
,[CODE(HTMLa)@en[[[rectangle]]]]
,[CODE(HTMLa)[[[_moz_resizing]]]] , , , ,非標準 ,[[Gecko]]
,[CODE(HTMLa)@en[[[x-save-file]]]] , , , ,非標準
,[CODE(HTMLa)@en[[[x-save-method]]]] , , , ,非標準
,[CODE(XMLa)@en[[QN[v:[[shapes]]] [urn:schemas-microsoft-com:vml]]]]
- [CODE(HTMLa)@en[show][imagemode]]
,[CODE(HTMLa)[[[src]]]] ,[CODE(SGML)[%[[URI]]]] ,(必須) ,画像 URI ,[HTML 4]
,[CODE(HTMLa)@en[[[mce_src]]]] ,[CODE(SGML)@en[%[[URI]];]] , , ,非標準
,[CODE(HTMLa)[[[start]]]] , , , ,非標準
,[CODE(HTMLa)@en[[[x-sas-useimageheight]]]] ,([[ブール型属性]]) ,([[偽]]) , ,非標準
,[CODE(HTMLa)@en[[[x-sas-useimagewidth]]]] ,([[ブール型属性]]) ,([[偽]]) , ,非標準
,[CODE(HTMLa)[[[usemap]]]] , ,(なし) ,[[クライアント側画像写像]] ,[HTML 4]
,[CODE(HTMLa)@en[[[viblength]]]] , , , ,非標準 ,[Vodafone]
,[CODE(HTMLa)@en[[[vibration]]]] , , , ,非標準 ,[Vodafone]
,[CODE(HTMLa)[[[vrml]]]] , , , ,非標準
,[CODE(HTMLa)[[[vspace]]]] , , ,垂直余白 ,[HTML 4] 非推奨
,[CODE(HTMLa)[[[width]]]] ,[CODE(SGML)[%Length]] ,(自動) ,幅 ,[HTML 4] おすすめしない
[34] 仕様書:
- [[SI 4281]]:1998
<http://www.qsm.co.il/Hebrew/si4281e.htm>
-- [CSECTION[6.1.4 Elements with no directionality]]
- [[HTML 4]]
-- [CSECTION[13.2 Including an image: the [CODE(HTMLe)[IMG]] element]]
<IW:HTML4:"objects.html#edef-IMG">
* 内容
[37] [CODE(HTMLe)[img]] は[[強制空要素]]です。
どんな[[内容]]も持つことができません。
[38] しばしば、 (代替文のために) [Q[[CODE(HTMLe)[img]] は空要素にするべきではなかった]]
と言う人がいます。しかし、 [[SGML]] 的には、そう突飛な設計というわけでもありません。
中には、[Q[[CODE(HTMLe)[img]] は空要素になる''はず''だった]]
(のに Mosaic が馬鹿なことをした) などと主張する人もいますが、
根拠がありません。 (あったら教えてください。)
>>12 の議論で [CODE(HTMLe)[[[a]]]] 要素を流用する案が出たりもしていますが、
これが根拠なら[Q[空要素になる''はず''だった]]は言い過ぎです。
[59]
[[libwww]]は1994年4月の2.16 Prerelease 1で修正されるまで、
[CODE(HTMLe)@en[[[img]]]]に[[終了タグ]]が必要でした。
[CITE[Change History for W3C Sample Code Library]]
<http://www.w3.org/Library/User/History.html>
* 文脈
[HISTORY[
[20] 歴史的変遷: <https://suika.suikawiki.org/www/2004/html/classes>
[26] よく、 [CODE(HTMLe)[img]] の親を [CODE(HTMLe)[[[p]]]] にすべきか
[CODE(HTMLe)[[[div]]]] にすべきか問題になるけど、 HTML
の当初の設計思想であるワープロ互換のための[[フラットでリニアな構造]]化を考えると、
[CODE(HTMLe)[p]] が適当なんじゃないのかな。
[WEAK[(Strict 的に正しいという主張でも、そうするべきだという主張でもないよ。)]]
[27] ところで >>26 のネタはしつこいくらいよくでてくるよねぇ。
[CODE(HTMLe)[[[fig]]]] 要素型マンセー。
]HISTORY]
[21] [CODE(HTMLa)[[[lowsrc]]]] 属性は W3C HTML には存在しませんが、
[[DOM 1]] HTML の [CODE(DOMi)[[[HTMLImageElement]]]] 界面には定義されていました。
([[DOM 2]] HTML で削除されました。)
[22] >>21 同じ独自拡張 HTML 属性が DOM に紛れている例でも、
[CODE(DOMi)[[[HTMLScriptElement]]]] の [CODE(DOMa)[[[htmlFor]]]] と [CODE(DOMa)[[[event]]]] は削除されてないのにねぇ。
[32]
>>2 その二つの属性は HTML 4 で一応予約だけはされていますから。
[[#comment]]
** Mozilla の内部画像
[40] [CODE(HTMLa)[[[src]]]] の説明に移動しました。
** width/height 両属性問題
[15] [[height]>>15] に移動しました。
** 画像の種類
[28] 有史以来 [CODE(HTMLe)[img]]
要素のリンク先として使われたことのある画像の種類 ([CODE(HTMLa)[src]], [CODE(HTMLa)[lowsrc]] 属性):
,媒体型 (代表) ,説明
,[CODE(MIME)[[[image/x-bitmap]]]] ,[[Windows Bitmap]]
,[CODE(MIME)[[[image/gif]]]] ,[[GIF]]
,[CODE(MIME)[[[image/vnd.microsoft.icon]]]] ,[[ICO]]
,[CODE(MIME)[[[image/jpeg]]]] ,[[JPEG]]
,[CODE(MIME)[[[video/x-mng]]]] ,[[MNG]]
,[CODE(MIME)[[[image/png]]]] ,[[PNG]]
,[CODE(MIME)[[[image/tiff]]]] ,[[TIFF]]
,[CODE(MIME)@en[[[image/vnd.wap.wbmp]]]] ,[[WBMP]]
, ,[[WMF]]
,[CODE(MIME)[[[image/x-xbitmap]]]] ,[[X Bitmap]]
,[CODE(MIME)[[[application/xneval]]]] ,[SRC[Vodafone]]
[29] ([CODE(HTMLa)[dynsrc]] 属性):
,[CODE(MIME)[[[video/x-avi]]]] ,[[AVI]]
,[CODE(MIME)[[[video/mpeg]]]] ,[[MPEG]]
, ,[[NetShow]] ([[ASF]])
, ,[[QuickTime]] movie
,[CODE(MIME)[[[model/vrml]]]] ,[[VRML]]
, ,[[WMV]]
[30] ([CODE(HTMLa)[motion]] 属性):
,[CODE(MIME)[image/png]] ,PNG
[24] ''Creating an IMG SRC handler'' <http://eside.homeip.net/column/imgsrc.html> :
[[WinIE]] で任意の画像形式に対応する handler の作り方。
* レンダリング
[41] [CODE(HTMLe)[img]] 要素は普通 [CODE(HTMLa)[src]]
で指定された画像で[[行内]]で置換えられます。
(ただし、左右に揃えた ([CODE(HTMLa)[[[align]]]] 参照。) ときは行外に浮動します。)
[HTML 4]
[42] 画像を表示できない時には [CODE(HTMLa)[[[alt]]]] が
使われます。 [HTML 4]
[50] '''Bidi との関係''':
[CODE(HTMLe)[[[img]]]] [[要素]]は、 [[bidi]]
的には方向性に関して[[中立]]な[[文字]]1[[文字]]であるかのように扱います。
方向について特に配慮が必要なら
前後に [CODE(char)[[[LRM]]]] や [CODE(char)[[[RLM]]]]
を使えます。 [SRC[SI 4281 6.1.4]]
[146] [[画像]]は、よく[[文字]]を含んでいます。しかし[[テキスト]]として選択できませんし、
[[検索]]もできないなど、不便極まりありません。[[翻訳]]もできなければ[[拡大]]もできないかもしれません。
[[著者]]は、極力[[画像]]に[[文字]]を含めることを避け、 [[Web Fonts]]
や [[SVG]] などで代用するべきです。
[147] [[Webブラウザー]]は、 [[利用者]]に [[OCR]] 機能を提供するべきです。
* URL の解決
[115] [[Chrome]]、[[Firefox]]、[[Opera]] は仕様通り [CODE(HTMLa)@en[[[src]]]] [[属性]]が設定された時点での[[基底URL]]を使って画像を表示します。それ以後[[基底URL]]が変化しても追随しません。 [[WinIE9]] は[[要素]]が[[文書]]に挿入された時点で[[基底URL]]が変化していれば、それに従い再度 [[fetch]] するようです。
[TIME[2013-03-20T14:11:06.000Z]]
[116] [[Chrome]]、[[Firefox]] は他の[[文書]]に [[adopt]] すると新しい文書の[[基底URL]]で改めて [[fetch]]
するようです。 [[Opera]] ([[Presto]]) は元の[[基底URL]]で [[fetch]] した画像をそのまま使うことがあるようです
([[fetch]] した同じ[[スクリプト]]内で [[adopt]] が発生するとそのまま使う??)。
[TIME[2013-03-20T14:12:25.200Z]]
* 画像の起源
[31] [CODE(HTMLe)@en[img]] [[要素]][VAR[要素]]の[[画像]]の[[起源]]は、次の通りです
[SRC[>>16]]。
[FIG(switch)[
: [VAR[要素]]の[F[画像データ]]が[F[CORS-cross-origin]] の場合 :
[VAR[要素]]の画像が作成された時に割り当てた新しい[[不透明起源]]。
: [VAR[要素]]の[F[画像データ]]が[F[CORS-same-origin]] の場合 :
[VAR[要素]]の[F[節点文書]]の[F[起源][文書の起源]]。
]FIG]
;; [54] これは、この[[画像]]を [CODE(HTMLe)@en[canvas]] に [CODE(DOMm)@en[drawImage]]
した後、[[スクリプト]]からアクセスできるかどうかに関わります。
* セキュリティー
[45] [[利用者エージェント]]によっては、
埋込み画像が[[認証]]などにより保護されている場合に合言葉を問合せたり、
対応していない[[媒体型]]である時に処理方法を問合せたりします。
悪意のある[[著者]]がこれを利用して、認証が必要な画像を多く埋込んだり、
未対応と思われる型の資源にリンクしたりして、
利用者エージェントに利用者への問合せを連続して行わせることで事実上操作不能にすることができてしまうかもしれません。
利用者エージェントは利用者に問合せるにしてもその方法を工夫した方がよいでしょう。
[48] >>45 と似た手口として、 [CODE(HTMLa)[[[src]]]] を
[CODE(URI)[[[mailto]]:]] URI や [CODE(URI)[[[telnet]]:]]
URI として大量に外部プログラムを起動させて操作不能に陥らせる[[ブラクラ]]も知られています。
利用者エージェントは処理を外部に委託するよう実装している [[URI scheme]]
や著しく負荷がかかる [[URI scheme]] が指定されている時の対策が必要です。
[46]
画像を埋込むことによって著者が情報を取得することがよく行われています。
典型的なのはいわゆる[Q[カウンタ]]です。
純粋なカウンタは単純に画像が取得された回数を記録しているだけですが、
実際には鯖が入手できる情報はなんでも記録できます。
[[Cookie]] や[[スクリプト]]と組合せることで、
利用者の個人情報が知らぬ間に収集されることもあるかもしれません。
(もちろん、これは画像に限ったことではありません。
しかし、埋込み画像を使う手口は手軽なのでよく使われます。)
[[電子メイル]]など私的な輸送媒体で [CODE(HTMLe)[[[img]]]]
が使われている場合は特に注意が必要です。
[CODE(HTMLa)[[[src]]]] に著者の鯖などを指定することにより、
受信者がメッセージを開いたかどうかを自動的に通知させることができてしまいます
[WEAK[(読んだかどうかは別問題)]]。 [[spam]] ではしばしば使われます。
電子メイルなどでは外部の画像を読み込まないのが望ましいと考えられます。
このような手口を [[Web bug]] (盗聴器) や
[[Web beacon]] (発信器) と呼ぶ人もいます。
[47] [[グロ画像]]などの読者を不快にさせる種類の画像が埋め込まれることがあります。
読者が意図しない種類の画像を見せられてしまうことは技術的にほとんど防ぎようがありません。
しかし、できるだけ読者が見てしまわないような設定ができれば便利です。
例えば、 [[URI参照]]に特定の文字列が含まれていたら画像を自動表示しないとか、
一度非表示と指定した画像は次から表示しないとか
[WEAK[(URI 参照による非表示制御は URI 参照が変えられると無力ですから、画像の[[ハッシュ]]などを使うと良いでしょう。)]]
の対策が考えられます。こうした対策は (必ずしも
[CODE(HTMLe)[img]] ではありませんが)
[[2chブラウザ]]の類でよく実装されています。
[60]
[CITE[ha.ckers.org web application security lab - Archive » Detecting FireFox Extentions]] <http://ha.ckers.org/blog/20060823/detecting-firefox-extentions/>
([[名無しさん]] [WEAK[2006-09-21 10:23:53 +00:00]])
[61]
[CITE[秋元@サイボウズ研究所プログラマーBlog: 訪問者が入れているFirefox extensionを検知するJavascript]] <http://labs.cybozu.co.jp/blog/akky/archives/2006/09/detect_firefox_extension.html>
([[名無しさん]] [WEAK[2006-09-21 10:24:43 +00:00]])
** スクリプトの実行
[87] [CODE(HTMLe)@en[[[img]]]] [[要素]]で[[埋め込み]]された[[画像]]に含まれる[[スクリプト]]は実行されないこととされています
[SRC[[[HTML5]] @@ 要引用]]。
[88] [[ブログ]]などで用いられている[[消毒器]]は [[Webブラウザー]]のこの挙動に依存していることがあります。
[[利用者]]による [[HTML]] [[タグ]]の入力を認めている場合、悪意のある[[スクリプト]]が貼り付けられるおそれがあり、
制限されていることが多いですが、一方で単純な[[画像]]の貼り付けは認められているのが一般的です。
もし [[SVG]] などの[[画像]]に埋め込まれた[[スクリプト]]が [[Webブラウザー]]によって実行されるとなると、
そのような[[消毒器]]の類は [CODE(HTMLe)@en[[[img]]]] [[要素]]の使用を認めることができなくなってしまいます。
* [CODE(DOMi)@en[HTMLImageElement]] インターフェイス
[23] [CODE(HTMLe)@en[img]] [[要素]]の[F[要素インターフェイス]]は、
[CODE(DOMi)@en[[[HTMLImageElement]]]] です。
[FIG(list)[
[CODE(DOMi)@en[[[HTMLElement]]]]
,,"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,([CODE(JS)@en[[[new]] [[Image]] ()]]),"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[border]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[complete]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[dynsrc]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[fileCreatedDate]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[fileSize]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[fileModifiedDate]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[fileUpdatedDate]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMm)@en[[[handleEvent]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.2]])"
,[CODE(DOMa)@en[[[height]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[href]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[hspace]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[loop]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[lowsrc]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[mimeType]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[msPlayToDisabled]]]]
,[CODE(DOMa)@en[[[msPlayToPrimary]]]]
,[CODE(DOMa)@en[[[msPlayToSource]]]]
,[CODE(DOMa)@en[[[name]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[nameProp]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[onabort]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[onerror]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[onkeydown]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[onkeypress]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[onkeyup]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[onload]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[protocol]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[readyState]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[Start]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[src]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[vrml]]]],"[CODE(DOMi)@en[[[HTMLImgElement]]]] ([[Trident]])"
,[CODE(DOMa)@en[[[vspace]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
,[CODE(DOMa)@en[[[width]]]],"[CODE(DOMi)@en[[[Image]]]] ([[JavaScript 1.1]])"
]FIG]
-*-*-
[159]
[[画像データ]]の[[ファイルサイズ]]を直接取得する方法はありません。
[[同じ起源]]で[[キャッシュ]]ではなく[[起源サーバー]]からの[[応答]]なら、
[CODE[[[performance]].[[getEntries]] ()[ [VAR[i]] ].[[transferSize]]]]
を使うことはできます。
* 関連
[36] 画像の埋込みは、 [CODE(HTMLe)[[[object]]]]
を用いても行えます。 (HTML 4 の時に [CODE(HTMLe)[img]]
を廃止または非推奨にするべきとの強硬意見もあったようですが、
当時はまだ非現実的と判断されたようです。)
[62] '''[CODE(HTMLe)@en[[[image]]]]'''
[[HTML]] には [CODE(HTMLe)@en[[[image]]]]
という[[要素型]]もあります。詳しくは
[CODE(HTMLe)@en[[[image]]]] の項を参照してください。
* 歴史
** [CODE(HTMLe)@en[img]] の誕生
[12] ''proposed new tag: IMG''
<http://web.archive.org/web/19970524004107/http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/.www-talk-1993q1.messages/174.html>:
[CODE(HTMLe)[img]] 要素の最初の提案 (1993年2月 @ [[www-html]])
[13] 異論を無視して当初の提案どおり実装された Mosaic 0.10 の告知:
''EMail Msg <9303141100.AA22479@wintermute.ncsa.uiuc.edu>''
<http://web.archive.org/web/19970524005359/http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/.www-talk-1993q1.messages/254.html>
(1993年3月)
[14] >>13 でも実装しますた。にはその時には特に文句は出てないね。
異論というのも対案が幾つか出てきただけであまり深い議論になってないし。
[19] ''スラッシュドット ジャパン | IMGタグ10周年'' <http://slashdot.jp/article.pl?sid=03/03/17/1133209&topic=74&mode=nested>
[43]
[CITE[IMGの誕生]] <http://www.silenth.sytes.net/diary.php?date=2003-12>
[70]
@@ [[アニメーションGIF]], [CODE(HTMLa)@en[[[dynsrc]]]],
[CODE(HTMLa)@en[[[motion]]]]
([[名無しさん]])
[74]
[CITE[Chapter 2]] ([CODE[1998-05-20 00:22:16 +09:00]] 版) <http://www.w3.org/People/Raggett/book4/ch02.html>
([[名無しさん]] [WEAK[2007-03-11 03:12:31 +00:00]])
[79]
[CITE[EMail Msg <9303130632.AA14200@wintermute.ncsa.uiuc.edu>]] ([CODE[2007-07-01 02:38:29 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/249.html>
([[名無しさん]])
[80]
>>79
- [Q@en[Mosaic v0.10]] で [CODE(HTMLe)@en[[[img]]]]
[CODE(HTMLa)@en[[[src]]]] を実装する
- [[GIF]] と [[XBM]] に対応する
- [CODE(HTTP)@en[[[Content-Type]]]] は今のところは気にしない
(将来はする予定) で、[[実体本体]]をチェックして形式を判断する
- [CODE(HTMLe)@en[[[include]]]] や [CODE(HTMLe)@en[[[embed]]]]
には今のところ対応しない。任意の埋め込みを許すと[[再帰]]とか問題が山積していて[[画像]]を埋め込みたいだけのとは話が違う
([[名無しさん]])
[81]
[CITE[EMail Msg <9303141100.AA22479@wintermute.ncsa.uiuc.edu>]] ([CODE[2007-07-01 04:29:39 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/254.html>
([[名無しさん]])
[82]
[CITE[EMail Msg <9307122305.AA40433@stat1.cc.ukans.edu>]] ([CODE[2007-07-01 04:58:23 +09:00]] 版) <http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/117.html>
** [CODE(HTMLe)@en[img]] の標準化
@@
[69]
@@ [[HTML 2.0]]
@@ [[HTML 4]] で非推奨? 廃止?
@@ [[HTML 4]] [CODE(HTMLa)@en[[[alt]]]],
[CODE(HTMLa)@en[[[longdesc]]]]
** XHTML 2
[63] '''[CODE(HTMLe)@en[[QN[alt] [http://www.w3.org/1999/xhtml]]]] 要素型の導入'''
2000年頃の [[XHTML 2.0]] 仕様案では、
[CODE(HTMLe)@en[[QN[[[img]]] [http://www.w3.org/1999/xhtml]]]]
が[[内容]]を持ち得る[[要素]]となり、
[CODE(HTMLa)@en[[[alt]]]] [[属性]]に代わる
[CODE(HTMLe)@en[[QN[[[alt]]] [http://www.w3.org/1999/xhtml]]]]
[[要素]]や[[画像写像]]のためと思われる
[CODE(HTMLe)@en[[[a]]]] [[要素]]や
[CODE(HTMLe)@en[[[area]]]] [[要素]]を[[子供]]とできるとされていました。
;; [[XHTML m12n 1.0]] の [[DTD]]
[[QNameモジュール]]に [CODE(HTMLe)@en[[[alt]]]]
[[要素型]]の[[引数実体]]があります。
詳しくは、
[CODE(HTMLe)@en[[QN[[[alt]]] [http://www.w3.org/1999/xhtml]]]]
の項を参照してください。
;; [CITE[Image Module]]
<http://htmlwg.mn.aptest.com/viewcvs/viewcvs.cgi/*checkout*/xhtml2/xhtml2_modules.mhtml?rev=1.4&content-type=text/html#s_imagemodule>
[68]
[CITE[xhtml2/DTD/xhtml-image-2.mod - view - 1.1]] <http://htmlwg.mn.aptest.com/viewcvs/viewcvs.cgi/xhtml2/DTD/xhtml-image-2.mod?rev=1.1&content-type=text/vnd.viewcvs-markup>
;; この時点ではまだ[[名前空間URI]] が未確定なのか、
[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]] だったり
[CODE(URI)@en[[[http://www.w3.org/2000/xhtml]]]] だったり
[CODE(URI)@en[[[http://www.w3.org/TR/xhtml2]]]]
だったりよくわかりません。
[64] '''[CODE(XMLe)@en[[QN[[[object]]] [http://www.w3.org/2002/06/xhtml2]]]] 要素への移行'''
しかし、2002年8月に公開された [[XHTML 2.0]] の最初の [[WD]]
には、 [CODE(HTMLe)@en[[[img]]]] [[要素]]に相当するものは含まれていませんでした。
[[画像]]の埋め込みには、 (一時期 [[HTML 4]] が狙っていたように)
汎用の
[CODE(XMLe)@en[[QN[[[object]]] [http://www.w3.org/2002/06/xhtml2]]]]
[[要素]]を使うとされていました。
;; [CITE[- XHTML Object Module]]
<http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-object.html#s_objectmodule>
;; [[画像写像]]の[[モジュール]]の説明文には、
[CODE(HTMLe)@en[[[img]]]] [[要素]]への言及が残ったままになっていました。
[65] '''[CODE(XMLa)@en[src]] 属性への移行'''
その次の2002年11月の [[XHTML 2.0]] [[WD]] は、
[[共通属性]]として [CODE(XMLa)@en[[[src]]]] [[属性]]を追加しました。
[[画像]]その他の[[物体]]を埋め込むための、
[CODE(HTMLe)@en[[[img]]]] や [CODE(HTMLe)@en[[[object]]]]
に代わる新機能でしたが、
[CODE(XMLe)@en[[QN[[[object]]] [http://www.w3.org/2002/06/xhtml2]]]]
[[要素]]もそのまま残されました。
;; [CITE[- XHTML Attribute Collections]]
<http://www.w3.org/TR/2002/WD-xhtml2-20021211/mod-attribute-collections.html#col_Embedding>
;; 2004年7月の [[WD]] で、 [[XHTML 1]]
との差異の解説が追加され、 [CODE(XMLa)@en[[[src]]]]
が [CODE(HTMLe)@en[[[img]]]] に代わるものとして紹介されています:
[CITE[- Introduction]]
<http://www.w3.org/TR/2004/WD-xhtml2-20040722/introduction.html#s_intro_differences>
[66] '''[CODE(XMLe)@en[[QN[img] [http://www.w3.org/2002/06/xhtml2/]]]] の復活'''
ところが、2005年5月の [[WD]] で、
[CODE(XMLe)@en[[QN[[[img]]] [http://www.w3.org/2002/06/xhtml2/]]]]
が[Q[[[XHTML 2]] への移行を容易にするため]<http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-image.html#sec_19.1.>]と称して[Q[復活]]しています。
この
[CODE(XMLe)@en[[QN[[[img]]] [http://www.w3.org/2002/06/xhtml2/]]]]
[[要素]]にはすべての [[XHTML 2.0]] [[共通属性]]が定義されていました
(その中に [CODE(XMLa)@en[[[src]]]] も含まれます)。
[[XHTML 1]] と比較すると、[[表現属性]]の他に
[CODE(HTMLa)@en[[[alt]]]] と [CODE(HTMLa)@en[[[longdesc]]]]
が消えています。そして、[[代替文]]は[[要素]]の[[内容]]として記述することとされています。
;;
[CITE[XHTML 2.0 - XHTML Image Module]]
<http://www.w3.org/TR/2005/WD-xhtml2-20050527/mod-image.html#sec_19.1.>
;; [[XHTML 1]] との違いの解説は前の版から変わっていません:
[CITE[XHTML 2.0 - Introduction]]
<http://www.w3.org/TR/2005/WD-xhtml2-20050527/introduction.html#s_intro_differences>
[67]
[[XHTML 2]] への移行を容易にすると謳っています
(そのような触れ込みで残されている[[要素]]や[[属性]]は他にも多数あります)
が、
- 当時の [[XHTML 2.0]] [[WD]] が定義する[[要素型]]の属する[[名前空間URI]]
[CODE(URI)@en[[[http://www.w3.org/2002/06/xhtml2/]]]]
は [[XHTML 1]] の[[名前空間URI]]
[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
と異なり、 [[XML名前空間]]的互換性がないこと
- [CODE(XMLe)@en[[QN[[[img]]] [http://www.w3.org/2002/06/xhtml2/]]]]
の[[属性]]と[[内容]]のように、[[名前空間]]を無視しても
[[XHTML 1]] と互換性がないこと
- そもそも [[XHTML 2]] は [[XHTML 1]] と互換性のない大改訂と謳っていること
などから、うわべだけの互換性を持たせようとしているに過ぎないと非難されています。
;; 一方 [[HTML WG]] は、[[著者]]の学習の便などを考えているようですが・・・・・・。
[71]
@@ 初期の [[XHTML 2.0]] with [[XLink]] 案
** [CODE[IMG]] 要素 (DjVu XML)
[273]
[[DjVu XML]]
には
[[HTML]]
の
[CODE[img]]
[[要素]]から派生した
[DFN[[CODE[IMG]]]]
[[要素]]がありました。
**
[77]
[CITE[Conformance for Mail clients (and maybe other WYSIWYG editors)]] ([[Maciej Stachowiak <mjs@...>]] 著, [CODE[2007-04-11 08:21:31 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10162>
([[名無しさん]] [WEAK[2007-04-12 14:01:01 +00:00]])
[78]
[CITE[HTML5 IRC logs: w3c / #html-wg / 20070411]] ([CODE[2007-04-14 11:34:25 +09:00]] 版) <http://krijnhoetmer.nl/irc-logs/html-wg/20070411>
([[名無しさん]] [WEAK[2007-04-14 03:26:14 +00:00]])
[[#comment]]
** 実装
@@
[55] 未確認:
[[WinIE]] は [[Windows]] に登録されている[[濾過器]]
([[Microsoft Paint]] や [[Microsoft Office]] などで用いられるもの)
を使っているのでは無いか? (ex. [[WMF]])
-[57]
[CITE[EZweb XHTML<img>]] (2002年5月付け)
<http://www001.upp.so-net.ne.jp/hdml/wap2/xhtml/img.html>
-- 消滅確認 [TIME[2021-01-29T03:53:18.100Z]]
-- [CITE[EZweb XHTML<img>]], [[Hitomi Kimura]], [TIME[2021-01-29T03:53:06.000Z]], [TIME[2002-10-27T03:13:38.662Z]] <https://web.archive.org/web/20021027031333/http://www001.upp.so-net.ne.jp/hdml/wap2/xhtml/img.html>
これによると、[[EZweb]]の[[WAP 2.0]]対応と称する端末では[CODE(HTMLa)@en[[[src]]]][[属性]]に[[画像]]でなく、[[音声]]を指定すると、それが[[再生]]されるそうです。
公式の資料にはそのような説明は無く、そのように実装されているとしても仕様ではなく偶然でしょうから、音声用にも使えるかのような紹介の仕方は不適切です。[WEAK[(本当に機能だと公式に説明されているなら、それを引用するべきです。)]]
;;
[CITE[XHTML Mobile Profileリファレンス バージョン 1.0]]
<http://developer.openwave.com/ja/tools_and_sdk/documentation/ue11/xhtml-mp-referenceJ/xhtml-mp.htm#pgfId-652027>,
[CITE[KDDI au: タグ変換仕様 > <img>/<object>/<dl>・<dt>・<dd>]] <http://www.au.kddi.com/ezfactory/tec/spec/html_con05.html>
([[名無しさん]] [sage] [WEAK[2005-12-27 06:11:50 +00:00]])
[75]
[[JustView]] は [[Windows]] [[BMP]] に対応していたようです。
([[名無しさん]] [sage])
[76]
[CITE[A Beginner's Guide to HTML]] ([CODE[2003-08-15 22:48:58 +09:00]] 版) <http://ccat.sas.upenn.edu/jod/primer.html#InlineImage>
[[NCSA]] の [[HTML]] 入門。
[97] [[ニンテンドー3DS]]の[[インターネットブラウザー]]は [[MPO]] に対応しています。
[CODE(HTMLe)@en[[[img]]]] では2次元表示しかできませんが、画像上で長押しすると単独で表示され、
そこでは3次元で表示されます。保存することもできます。
** Q & A
[52] '''Q: [CODE(HTMLe)[img]] が廃止されるから [CODE(HTMLe)[object]] を使えといわれましたが、本当ですか?'''
A: 確かに [[HTML 4.0]] の制定時に [CODE(HTMLe)[img]]
を止めて [CODE(HTMLe)[[[object]]]] に統一することが検討されていました。
しかし、結局 [CODE(HTMLe)[img]] は削除も削除の予告も非推奨ともされませんでした。
従来の [[HTML]] や [[XHTML 1]] と互換性のない [[XHTML 2.0]]
ですら、以前は [CODE(HTMLe)[[[img]]]] に相当するものが無く、
[CODE(XMLa)[[[src]]]] 属性がどの[[要素型]]でも使えるようになるとされていましたが、
最近の原案で [CODE(XMLe)[[[img]]]] 要素型が[Q[復活]]しました。
まとめ: 画像の埋込みに [CODE(HTMLe)[[[object]]]]
を使っても'''構いません'''が、 [CODE(HTMLe)[[[img]]]]
を使っても'''構いません'''。
[53] '''Q: [CODE(HTMLe)[img]] 要素は W3C が反対したが Netscape が勝手に作ったというのは本当ですか?'''
A: '''嘘'''です。
そもそも [CODE(HTMLe)[img]] 要素型を導入したのは [[NCSA Mosaic]]
であって [[Netscape]] ではありません。また、 [CODE(HTMLe)[img]]
要素型ができた1993年に [[W3O]] はあっても [[W3C]] はありません。
ただし、 [CODE(HTMLe)[img]] 要素型が従来の [[HTML]]
の機能とは異なり十分な技術的検討と[[コミュニティ]]の同意を経ずに実装され、
[[HTML]] が崩壊に至った端緒となったことは間違いではありません。
** 参考文献
- [9] [CODE(HTMLe)[img]] 要素はなぜ[[空要素]]になったのか:
''Strict-HTML スレッド10'' <http://pc2.2ch.net/test/read.cgi/hp/1045493217/550-557>
- [10] ''alt要素? -- imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明'' <http://www.kanzaki.com/docs/html/htminfo-alt.html#alt-element>
** テスト・ケース
[117] [CITE[Index of /~wakaba/test/web/html/img]] ([TIME[2013-03-20 13:00:26 +09:00]] 版) <http://suika.suikawiki.org/~wakaba/test/web/html/img/>
** 例
[39]
[PRE(HTML)[
<BODY>
<P>I just returned from vacation! Here's a photo of my family at the lake:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="A photo of my family at the lake.">
</BODY>
]PRE]
[WEAK[(HTML 4 仕様書より)]]
同じことを [CODE(HTMLe)[[[object]]]] で書いた例:
[PRE(HTML)[
<BODY>
<P>I just returned from vacation! Here's a photo of my family at the lake:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
type="image/png">
A photo of my family at the lake.
</OBJECT>
</BODY>
]PRE]
[WEAK[(HTML 4 仕様書より)]]
[49]
[PRE(HTML example)[
<[CODE(HTMLe)[[[p]]]]><[CODE(HTMLe)[[[img]]]] [CODE(HTMLa)[[[src]]]]="[CODE(URI)[/images/logo]]" [CODE(HTMLe)[[[alt]]]]="WHATWG, "><[CODE(HTMLe)[[[span]]]] [CODE(HTMLa)[[[class]]]]="date">Friday, January 28th 2005</[CODE(HTMLe)[[[span]]]]></[CODE(HTMLe)[[[p]]]]>
]PRE]
出典: [CITE[Web Hypertext Application Technology Working Group]]
<http://www.whatwg.org/> (2005年1月付け)
[51] >>46 の例
>
[PRE(HTML deprecated example code)[
<[CODE(HTMLe)[script]] [CODE(HTMLa)[type]]="[CODE(MIME)[text/javascript]]">
[CODE(comment)[<!--]]
[CODE(DOMa)[document]].[CODE(DOMm)[write]]("<[CODE(HTMLe)[img]] [CODE(HTMLa)[src]]='[CODE(URI)[../bin/report.cgi?]]");
[CODE(DOMa)[document]].[CODE(DOMm)[write]]([CODE(DOMa)[document]].[CODE(DOMa)[referrer]]+"' [CODE(HTMLa)[width]]=1 [CODE(HTMLa)[height]]=1>");
[CODE(comment)[// -->]]
</[CODE(HTMLe)[script]]>
]PRE]
出典: [CITE[WEB相談室]]
<http://www.parkcity.ne.jp/~chaichan/bin/qanda.cgi?modefg=9>
(2005年4月現在)
この例では、[[照会]]に [[Referer]] [[URI]]
を入れた [[URI]] を [CODE(HTMLa)[[[src]]]] とする高さ1画素、
幅1画素の[Q[隠し]]画像を [CODE(HTMLe)[[[script]]]]
により埋め込んでいます。
[72]
[PRE(HTML invalid example code)[
<!--[if gte vml 1]><v:shapetype id="_x0000_t136"
coordsize="21600,21600" o:spt="136" adj="10800" path="m@7,l@8,m@5,21600l@6,21600e">
[VAR[...]]
</v:shape><![endif]--><![if !vml]><img border=0 width=571 height=96
src="image001.gif" alt="..." v:shapes="_x0000_s1025"><![endif]>
]PRE]
[73]
[PRE(HTML invalid example code)[
<IMG BORDER="0" WIDTH="88" HEIGHT="31" showme="Microsoft Internet Explorer" SRC="/workshop/graphics/ieget_animated.gif" MINVER="5" SAMPLEPATH="/workshop/samples/author/misc/ccdh01.htm" FEATURES="top=25,left=25,height=300,width=400,statusbar=yes,resizable=1"></IMG>
]PRE]
;; [CITE@en-us[About Conditional Comments]] ([CODE[2007-01-08 14:42:10 +09:00]] 版) <http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp>
([[名無しさん]] [WEAK[2007-01-08 05:46:11 +00:00]])
** メモ
[25] [CODE(HTML)[img]] 要素ってそもそも SGML 的には (面倒だけど)
[[外部非解析対象実体]]として存在するべきだよね。今更もうどうにもならないけど。
[37] >>25 実際そうする案もありましたが、面倒なので相手にされませんでした。
[44]
[CITE[ImCat in pixels]] <http://rimantas.com/bits/icxbm.html>
こんなのありかよ! ひでー。
[[WinIE 6]] では表示できなかったけど [[Gecko]] は OK。
([CODE(URI)[[[javascript]]:]] scheme を使って [[XBM]] のデータを値として返している。)
([[名無しさん]] [WEAK[2005-02-14 00:25:27 +00:00]])
[56]
[[行内画像]]は[[文字]]をあらわすために使うこともできます。
;; <IW:HTML4:"charset.html#h-5.3">
([[名無しさん]] [sage])
[58]
[CODE(HTMLe)@en[[[img]]]][[要素型]]の設計は[[GSML]]的に見ても好ましくないという人もいますが、実際はそうでもありません。
>>25,>>37 にある通り、[[URI]]の代わりに[[非解析対象実体]]を使えば、まさに典型的な[[SGML]]的表現になります。
[[文書型定義]]内に:
[PRE(SGML example code)[
<!NOTATION cgm
PUBLIC "ISO 8632:1987//NOTATION Computer Graphics Metafile//EN"
[SPAN(comment)[-- この[[公開識別子]]が正しいのかはよく分からない --]]>
<!ENTITY image-resource
SYSTEM "<url>http://example.com/image"
NDATA cgm>
<!ELEMENT img - o EMPTY>
<!ATTLIST img
src ENTITY #REQUIRED>
]PRE]
[[文書実現値]]に:
[PRE(SGML example code)[
<img src="image-resource"/>
]PRE]
[83]
[CITE@en-gb[Juicy Studio: The HTML 5 Image Element]] ([CODE[2007-09-08 09:16:22 +09:00]] 版) <http://juicystudio.com/article/html5-image-element-no-alt.php>
([[名無しさん]])
[84]
[CITE@en[Web Accessibility Best Practices: Text Equivalents Overview]] ([CODE[2007-09-09 12:03:04 +09:00]] 版) <http://html.cita.uiuc.edu/text/>
([[名無しさん]])
[85]
[CITE[Re: <img> element comments]] ([[Ian Hickson <ian@...>]] 著, [CODE[2007-08-15 10:48:42 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/11692>
([[名無しさん]])
[86]
[CITE[Re: <img> element comments]] ([[Ian Hickson <ian@...>]] 著, [TIME[2007-10-12 22:55:46 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12011>
[89] [CITE[画像周りの速度メモ - 8時40分が超えられない - subtech]] ([TIME[2009-03-31 08:42:28 +09:00]] 版) <http://subtech.g.hatena.ne.jp/secondlife/20090316/1237174012>
[90] [CITE[IRC logs: freenode / #whatwg / 20090520]]
([TIME[2009-08-16 23:10:06 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20090520#l-758>
[91] [CITE@en[Why do we have an IMG element? '''['''dive into mark''']''']]
([TIME[2009-12-27 17:56:23 +09:00]] 版)
<http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element>
[92] [CITE['''['''whatwg''']''' An API to resize and rotate images client-side]]
([TIME[2010-07-27 10:44:07 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-July/027357.html>
[93] [CITE@en[Web Applications 1.0 r5639 Revamp how <img> loading works.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=9895]]
( ([TIME[2010-10-19 09:09:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5638&to=5639>
[94] [CITE[Windows版「Safari」は縮小画像の表示がとてもきれい - Imamuraの日記]]
([TIME[2010-12-25 00:30:12 +09:00]] 版)
<http://d.hatena.ne.jp/Imamura/20080126/safari>
[95] [CITE[''''''[''''''whatwg'''''']'''''' element "img" with HTTP POST method]]
( ([TIME[2011-04-29 19:05:33 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-April/031359.html>
[96] [CITE[IRC logs: freenode / #whatwg / 20110524]]
( ([TIME[2011-05-25 22:10:53 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110524>
[98] [CITE@en[Web Applications 1.0 r6917 Make sure <img> elements don't disappear while loading an image.]]
( ([TIME[2012-01-26 08:06:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6916&to=6917>
[99] [CITE[''''''[''''''whatwg'''''']'''''' Detached elements and delaying the load event]]
( ([TIME[2012-01-26 08:50:45 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034507.html>
[100] [CITE[IRC logs: freenode / #whatwg / 20120323]]
( ([TIME[2012-04-07 14:49:27 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120323>
[101] [CITE[''''''[''''''whatwg'''''']'''''' Add "naturalOrientation" property to <img>]]
( ([TIME[2012-05-09 07:31:00 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035723.html>
[102] [CITE[IRC logs: freenode / #whatwg / 20120509]]
( ([TIME[2012-05-12 22:42:59 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120509>
[103] [CITE[IRC logs: freenode / #whatwg / 20120510]]
( ([TIME[2012-05-13 13:47:55 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120510>
[104] [CITE['''['''whatwg''']''' Features for responsive Web design]]
([TIME[2012-05-15 16:28:58 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-May/035855.html>
[105] [CITE[IRC logs: freenode / #whatwg / 20120512]]
( ([TIME[2012-05-17 22:15:07 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120512>
[106] [CITE[Images - W3C Wiki]]
( ([TIME[2012-05-21 19:38:14 +09:00]] 版))
<http://www.w3.org/wiki/Images>
[107] [CITE[''''''[''''''whatwg'''''']'''''' Features for responsive Web design]]
( ([TIME[2012-05-30 07:40:53 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html>
[108] [CITE@en[Re: the market hasn't spoken - it hasn't bothered to listened ''''''[''''''was Re: fear of "invisible metadata"'''''']'''''']]
( ([[Maciej Stachowiak]] 著, [TIME[2007-06-26 16:00:59 +09:00]] 版))
<http://lists.w3.org/Archives/Public/wai-xtech/2007Jun/0080.html>
[109] [CITE[IRC logs: freenode / #whatwg / 20120519]]
( ([TIME[2012-06-01 20:32:08 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120519#l-421>
[110] [CITE[''''''[''''''whatwg'''''']'''''' toDataURL() for image/video?]]
( ([TIME[2012-06-16 11:42:35 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036421.html>
[111] [CITE@en[Firefox 14 for developers - MDN]]
( ([TIME[2012-06-27 06:03:26 +09:00]] 版))
<https://developer.mozilla.org/en/Firefox_14_for_developers#DOM>
[112] [CITE[Picture Element Proposal - Responsive Images Community Group]]
( ([TIME[2012-06-30 03:19:41 +09:00]] 版))
<http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal>
[113] [CITE[''''''[''''''whatwg'''''']'''''' ProgressEvents for Images]]
( ([TIME[2013-01-04 10:42:26 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-January/038506.html>
[114] [CITE[WWW-Talk Apr-Jun 1993: Re: HTML DTD]]
( ([TIME[2013-03-05 12:56:57 +09:00]] 版))
<http://1997.webhistory.org/www.lists/www-talk.1993q2/0354.html>
[118] [CITE@en[Web Applications 1.0 r8191 More information for authors using images of text.]]
( ([TIME[2013-09-17 06:55:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8190&to=8191>
[119] [CITE[How web browsers resize images]]
( ([TIME[2013-11-03 13:26:58 +09:00]] 版))
<http://entropymine.com/resamplescope/notes/browsers/>
[120] [CITE@en[Web Applications 1.0 r8280 Reframe the <img> rendering section for clarity]]
( ([TIME[2013-11-14 07:36:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8279&to=8280>
[121] [CITE@en[Web Applications 1.0 r8281 Adjust the rules on rendering images without 'alt' attributes.]]
( ([TIME[2013-11-14 07:42:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8280&to=8281>
[122] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:40:41 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1066>
[123] [CITE@en[Web Applications 1.0 r8509 Make <img> reload if inserting it into a new doc causes the URL to change (note that exactly what this does depends on whether the browser's 'list of available images' is maintained per-Doc, or whether there's only one list per origin)]]
( ([TIME[2014-02-25 07:53:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8508&to=8509>
[124] [CITE[IRC logs: freenode / #whatwg / 20140425]]
( ([TIME[2014-04-26 14:47:24 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140425#l-1523>
[125] [CITE[''''''[''''''whatwg'''''']'''''' canvas drawImage and EXIF orientation metadata]]
( ([TIME[2014-04-29 23:36:07 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-April/254180.html>
[126] [CITE[IRC logs: freenode / #whatwg / 20140505]]
( ([TIME[2014-05-07 17:15:03 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140505#l-620>
[127] [CITE@en[Web Applications 1.0 r8612 Remove the <img> stuff so that zcorpan can edit it instead. (this is purely editorial)]]
( ([TIME[2014-05-08 06:40:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8611&to=8612>
[128] [CITE[Specify how parallel image fetching works. · 22efd44 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:19:42 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/22efd4478d7714ac12fd128ca2c455d0f91f42a4>
[129] [CITE[Run 'update the image data' for img.src = img.src case. Fixes www.w3.org... · 5651212 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:22:01 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/56512126f8ac4d69f58807df6b6cfe6d7df20ccb>
[130] [CITE[Make img.src = img.src restart the animation. Fixes https://www.w3.org/B... · d2888fb · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:22:30 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/d2888fb80c2b35070034a6c3ad5cf90a889d955f>
[131] [CITE[Update currentSrc when the image swap happens. Fixes #155 · 719bf4c · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:24:32 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/719bf4cc3c068248696b8f1ae62386425077adf3>
[132] [CITE[Reuse ongoing fetches in 'update the image data'. Fixes https://www.w3.o... · a67d019 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-07-01 05:24:53 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/a67d019f75f95ec3552adc36376522059c582ccc>
[133] [CITE@en[Change when image swap happens to better match browsers. Fixes https://w... · 3817271 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-10-18 14:49:36 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/381727190c5c6d00eaa580379c23331ab1eb2d5a>
[134] [CITE@en[Make update the image data run when the document becomes active. · ee68507 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-10-18 14:52:40 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/ee685075cd65f02022d74b7932073fda4102d15f>
[135] [CITE@en[Make update the image data run when the document becomes active. · ee68507 · ResponsiveImagesCG/picture-element]]
( ([TIME[2014-10-23 02:45:58 +09:00]] 版))
<https://github.com/ResponsiveImagesCG/picture-element/commit/ee685075cd65f02022d74b7932073fda4102d15f>
[1] [CITE@en[Avoid running img-environment-changes algo when not in a document. Fixes... · 7ec1488 · ResponsiveImagesCG/picture-element]]
([TIME[2015-02-19 12:36:00 +09:00]] 版)
<https://github.com/ResponsiveImagesCG/picture-element/commit/7ec148809da2e727635c3353ff89d4e699aa0ba2>
[FIG(quote)[
[FIGCAPTION[
[2] [CITE[tags supported by Emacs/W3]]
([TIME[2015-06-18 17:20:23 +09:00]] 版)
<http://www.tk.airnet.ne.jp/nagae/jp/comp/mule/w3/tags.html>
]FIGCAPTION]
> まず画像(IMG タグ)の扱いが気になるのではないでしょうか. 画像の扱いは,XEmacs とその他の Emacs で大きく異なります. XEmacs では編集画面に任意の画像を表示できますので, 他の(グラフィカルな)ブラウザと同様の表示が可能です. XEmacs 以外の Emacs でも対応は可能です. この場合,まず画面には ALT 属性で指定した文字列 (指定がない場合はファイル名)が表示されます. そこにカーソルを合わせて M-RET を押すと, 外部プログラム(通常は xv)を起動して画像を表示します.
]FIG]
[3] [CITE@en[Integrate Fetch into HTML · whatwg/html@7c5555a]]
([TIME[2015-09-18 18:55:32 +09:00]] 版)
<https://github.com/whatwg/html/commit/7c5555a16f2920c02244c10756bb2f1a11e87a22>
[4] [CITE@en[Use the width attribute if sizes doesn't return a size · whatwg/html@634875f]]
([TIME[2015-09-22 11:33:56 +09:00]] 版)
<https://github.com/whatwg/html/commit/634875f4c5c389ff8c3c6794cbfa9b92fc8a070f>
[5] [CITE@en[Fix #176: set request's same-origin data-URL flag for <img> · whatwg/html@b09402f]]
([TIME[2016-01-20 17:32:55 +09:00]] 版)
<https://github.com/whatwg/html/commit/b09402f7f1f910bcb6025cfd255b0b7291f300a6>
[6] [CITE@en[Change the content model of img element to normative "Nothing" from "… · whatwg/html@4c475d9]]
([TIME[2016-02-06 12:47:23 +09:00]] 版)
<https://github.com/whatwg/html/commit/4c475d9ae1e153effcc07730989dae69c31c54d0>
[7] [CITE@en[URLs are parsed and produce records · whatwg/html@30bc255]]
([TIME[2016-02-14 23:00:29 +09:00]] 版)
<https://github.com/whatwg/html/commit/30bc2557105ad62881ec9670f253febbc9761b44>
[8] [CITE@en[Fix #703: Make form.imageName return non-descendant <img> · whatwg/html@40fa464]]
([TIME[2016-03-03 21:18:02 +09:00]] 版)
<https://github.com/whatwg/html/commit/40fa4643dbf0ba004a938444fd4a370a1d3a53e2>
[11] [CITE@en[Remove the origin aliasing concept · whatwg/html@438155d]] ([TIME[2016-03-23 23:48:11 +09:00]] 版) <https://github.com/whatwg/html/commit/438155d2a2255aa5ea84ae390744d8a8662ebec2>
[136] [CITE@en[Merge effective script origin into origin · whatwg/html@8a843f2]]
([TIME[2016-03-31 16:52:58 +09:00]] 版)
<https://github.com/whatwg/html/commit/8a843f2169a6864a3024c4329528dccb2051d275>