* [CODE(HTMLe)[img]] 要素型 (HTML, XHTML 1) [33] [[HTML]] の [DFN[[CODE(HTMLe)[img]] 要素型]]は、 [[画像]]を埋込みます。 [34] 仕様書: - [[SI 4281]]:1998 -- [CSECTION[6.1.4 Elements with no directionality]] - [[HTML 4]] -- [CSECTION[13.2 Including an image: the [CODE(HTMLe)[IMG]] element]] [35] :状態:[[W3C]] [[勧告]] :[[局所名]]:[CODE(HTMLe)[img]] ([Q@en[[[image]]]] ([Q[[[画像]]]]) の略) :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[開始タグ]]:必須 :[[終了タグ]]:禁止 (HTML 4), 必須 (XHTML 1) :[[内容模型]]:[CODE(SGML)[[[EMPTY]]]] (常に[[強制空要素]])。 :出現できる文脈:[CODE(SGML)[%inline]] な文脈。 (歴史的変遷: ) :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態 ,出典 ,[CODE(HTMLa)[[[align]]]] , , ,揃え位置 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[alt]]]] ,[CODE(SGML)[%[[Text]]]] ,(必須) ,[[代替文]] ,[HTML 4] ,[CODE(HTMLa)[[[border]]]] , , ,枠線 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)@en[[[composite]]]] , , ,非標準 ,[[Dashboard]] ,[CODE(HTMLa)[[[controls]]]] , , , ,非標準 ,[CODE(HTMLa)[[[datafld]]]] , , ,データ欄 ,非標準 ,[CODE(HTMLa)[[[datasrc]]]] ,[CODE(SGML)[%[[URI]]]] , ,データ源 ,非標準 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)@en[[[direction]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[dynsrc]]]] ,[CODE(SGML)[%[[URI]]]] ,(なし) ,動画 URI ,[WinIE] ,[CODE(HTMLa)@en[[[flash]]]] , , , ,非標準 ,[Vodafone] ,[CODE(HTMLa)[[[gaiji]]]] ,([[真偽値属性]]) ,(偽) ,[[外字]]画像かどうか ,[[T-Time]] ,[CODE(HTMLa)[[[galleryimg]]]] , , , ,非標準 ,[[WinIE 6]] ,[CODE(HTMLa)[[[height]]]] ,[CODE(SGML)[%[[Length]]]] ,(自動) ,高さ ,[HTML 4] おすすめしない ,[CODE(HTMLa)[[[hspace]]]] , , ,水平余白 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[internal]]]] , , ,内部画像名 ,[WebExplorer] ,[CODE(HTMLa)[[[ismap]]]] ,([[真偽値属性]]) ,(偽) ,[[鯖側画像写像]] ,[HTML 4] ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[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)[[[motion]]]] ,[CODE(SGML)[%URI]] ,(なし) ,動画こま URI ,[CODE(HTMLa)[[[name]]]] , ,(なし) ,名前 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)@en[[[onload]]]] ,[CODE(SGML)@en[%[[Script]]]] ,(なし) , ,非標準 ,[[NetFront]] ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[_moz_resizing]]]] , , , ,非標準 ,[[Gecko]] ,[CODE(HTMLa)[[[src]]]] ,[CODE(SGML)[%[[URI]]]] ,(必須) ,画像 URI ,[HTML 4] ,[CODE(HTMLa)[[[start]]]] , , , ,非標準 ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[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] おすすめしない ,[CODE(XMLa)[[[xmlns]]]] ,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定 ,== ,[[名前空間名]] ,[[XHTML m12n]] [54] xcvxcvcxv ([[Mr.Anonymous]] [WEAK[2005-08-22 21:38:18 +00:00]]) [[#comment]] ** 内容模型 [37] [CODE(HTMLe)[img]] は[[強制空要素]]です。 どんな[[内容]]も持つことができません。 [38] しばしば、 (代替文のために) [Q[[CODE(HTMLe)[img]] は空要素にするべきではなかった]] と言う人がいます。しかし、 [[SGML]] 的には、そう突飛な設計というわけでもありません。 中には、[Q[[CODE(HTMLe)[img]] は空要素になる''はず''だった]] (のに Mosaic が馬鹿なことをした) などと主張する人もいますが、 根拠がありません。 (あったら教えてください。) >>12 の議論で [CODE(HTMLe)[[[a]]]] 要素を流用する案が出たりもしていますが、 これが根拠なら[Q[空要素になる''はず''だった]]は言い過ぎです。 [[#comment]] ** 出現する文脈 [26] よく、 [CODE(HTMLe)[img]] の親を [CODE(HTMLe)[[[p]]]] にすべきか [CODE(HTMLe)[[[div]]]] にすべきか問題になるけど、 HTML の当初の設計思想であるワープロ互換のための[[フラットでリニアな構造]]化を考えると、 [CODE(HTMLe)[p]] が適当なんじゃないのかな。 [WEAK[(Strict 的に正しいという主張でも、そうするべきだという主張でもないよ。)]] [27] ところで >>26 のネタはしつこいくらいよくでてくるよねぇ。 [CODE(HTMLe)[[[fig]]]] 要素型マンセー。 [[#comment]] [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'' : [[WinIE]] で任意の画像形式に対応する handler の作り方。 [[#comment]] ** レンダリング [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]] [[#comment]] ** 他との関係 [36] 画像の埋込みは、 [CODE(HTMLe)[[[object]]]] を用いても行えます。 (HTML 4 の時に [CODE(HTMLe)[img]] を廃止または非推奨にするべきとの強硬意見もあったようですが、 当時はまだ非現実的と判断されたようです。) [[#comment]] ** 歴史 [12] ''proposed new tag: IMG'' : [CODE(HTMLe)[img]] 要素の最初の提案 (1993 @ [[www-html]]) [13] 異論を無視して当初の提案どおり実装された Mosaic 0.10 の告知: ''EMail Msg <9303141100.AA22479@wintermute.ncsa.uiuc.edu>'' [14] >>13 でも実装しますた。にはその時には特に文句は出てないね。 異論というのも対案が幾つか出てきただけであまり深い議論になってないし。 [19] ''スラッシュドット ジャパン | IMGタグ10周年'' [43] [CITE[IMGの誕生]] [[#comment]] ** 実装 @@ [55] 未確認: [[WinIE]] は [[Windows]] に登録されている[[濾過器]] ([[Microsoft Paint]] や [[Microsoft Office]] などで用いられるもの) を使っているのでは無いか? (ex. [[WMF]]) [57] [CITE[EZweb XHTML]] (2002年5月付け) これによると、[[EZweb]]の[[WAP 2.0]]対応と称する端末では[CODE(HTMLa)@en[[[src]]]][[属性]]に[[画像]]でなく、[[音声]]を指定すると、それが[[再生]]されるそうです。 公式の資料にはそのような説明は無く、そのように実装されているとしても仕様ではなく偶然でしょうから、音声用にも使えるかのような紹介の仕方は不適切です。[WEAK[(本当に機能だと公式に説明されているなら、それを引用するべきです。)]] ;; [CITE[XHTML Mobile Profileリファレンス バージョン 1.0]] , [CITE[KDDI au: タグ変換仕様 > //
・
・
]] ([[名無しさん]] [sage] [WEAK[2005-12-27 06:11:50 +00:00]]) [[#comment]] ** 安全性 [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ブラウザ]]の類でよく実装されています。 [[#comment]] ** 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]] が崩壊に至った端緒となったことは間違いではありません。 [[#comment]] ** 参考文献 - [9] [CODE(HTMLe)[img]] 要素はなぜ[[空要素]]になったのか: ''Strict-HTML スレッド10'' - [10] ''alt要素? -- imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明'' [[#comment]] ** 例 [39] [PRE(HTML)[

I just returned from vacation! Here's a photo of my family at the lake: A photo of my family at the lake. ]PRE] [WEAK[(HTML 4 仕様書より)]] 同じことを [CODE(HTMLe)[[[object]]]] で書いた例: [PRE(HTML)[

I just returned from vacation! Here's a photo of my family at the lake: A photo of my family at the lake. ]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 ]PRE] 出典: [CITE[Web Hypertext Application Technology Working Group]] (2005年1月付け) [51] >>46 の例 > [PRE(HTML deprecated example code)[ <[CODE(HTMLe)[script]] [CODE(HTMLa)[type]]="[CODE(MIME)[text/javascript]]"> [CODE(comment)[]] ]PRE] 出典: [CITE[WEB相談室]] (2005年4月現在) この例では、[[照会]]に [[Referer]] [[URI]] を入れた [[URI]] を [CODE(HTMLa)[[[src]]]] とする高さ1画素、 幅1画素の[Q[隠し]]画像を [CODE(HTMLe)[[[script]]]] により埋め込んでいます。 [[#comment]] ** メモ [25] [CODE(HTML)[img]] 要素ってそもそも SGML 的には (面倒だけど) [[外部非解析対象実体]]として存在するべきだよね。今更もうどうにもならないけど。 [37] >>25 実際そうする案もありましたが、面倒なので相手にされませんでした。 [44] [CITE[ImCat in pixels]] こんなのありかよ! ひでー。 [[WinIE 6]] では表示できなかったけど [[Gecko]] は OK。 ([CODE(URI)[[[javascript]]:]] scheme を使って [[XBM]] のデータを値として返している。) ([[名無しさん]] [WEAK[2005-02-14 00:25:27 +00:00]]) [56] [[行内画像]]は[[文字]]をあらわすために使うこともできます。 ;; ([[名無しさん]] [sage]) [58] [CODE(HTMLe)@en[[[img]]]][[要素型]]の設計は[[GSML]]的に見ても好ましくないという人もいますが、実際はそうでもありません。 >>25,>>37 にある通り、[[URI]]の代わりに[[非解析対象実体]]を使えば、まさに典型的な[[SGML]]的表現になります。 [[文書型定義]]内に: [PRE(SGML example code)[ http://example.com/image" NDATA cgm> ]PRE] [[文書実現値]]に: [PRE(SGML example code)[ ]PRE] ([[名無しさん]] [sage]) [[#comment]] * メモ