img

img 要素 (HTML)

[33] HTMLimg 要素は、 画像を埋込みます。

仕様書

タグ

[17] 開始タグは、必須です。

[18] 終了タグは、使ってはなりません。

属性

[35]

align揃え位置[HTML 4] 非推奨
alt%Text(必須)代替文[HTML 4]
border枠線[HTML 4] 非推奨
composite非標準Dashboard
controls非標準
copyright非標準EMOBILE
datafldデータ欄非標準
datasrc%URIデータ源非標準
dojoattachpoint非標準Dojo
dojotype非標準Dojo
dynsrc%URI(なし)動画 URI[WinIE]
gaiji(真偽値属性)(偽)外字画像かどうかT-Time
height%Length(自動)高さ[HTML 4] おすすめしない
hflip()W3C WDhtml-bidi
hb:hoversrc%URI;標準
hrefリンク先W3C WDXHTML 2.0
xlink:hrefリンク先W3C WD 内部案XHTML 2.0
hspace水平余白[HTML 4] 非推奨
id一意識別子[HTML4] %coreattr
ismap(真偽値属性)(偽)鯖側画像写像[HTML 4]
lang自然言語[HTML4] %i18n
xml:lang自然言語[XHTML1]
livesrc非標準
localsrc非標準
longdesc%URI(なし)説明文書[HTML 4]
loop繰返し回数非標準
loopdelay非標準
lowsrc%URI(なし)低解像度画像 URI
x-maintain-ratioTRUE縦横比保存非標準ROBOHelp]]
mediaoutno非標準EMOBILE
motion%URI(なし)動画こま URI
name(なし)名前[HTML 4]
nosend
onload%Script(なし)非標準NetFront
privateno非標準EMOBILE
rectangle
_moz_resizing非標準Gecko
x-save-file非標準
x-save-method非標準
v:shapes
  • show
    src%URI(必須)画像 URI[HTML 4]
    mce_src%URI;非標準
    start非標準
    x-sas-useimageheight(ブール型属性)()非標準
    x-sas-useimagewidth(ブール型属性)()非標準
    usemap(なし)クライアント側画像写像[HTML 4]
    viblength非標準[Vodafone]
    vibration非標準[Vodafone]
    vrml非標準
    vspace垂直余白[HTML 4] 非推奨
    width%Length(自動)[HTML 4] おすすめしない
  • [34] 仕様書:

    内容

    [37] img強制空要素です。 どんな内容も持つことができません。

    [38] しばしば、 (代替文のために) img は空要素にするべきではなかった と言う人がいます。しかし、 SGML 的には、そう突飛な設計というわけでもありません。

    中には、img は空要素になるはずだった (のに Mosaic が馬鹿なことをした) などと主張する人もいますが、 根拠がありません。 (あったら教えてください。) >>12 の議論で a 要素を流用する案が出たりもしていますが、 これが根拠なら空要素になるはずだったは言い過ぎです。

    [59] libwwwは1994年4月の2.16 Prerelease 1で修正されるまで、 img終了タグが必要でした。

    Change History for W3C Sample Code Library http://www.w3.org/Library/User/History.html

    文脈

    [20] 歴史的変遷: https://suika.suikawiki.org/www/2004/html/classes

    [26] よく、 img の親を p にすべきか div にすべきか問題になるけど、 HTML の当初の設計思想であるワープロ互換のためのフラットでリニアな構造化を考えると、 p が適当なんじゃないのかな。 (Strict 的に正しいという主張でも、そうするべきだという主張でもないよ。)

    [27] ところで >>26 のネタはしつこいくらいよくでてくるよねぇ。 fig 要素型マンセー。

    [21] lowsrc 属性は W3C HTML には存在しませんが、 DOM 1 HTML の HTMLImageElement 界面には定義されていました。 (DOM 2 HTML で削除されました。)

    [22] >>21 同じ独自拡張 HTML 属性が DOM に紛れている例でも、 HTMLScriptElementhtmlForevent は削除されてないのにねぇ。

    [32] >>2 その二つの属性は HTML 4 で一応予約だけはされていますから。

    Mozilla の内部画像

    [40] src の説明に移動しました。

    width/height 両属性問題

    [15] height (>>15) に移動しました。

    画像の種類

    [28] 有史以来 img 要素のリンク先として使われたことのある画像の種類 (src, lowsrc 属性):

    媒体型 (代表)説明
    image/x-bitmapWindows Bitmap
    image/gifGIF
    image/vnd.microsoft.iconICO
    image/jpegJPEG
    video/x-mngMNG
    image/pngPNG
    image/tiffTIFF
    image/vnd.wap.wbmpWBMP
    WMF
    image/x-xbitmapX Bitmap
    application/xnevalVodafone

    [29] (dynsrc 属性):

    video/x-aviAVI
    video/mpegMPEG
    NetShow (ASF)
    QuickTime movie
    model/vrmlVRML
    WMV

    [30] (motion 属性):

    image/pngPNG

    [24] Creating an IMG SRC handler http://eside.homeip.net/column/imgsrc.html : WinIE で任意の画像形式に対応する handler の作り方。

    レンダリング

    [41] img 要素は普通 src で指定された画像で行内で置換えられます。 (ただし、左右に揃えた (align 参照。) ときは行外に浮動します。) [HTML 4]

    [42] 画像を表示できない時には alt が 使われます。 [HTML 4]

    [50] Bidi との関係: img 要素は、 bidi 的には方向性に関して中立文字1文字であるかのように扱います。 方向について特に配慮が必要なら 前後に LRMRLM を使えます。 SI 4281 6.1.4

    [146] 画像は、よく文字を含んでいます。しかしテキストとして選択できませんし、 検索もできないなど、不便極まりありません。翻訳もできなければ拡大もできないかもしれません。 著者は、極力画像文字を含めることを避け、 Web FontsSVG などで代用するべきです。

    [147] Webブラウザーは、 利用者OCR 機能を提供するべきです。

    URL の解決

    [115] ChromeFirefoxOpera は仕様通り src 属性が設定された時点での基底URLを使って画像を表示します。それ以後基底URLが変化しても追随しません。 WinIE9要素文書に挿入された時点で基底URLが変化していれば、それに従い再度 fetch するようです。

    [116] ChromeFirefox は他の文書adopt すると新しい文書の基底URLで改めて fetch するようです。 Opera (Presto) は元の基底URLfetch した画像をそのまま使うことがあるようです (fetch した同じスクリプト内で adopt が発生するとそのまま使う??)。

    画像の起源

    [31] img 要素要素画像起源は、次の通りです >>16

    要素画像データCORS-cross-origin の場合
    要素の画像が作成された時に割り当てた新しい不透明起源
    要素画像データCORS-same-origin の場合
    要素節点文書起源
    [54] これは、この画像canvasdrawImage した後、スクリプトからアクセスできるかどうかに関わります。

    セキュリティー

    [45] 利用者エージェントによっては、 埋込み画像が認証などにより保護されている場合に合言葉を問合せたり、 対応していない媒体型である時に処理方法を問合せたりします。 悪意のある著者がこれを利用して、認証が必要な画像を多く埋込んだり、 未対応と思われる型の資源にリンクしたりして、 利用者エージェントに利用者への問合せを連続して行わせることで事実上操作不能にすることができてしまうかもしれません。 利用者エージェントは利用者に問合せるにしてもその方法を工夫した方がよいでしょう。

    [48] >>45 と似た手口として、 srcmailto: URI や telnet: URI として大量に外部プログラムを起動させて操作不能に陥らせるブラクラも知られています。 利用者エージェントは処理を外部に委託するよう実装している URI scheme や著しく負荷がかかる URI scheme が指定されている時の対策が必要です。

    [46] 画像を埋込むことによって著者が情報を取得することがよく行われています。 典型的なのはいわゆるカウンタです。 純粋なカウンタは単純に画像が取得された回数を記録しているだけですが、 実際には鯖が入手できる情報はなんでも記録できます。 Cookieスクリプトと組合せることで、 利用者の個人情報が知らぬ間に収集されることもあるかもしれません。 (もちろん、これは画像に限ったことではありません。 しかし、埋込み画像を使う手口は手軽なのでよく使われます。)

    電子メイルなど私的な輸送媒体で img が使われている場合は特に注意が必要です。 src に著者の鯖などを指定することにより、 受信者がメッセージを開いたかどうかを自動的に通知させることができてしまいます (読んだかどうかは別問題)spam ではしばしば使われます。 電子メイルなどでは外部の画像を読み込まないのが望ましいと考えられます。

    このような手口を Web bug (盗聴器) や Web beacon (発信器) と呼ぶ人もいます。

    [47] グロ画像などの読者を不快にさせる種類の画像が埋め込まれることがあります。 読者が意図しない種類の画像を見せられてしまうことは技術的にほとんど防ぎようがありません。 しかし、できるだけ読者が見てしまわないような設定ができれば便利です。 例えば、 URI参照に特定の文字列が含まれていたら画像を自動表示しないとか、 一度非表示と指定した画像は次から表示しないとか (URI 参照による非表示制御は URI 参照が変えられると無力ですから、画像のハッシュなどを使うと良いでしょう。) の対策が考えられます。こうした対策は (必ずしも img ではありませんが) 2chブラウザの類でよく実装されています。

    [60] ha.ckers.org web application security lab - Archive » Detecting FireFox Extentions http://ha.ckers.org/blog/20060823/detecting-firefox-extentions/ (名無しさん 2006-09-21 10:23:53 +00:00)

    [61] 秋元@サイボウズ研究所プログラマーBlog: 訪問者が入れているFirefox extensionを検知するJavascript http://labs.cybozu.co.jp/blog/akky/archives/2006/09/detect_firefox_extension.html (名無しさん 2006-09-21 10:24:43 +00:00)

    スクリプトの実行

    [87] img 要素埋め込みされた画像に含まれるスクリプトは実行されないこととされています HTML5 @@ 要引用

    [88] ブログなどで用いられている消毒器Webブラウザーのこの挙動に依存していることがあります。 利用者による HTML タグの入力を認めている場合、悪意のあるスクリプトが貼り付けられるおそれがあり、 制限されていることが多いですが、一方で単純な画像の貼り付けは認められているのが一般的です。 もし SVG などの画像に埋め込まれたスクリプトWebブラウザーによって実行されるとなると、 そのような消毒器の類は img 要素の使用を認めることができなくなってしまいます。

    HTMLImageElement インターフェイス

    [23] img 要素要素インターフェイスは、 HTMLImageElement です。

    HTMLElement

    Image (JavaScript 1.1)
    (new Image ())Image (JavaScript 1.1)
    borderImage (JavaScript 1.1)
    completeImage (JavaScript 1.1)
    dynsrcHTMLImgElement (Trident)
    fileCreatedDateHTMLImgElement (Trident)
    fileSizeHTMLImgElement (Trident)
    fileModifiedDateHTMLImgElement (Trident)
    fileUpdatedDateHTMLImgElement (Trident)
    handleEventImage (JavaScript 1.2)
    heightImage (JavaScript 1.1)
    hrefHTMLImgElement (Trident)
    hspaceImage (JavaScript 1.1)
    loopHTMLImgElement (Trident)
    lowsrcImage (JavaScript 1.1)
    mimeTypeHTMLImgElement (Trident)
    msPlayToDisabled
    msPlayToPrimary
    msPlayToSource
    nameImage (JavaScript 1.1)
    namePropHTMLImgElement (Trident)
    onabortImage (JavaScript 1.1)
    onerrorImage (JavaScript 1.1)
    onkeydownImage (JavaScript 1.1)
    onkeypressImage (JavaScript 1.1)
    onkeyupImage (JavaScript 1.1)
    onloadImage (JavaScript 1.1)
    protocolHTMLImgElement (Trident)
    readyStateHTMLImgElement (Trident)
    StartHTMLImgElement (Trident)
    srcImage (JavaScript 1.1)
    vrmlHTMLImgElement (Trident)
    vspaceImage (JavaScript 1.1)
    widthImage (JavaScript 1.1)


    [159] 画像データファイルサイズを直接取得する方法はありません。 同じ起源キャッシュではなく起源サーバーからの応答なら、 performance.getEntries ()[ i ].transferSize を使うことはできます。

    関連

    [36] 画像の埋込みは、 object を用いても行えます。 (HTML 4 の時に img を廃止または非推奨にするべきとの強硬意見もあったようですが、 当時はまだ非現実的と判断されたようです。)

    [62] image

    HTML には image という要素型もあります。詳しくは image の項を参照してください。

    歴史

    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: 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 でも実装しますた。にはその時には特に文句は出てないね。 異論というのも対案が幾つか出てきただけであまり深い議論になってないし。

    [203] EMail Msg <9302261304.AA05957@www3.cern.ch>, , http://web.archive.org/web/19970524004138/http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/.www-talk-1993q1.messages/178.html

    [204] その「異論」の代表、 WWW の発明者である TimBL の対案。 (対案といってもアイデアメモ程度のもの。 TimBL は発明者といってもこの時期には既に Web技術に対する影響力がかなり低下していました。)

    [205] この TimBL の対案は、「img 要素は本来こうなるはずだった」 と雑学的に紹介されることがたまにあります。 「本来」の解釈次第ですが、少なくてもメーリングリストの記録を見る限り、 説得力のある歴史認識とは言い難いようです。

    [206] 「こうなるはずだった」の第1案は、 ハイパーリンクa 要素を使い、 rel 属性でただのリンクと埋め込みを区別するものです。

    [207] 確かにこの案では画像未対応のWebブラウザーでも素直に対応できる利点はあるのですが、 記述が煩雑になり Webブラウザーの解釈も面倒なので相互運用性の問題の温床になっていた可能性が高そうです。 その後の画像の急速な普及を見れば、簡潔な記述になってよかったとしかいえません (著者も楽だし、転送量も少なくてすむし)。 史実では (画像を表示できない) テキストブラウザーもすぐに img 要素に何らかの形で対応しましたから、 a 要素を流用しなかったデメリットは何もありませんでした。

    [208] しかし a 要素によるハイパーリンクimg 要素埋め込みがここで明確に分離して扱われたことが、 その後の人々のリンク観に決定的な影響を与えたことは間違いないでしょう。 画像動画もなんでも a 要素で表され、 ときにはページに埋め込まれ、時には別ページでリンクされるような異世界の Web では、ページ遷移やメディア埋め込みに対する人々の感じ方も、 著作権との関係性も、現実世界とは違って形作られていたかもしれません。

    [209] また別案として、 SGMLデータ実体実体参照として記述する方法も言及されていました。 当時は HTMLSGML の作法に近づけるのがあるべき姿という考え方が Web標準化関係者の主流でした。 この方法は <a rel> 法以上に煩雑で、現在から見るととても正気とは思えません。 (当時から見ても現実的ではないと判断したので Mosaic は無視したのでしょう。)

    [210] 実体参照を使って間接記述する SGML の手法は、 文書ファイルと画像ファイルの集合体をやり取りするとき、 他のファイルを参照する方法がプラットフォームによって異なるので、 1箇所にまとめて書いておけばファイルを他システムに移動しても修正しやすい、 という工夫から始まったものでした。 URL がある Web ではそんな配慮は不要、 むしろ記述が分散してメンテナンスしにくくなるだけの無駄な冗長性なのですが、 この時代にはまだ Web標準化の関係者も URL の革新性を十分理解できておらず、 SGML 的な「正統性」との間で揺れ動いていました。

    [19] スラッシュドット ジャパン | IMGタグ10周年 http://slashdot.jp/article.pl?sid=03/03/17/1133209&topic=74&mode=nested

    [43] IMGの誕生 http://www.silenth.sytes.net/diary.php?date=2003-12

    [70]

    [74] Chapter 2 (1998-05-20 00:22:16 +09:00 版) http://www.w3.org/People/Raggett/book4/ch02.html (名無しさん 2007-03-11 03:12:31 +00:00)

    [79] EMail Msg <9303130632.AA14200@wintermute.ncsa.uiuc.edu> (2007-07-01 02:38:29 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/249.html (名無しさん)

    [80] >>79

    • Mosaic v0.10img src を実装する
    • GIFXBM に対応する
    • Content-Type は今のところは気にしない (将来はする予定) で、実体本体をチェックして形式を判断する
    • includeembed には今のところ対応しない。任意の埋め込みを許すと再帰とか問題が山積していて画像を埋め込みたいだけのとは話が違う

    (名無しさん)

    [81] EMail Msg <9303141100.AA22479@wintermute.ncsa.uiuc.edu> (2007-07-01 04:29:39 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/254.html (名無しさん)

    [82] EMail Msg <9307122305.AA40433@stat1.cc.ukans.edu> (2007-07-01 04:58:23 +09:00 版) http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q3.messages/117.html

    img の標準化

    [69]

    HTML 4 で非推奨? 廃止?

    HTML もどき

    [212] DTBook にも img があります。

    [215] 資源DTDにもありましたが、 src 属性のみに簡略化されたものでした。

    XHTML 2

    [63] alt 要素型の導入

    2000年頃の XHTML 2.0 仕様案では、 img内容を持ち得る要素となり、 alt 属性に代わる alt 要素画像写像のためと思われる a 要素area 要素子供とできるとされていました。

    XHTML m12n 1.0DTD QNameモジュールalt 要素型引数実体があります。 詳しくは、 alt の項を参照してください。

    [68] 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 が未確定なのか、 http://www.w3.org/1999/xhtml だったり http://www.w3.org/2000/xhtml だったり http://www.w3.org/TR/xhtml2 だったりよくわかりません。

    [64] object 要素への移行

    しかし、2002年8月に公開された XHTML 2.0 の最初の WD には、 img 要素に相当するものは含まれていませんでした。 画像の埋め込みには、 (一時期 HTML 4 が狙っていたように) 汎用の object 要素を使うとされていました。

    画像写像モジュールの説明文には、 img 要素への言及が残ったままになっていました。

    [65] src 属性への移行

    その次の2002年11月の XHTML 2.0 WD は、 共通属性として src 属性を追加しました。 画像その他の物体を埋め込むための、 imgobject に代わる新機能でしたが、 object 要素もそのまま残されました。

    2004年7月の WD で、 XHTML 1 との差異の解説が追加され、 srcimg に代わるものとして紹介されています: - Introduction http://www.w3.org/TR/2004/WD-xhtml2-20040722/introduction.html#s_intro_differences

    [66] img の復活

    ところが、2005年5月の WD で、 imgXHTML 2 への移行を容易にするためと称して復活しています。

    この img 要素にはすべての XHTML 2.0 共通属性が定義されていました (その中に src も含まれます)。 XHTML 1 と比較すると、表現属性の他に altlongdesc が消えています。そして、代替文要素内容として記述することとされています。

    [67] XHTML 2 への移行を容易にすると謳っています (そのような触れ込みで残されている要素属性は他にも多数あります) が、

    などから、うわべだけの互換性を持たせようとしているに過ぎないと非難されています。

    一方 HTML WG は、著者の学習の便などを考えているようですが・・・・・・。

    [71]

    初期の XHTML 2.0 with XLink

    IMG 要素 (DjVu XML)

    [273] DjVu XML には HTMLimg 要素から派生した IMG 要素がありました。

    [77] Conformance for Mail clients (and maybe other WYSIWYG editors) (Maciej Stachowiak <mjs@...> 著, 2007-04-11 08:21:31 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/10162 (名無しさん 2007-04-12 14:01:01 +00:00)

    [78] HTML5 IRC logs: w3c / #html-wg / 20070411 (2007-04-14 11:34:25 +09:00 版) http://krijnhoetmer.nl/irc-logs/html-wg/20070411 (名無しさん 2007-04-14 03:26:14 +00:00)

    実装

    [55] 未確認: WinIEWindows に登録されている濾過器 (Microsoft PaintMicrosoft Office などで用いられるもの) を使っているのでは無いか? (ex. WMF)

    これによると、EZwebWAP 2.0対応と称する端末ではsrc属性画像でなく、音声を指定すると、それが再生されるそうです。

    公式の資料にはそのような説明は無く、そのように実装されているとしても仕様ではなく偶然でしょうから、音声用にも使えるかのような紹介の仕方は不適切です。(本当に機能だと公式に説明されているなら、それを引用するべきです。)

    (名無しさん [sage] 2005-12-27 06:11:50 +00:00)

    [75] JustViewWindows BMP に対応していたようです。 (名無しさん [sage])

    [76] A Beginner's Guide to HTML (2003-08-15 22:48:58 +09:00 版) http://ccat.sas.upenn.edu/jod/primer.html#InlineImage

    NCSAHTML 入門。

    [97] ニンテンドー3DSインターネットブラウザーMPO に対応しています。 img では2次元表示しかできませんが、画像上で長押しすると単独で表示され、 そこでは3次元で表示されます。保存することもできます。

    Q & A

    [52] Q: img が廃止されるから object を使えといわれましたが、本当ですか?

    A: 確かに HTML 4.0 の制定時に img を止めて object に統一することが検討されていました。 しかし、結局 img は削除も削除の予告も非推奨ともされませんでした。

    従来の HTMLXHTML 1 と互換性のない XHTML 2.0 ですら、以前は img に相当するものが無く、 src 属性がどの要素型でも使えるようになるとされていましたが、 最近の原案で img 要素型が復活しました。

    まとめ: 画像の埋込みに object を使っても構いませんが、 img を使っても構いません

    [53] Q: img 要素は W3C が反対したが Netscape が勝手に作ったというのは本当ですか?

    A: です。

    そもそも img 要素型を導入したのは NCSA Mosaic であって Netscape ではありません。また、 img 要素型ができた1993年に W3O はあっても W3C はありません。

    ただし、 img 要素型が従来の HTML の機能とは異なり十分な技術的検討とコミュニティの同意を経ずに実装され、 HTML が崩壊に至った端緒となったことは間違いではありません。

    参考文献

    テスト・ケース

    [117] Index of /~wakaba/test/web/html/img ( 版) http://suika.suikawiki.org/~wakaba/test/web/html/img/

    [39]

    <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>

    (HTML 4 仕様書より)

    同じことを object で書いた例:

    <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>

    (HTML 4 仕様書より)

    [49]

    <p><img src="/images/logo" alt="WHATWG, "><span class="date">Friday, January 28th 2005</span></p>

    出典: Web Hypertext Application Technology Working Group http://www.whatwg.org/ (2005年1月付け)

    [51] >>46 の例

    <script type="text/javascript">
    <!--
    document.write("<img src='../bin/report.cgi?");
    document.write(document.referrer+"' width=1 height=1>");
    // -->
    </script>

    出典: WEB相談室 http://www.parkcity.ne.jp/~chaichan/bin/qanda.cgi?modefg=9 (2005年4月現在)

    この例では、照会Referer URI を入れた URIsrc とする高さ1画素、 幅1画素の隠し画像を script により埋め込んでいます。

    [72]

    <!--[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">
     ...
    </v:shape><![endif]--><![if !vml]><img border=0 width=571 height=96
    src="image001.gif" alt="..." v:shapes="_x0000_s1025"><![endif]>

    [73]

    <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>

    (名無しさん 2007-01-08 05:46:11 +00:00)

    メモ

    [25] img 要素ってそもそも SGML 的には (面倒だけど) 外部非解析対象実体として存在するべきだよね。今更もうどうにもならないけど。

    [37] >>25 実際そうする案もありましたが、面倒なので相手にされませんでした。

    [44] ImCat in pixels http://rimantas.com/bits/icxbm.html

    こんなのありかよ! ひでー。 WinIE 6 では表示できなかったけど Gecko は OK。

    (javascript: scheme を使って XBM のデータを値として返している。) (名無しさん 2005-02-14 00:25:27 +00:00)

    [56] 行内画像文字をあらわすために使うこともできます。

    (名無しさん [sage])

    [58] img要素型の設計はGSML的に見ても好ましくないという人もいますが、実際はそうでもありません。 >>25,>>37 にある通り、URIの代わりに非解析対象実体を使えば、まさに典型的なSGML的表現になります。

    文書型定義内に:

    <!NOTATION cgm
        PUBLIC "ISO 8632:1987//NOTATION Computer Graphics Metafile//EN"
        -- この公開識別子が正しいのかはよく分からない -->
    <!ENTITY image-resource
        SYSTEM "<url>http://example.com/image"
        NDATA cgm>
    <!ELEMENT img - o EMPTY>
    <!ATTLIST img
        src    ENTITY    #REQUIRED>

    文書実現値に:

    <img src="image-resource"/>

    [83] Juicy Studio: The HTML 5 Image Element (2007-09-08 09:16:22 +09:00 版) http://juicystudio.com/article/html5-image-element-no-alt.php (名無しさん)

    [84] Web Accessibility Best Practices: Text Equivalents Overview (2007-09-09 12:03:04 +09:00 版) http://html.cita.uiuc.edu/text/ (名無しさん)

    [85] Re: <img> element comments (Ian Hickson <ian@...> 著, 2007-08-15 10:48:42 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/11692 (名無しさん)

    [86] Re: <img> element comments (Ian Hickson <ian@...> 著, 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12011

    [89] 画像周りの速度メモ - 8時40分が超えられない - subtech ( 版) http://subtech.g.hatena.ne.jp/secondlife/20090316/1237174012

    [90] IRC logs: freenode / #whatwg / 20090520 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20090520#l-758

    [91] Why do we have an IMG element? [dive into mark] ( 版) http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element

    [92] [whatwg] An API to resize and rotate images client-side ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-July/027357.html

    [93] Web Applications 1.0 r5639 Revamp how <img> loading works.Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=9895 ( ( 版)) http://html5.org/tools/web-apps-tracker?from=5638&to=5639

    [94] Windows版「Safari」は縮小画像の表示がとてもきれい - Imamuraの日記 ( 版) http://d.hatena.ne.jp/Imamura/20080126/safari

    [95] [whatwg] element "img" with HTTP POST method ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2011-April/031359.html

    [96] IRC logs: freenode / #whatwg / 20110524 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110524

    [98] Web Applications 1.0 r6917 Make sure <img> elements don't disappear while loading an image. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=6916&to=6917

    [99] [whatwg] Detached elements and delaying the load event ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034507.html

    [100] IRC logs: freenode / #whatwg / 20120323 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120323

    [101] [whatwg] Add "naturalOrientation" property to <img> ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035723.html

    [102] IRC logs: freenode / #whatwg / 20120509 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120509

    [103] IRC logs: freenode / #whatwg / 20120510 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120510

    [104] [whatwg] Features for responsive Web design ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-May/035855.html

    [105] IRC logs: freenode / #whatwg / 20120512 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120512

    [106] Images - W3C Wiki ( ( 版)) http://www.w3.org/wiki/Images

    [107] [whatwg] Features for responsive Web design ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html

    [108] Re: the market hasn't spoken - it hasn't bothered to listened [was Re: fear of "invisible metadata"] ( (Maciej Stachowiak 著, 版)) http://lists.w3.org/Archives/Public/wai-xtech/2007Jun/0080.html

    [109] IRC logs: freenode / #whatwg / 20120519 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120519#l-421

    [110] [whatwg] toDataURL() for image/video? ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036421.html

    [111] Firefox 14 for developers - MDN ( ( 版)) https://developer.mozilla.org/en/Firefox_14_for_developers#DOM

    [112] Picture Element Proposal - Responsive Images Community Group ( ( 版)) http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal

    [113] [whatwg] ProgressEvents for Images ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-January/038506.html

    [114] WWW-Talk Apr-Jun 1993: Re: HTML DTD ( ( 版)) http://1997.webhistory.org/www.lists/www-talk.1993q2/0354.html

    [118] Web Applications 1.0 r8191 More information for authors using images of text. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8190&to=8191

    [119] How web browsers resize images ( ( 版)) http://entropymine.com/resamplescope/notes/browsers/

    [120] Web Applications 1.0 r8280 Reframe the <img> rendering section for clarity ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8279&to=8280

    [121] Web Applications 1.0 r8281 Adjust the rules on rendering images without 'alt' attributes. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8280&to=8281

    [122] ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic ( ( 版)) https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L1066

    [123] 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) ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8508&to=8509

    [124] IRC logs: freenode / #whatwg / 20140425 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140425#l-1523

    [125] [whatwg] canvas drawImage and EXIF orientation metadata ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-April/254180.html

    [126] IRC logs: freenode / #whatwg / 20140505 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140505#l-620

    [127] Web Applications 1.0 r8612 Remove the <img> stuff so that zcorpan can edit it instead. (this is purely editorial) ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8611&to=8612

    [128] Specify how parallel image fetching works. · 22efd44 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/22efd4478d7714ac12fd128ca2c455d0f91f42a4

    [129] Run 'update the image data' for img.src = img.src case. Fixes www.w3.org... · 5651212 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/56512126f8ac4d69f58807df6b6cfe6d7df20ccb

    [130] Make img.src = img.src restart the animation. Fixes https://www.w3.org/B... · d2888fb · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/d2888fb80c2b35070034a6c3ad5cf90a889d955f

    [131] Update currentSrc when the image swap happens. Fixes #155 · 719bf4c · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/719bf4cc3c068248696b8f1ae62386425077adf3

    [132] Reuse ongoing fetches in 'update the image data'. Fixes https://www.w3.o... · a67d019 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/a67d019f75f95ec3552adc36376522059c582ccc

    [133] Change when image swap happens to better match browsers. Fixes https://w... · 3817271 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/381727190c5c6d00eaa580379c23331ab1eb2d5a

    [134] Make update the image data run when the document becomes active. · ee68507 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/ee685075cd65f02022d74b7932073fda4102d15f

    [135] Make update the image data run when the document becomes active. · ee68507 · ResponsiveImagesCG/picture-element ( ( 版)) https://github.com/ResponsiveImagesCG/picture-element/commit/ee685075cd65f02022d74b7932073fda4102d15f

    [1] Avoid running img-environment-changes algo when not in a document. Fixes... · 7ec1488 · ResponsiveImagesCG/picture-element ( 版) https://github.com/ResponsiveImagesCG/picture-element/commit/7ec148809da2e727635c3353ff89d4e699aa0ba2

    [2] tags supported by Emacs/W3 ( 版) http://www.tk.airnet.ne.jp/nagae/jp/comp/mule/w3/tags.html

    まず画像(IMG タグ)の扱いが気になるのではないでしょうか. 画像の扱いは,XEmacs とその他の Emacs で大きく異なります. XEmacs では編集画面に任意の画像を表示できますので, 他の(グラフィカルな)ブラウザと同様の表示が可能です. XEmacs 以外の Emacs でも対応は可能です. この場合,まず画面には ALT 属性で指定した文字列 (指定がない場合はファイル名)が表示されます. そこにカーソルを合わせて M-RET を押すと, 外部プログラム(通常は xv)を起動して画像を表示します.

    [3] Integrate Fetch into HTML · whatwg/html@7c5555a ( 版) https://github.com/whatwg/html/commit/7c5555a16f2920c02244c10756bb2f1a11e87a22

    [4] Use the width attribute if sizes doesn't return a size · whatwg/html@634875f ( 版) https://github.com/whatwg/html/commit/634875f4c5c389ff8c3c6794cbfa9b92fc8a070f

    [5] Fix #176: set request's same-origin data-URL flag for <img> · whatwg/html@b09402f ( 版) https://github.com/whatwg/html/commit/b09402f7f1f910bcb6025cfd255b0b7291f300a6

    [6] Change the content model of img element to normative "Nothing" from "… · whatwg/html@4c475d9 ( 版) https://github.com/whatwg/html/commit/4c475d9ae1e153effcc07730989dae69c31c54d0

    [7] URLs are parsed and produce records · whatwg/html@30bc255 ( 版) https://github.com/whatwg/html/commit/30bc2557105ad62881ec9670f253febbc9761b44

    [8] Fix #703: Make form.imageName return non-descendant <img> · whatwg/html@40fa464 ( 版) https://github.com/whatwg/html/commit/40fa4643dbf0ba004a938444fd4a370a1d3a53e2

    [11] Remove the origin aliasing concept · whatwg/html@438155d ( 版) https://github.com/whatwg/html/commit/438155d2a2255aa5ea84ae390744d8a8662ebec2

    [136] Merge effective script origin into origin · whatwg/html@8a843f2 ( 版) https://github.com/whatwg/html/commit/8a843f2169a6864a3024c4329528dccb2051d275

    [137] Clarify that modifying img.referrerPolicy is not a relevant mutation · w3c/webappsec-referrer-policy@a2ccead ( 版) https://github.com/w3c/webappsec-referrer-policy/commit/a2ccead66e3a926f9f84c06e0dcae18f128463aa

    [138] It actually is a relevant mutation · w3c/webappsec-referrer-policy@da96d09 ( 版) https://github.com/w3c/webappsec-referrer-policy/commit/da96d09383a14b5963d103c1a17368aefb0af743

    [139] revert to *not* relevant mutation · w3c/webappsec-referrer-policy@e84ead9 ( 版) https://github.com/w3c/webappsec-referrer-policy/commit/e84ead9f4208fcc3ba3703aa9d70da4f54005f14

    [140] Merge pull request #35 from jeisinger/image · w3c/webappsec-referrer-policy@c83d3c0 ( 版) https://github.com/w3c/webappsec-referrer-policy/commit/c83d3c05dc3408663749133504b82f8221074d73

    [141] Fix the owner document for all element constructors ( (domenic著, )) https://github.com/whatwg/html/commit/c9d898386d7b79cf1c7e104b5768e393c924078f

    [142] Set image request initiator to "imageset" when appropriate ( (domenic著, )) https://github.com/whatwg/html/commit/bbfba9a01672be45de3a447f926c65568ce7e086

    [143] Integrate with the Referrer Policy spec, part 1 of n ( (domenic著, )) https://github.com/whatwg/html/commit/6a7318072f340ad45229df171245d70d8621c2fe

    [144] Align Fetch's destination concept with changes in Fetch (sideshowbarker著, ) https://github.com/whatwg/html/commit/5e8f96a85d182d36c177db0d6fdde58b4ded86d4

    [145] Align with vocabulary changes in the DOM Standard (annevk著, ) https://github.com/whatwg/html/commit/5b9c5d5a39c38b08e5a5c9334e14804f063235b2

    [148] Use img referrerpolicy attribute when fetching images (estark37著, ) https://github.com/whatwg/html/commit/b077861fec94ae84287ffadd028d0c072df63067

    [149] Use link referrerpolicy attribute when obtaining the resource (estark37著, ) https://github.com/whatwg/html/commit/b209fa011d8d1c315cbca973aba0ae40d335b67c

    [150] Set same-origin data-URL flag for <img> when environment changes (zcorpan著, ) https://github.com/whatwg/html/commit/208ff6e3bb16b6c31c0dd3f19ed70370cc5aa628

    [151] Editorial: restructure the <img>-related sections (zcorpan著, ) https://github.com/whatwg/html/commit/819272910bb1355bb3c45dc4976d71c1152eb723

    [152] Remove Fetch's same-origin data URL flag (annevk著, ) https://github.com/whatwg/html/commit/7204ca9d0f6ac8b2439c9b77a1c4ff988de0b7e3

    [153] Fetch: remove omit-Origin-header flag (annevk著, ) https://github.com/whatwg/html/commit/1d3dd5da311ce51eeaac027cb053cf482476099a

    [154] Bug in Acid3 test #72 (race condition when images decode asynchronously) (Daniel Holbert著, ) https://lists.w3.org/Archives/Public/www-archive/2016Dec/0001.html

    [155] Re: Bug in Acid3 test #72 (race condition when images decode asynchronously) (Simon Pieters著, ) https://lists.w3.org/Archives/Public/www-archive/2017Jan/0000.html

    [156] 17842 – <img>: Feature to make <img> elements not load their images until needed () https://www.w3.org/Bugs/Public/show_bug.cgi?id=17842

    [157] Add img.decode() API for "predecoding" images (domenic著, ) https://github.com/whatwg/html/commit/af6b0e9b5c2942ad32ccb600031fb4b953011982

    [158] Add img.decode() API for "predecoding" images by domenic · Pull Request #2332 · whatwg/html () https://github.com/whatwg/html/pull/2332

    [160] 23511 – <img>: Expose EXIF data of images in <img> elements () https://www.w3.org/Bugs/Public/show_bug.cgi?id=23511

    [161] Fetch removes type in favor of just destination (annevk著, ) https://github.com/whatwg/html/commit/5f59b7a73d450e244a573e5916deb1c2037c1366

    [162] Cleaning up 'optionally-blockable'. (mikewest著, ) https://github.com/w3c/webappsec-mixed-content/commit/2ff806843a8e634d7d47484db185b995d2d6a95c

    [163] Normative definition of optionally-blockable contradicts following note · Issue #8 · w3c/webappsec-mixed-content () https://github.com/w3c/webappsec-mixed-content/issues/8

    [164] Editorial: clean up various things around <img> (annevk著, ) https://github.com/whatwg/html/commit/d6be37a40c4edcda56175ce73e3d7ce06854228d

    [165] Editorial: clean up various things around <img> by annevk · Pull Request #3132 · whatwg/html () https://github.com/whatwg/html/pull/3132

    [166] Be explicit about image request state (annevk著, ) https://github.com/whatwg/html/commit/12b4187feaa98e67886074ff1bd29d865fe56178

    [167] <img> element state · Issue #3158 · whatwg/html () https://github.com/whatwg/html/issues/3158

    [168] Be explicit about image request state by annevk · Pull Request #3227 · whatwg/html () https://github.com/whatwg/html/pull/3227

    [169] remove requirement to ignore title when alt is empty (stevefaulkner著, ) https://github.com/w3c/html-aam/commit/6da0fef9384b6a67c5f6b79d3c02a33994d350bf

    [170] WCAG/HTML name computation discrepancy with `<img alt="" title="foo"> · Issue #99 · w3c/html-aam () https://github.com/w3c/html-aam/issues/99

    [171] Add <img decoding> (vmpstr著, ) https://github.com/whatwg/html/commit/05525c88994bf7748eed4e175f2f51f6a01105bc

    [172] "decode" attribute on <img> · Issue #1920 · whatwg/html () https://github.com/whatwg/html/issues/1920

    [173] "decode" attribute on <img> · Issue #1920 · whatwg/html () https://github.com/whatwg/html/issues/1920

    [174] Clarify image display when src is an empty string (mwenge著, ) https://github.com/whatwg/html/commit/fdd60d3cfe925856f51c804717f7878d9deda966

    [175] Treatment of fallback image on <img src=> · Issue #3280 · whatwg/html]] () https://github.com/whatwg/html/issues/3280

    [176] Clarify image display when src is an empty string by mwenge · Pull Request #3311 · whatwg/html () https://github.com/whatwg/html/pull/3311

    [177] Clarify image display when src is an empty string, again (mwenge著, ) https://github.com/whatwg/html/commit/50c65e0c896a8fff2ed499cb3a1e325c56e61411

    [178] Treatment of fallback image on <img src=> · Issue #3280 · whatwg/html]] () https://github.com/whatwg/html/issues/3280

    [179] Clarify image display when src is an empty string by mwenge · Pull Request #3320 · whatwg/html () https://github.com/whatwg/html/pull/3320

    [180] Editorial: further cleanup "abort these steps" (shreyateeza著, ) https://github.com/whatwg/html/commit/99e2cdfc484c2ff14cbf5c38b859f4d6da17e64c

    [181] Should `img` in a template load src/srcset? · Issue #3600 · whatwg/html () https://github.com/whatwg/html/issues/3600

    [182] New WebKit Features in Safari 11.1 | WebKit () https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

    Animated image formats are very popular, but they easily become large, bandwidth intensive file sizes. To address the performance impact, WebKit in Safari now supports loading H.264 encoded MP4 video with an HTML <img> tag. This allows content authors to replace animated GIF files that are much larger than H.264 video files and require more processing power to display. Beyond the performance gains, this change also allows web content authors to use videos as a CSS background-image.

    [183] Drop IMG element from form-associated elements · Issue #294 · whatwg/html () https://github.com/whatwg/html/issues/294

    [184] New WebKit Features in Safari 11.1 | WebKit () https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

    [185] Rendering: update when an image creates a replaced box (emilio著, ) https://github.com/whatwg/html/commit/f9e4c660c84a7ec08f2c107390a5a157f02611b0

    [186] rendering: Update the conditions where an image creates a replaced box. by emilio · Pull Request #4406 · whatwg/html () https://github.com/whatwg/html/pull/4406

    [187] 「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31, 2019.09.11 () https://blog.mayo31.info/archives/2321

    [188] >>187 15年くらい前の記事がなぜ上がってきた?と思ったら昨日の記事でびっくりw 仕様レベルでは10年前にとっくに解決済みなのに、 未だに img 要素を p 要素に入れるべきか否かみたいなことを言ってる人がいるとは。 タイムスリップしたみたいな懐かしい感覚だwww

    この記事、 「今日は何年何月何日ですか? この記事は、古い情報について書かれている可能性があります。」 と煽っているわりに HTML 5.3 とかいう W3C にすら見捨てられた怪文書を参照しているし、 HTML Standard に言及しつつ HTML 5.2 から引用するとかいう意味不明な感じで、 仕様書から引用して正しいことを言っている風に怪しいこと書いてるのが逆にやばい。 (たぶん W3C の奇行 HTML 5.0 に混乱させられた被害者なのだろう。)

    [189] Remove <img> progress events (annevk著, ) https://github.com/whatwg/html/commit/af7cff772293db8d35198128c36e1297cb0fd1d4

    [190] Use width and height as intrinsic aspect ratio for img elements (emilio著, ) https://github.com/whatwg/html/commit/17a3f3cc9517e5a4312a37bc9a8e592a2a935a76

    [191] Use width and height as intrinsic aspect ratio for img elements by emilio · Pull Request #4952 · whatwg/html · GitHub () https://github.com/whatwg/html/pull/4952

    [192] Make <img>.complete more reliable (annevk著, ) https://github.com/whatwg/html/commit/87fa719c219ac09e2006e17901defef0e1911c44

    [193] Why does the value of img.complete can thus change while a script is executing? · Issue #1055 · whatwg/html · GitHub () https://github.com/whatwg/html/issues/1055

    [194] How should <img>.complete interact with pending requests? · Issue #4475 · whatwg/html · GitHub () https://github.com/whatwg/html/issues/4475

    [195] <img>.complete should be changed by the "update the image data" algorithm · Issue #4476 · whatwg/html · GitHub () https://github.com/whatwg/html/issues/4476

    [196] Make <img>.complete more reliable by annevk · Pull Request #4934 · whatwg/html · GitHub () https://github.com/whatwg/html/pull/4934

    [197] Remove <img> progress events (annevk著, ) https://github.com/whatwg/html/commit/af7cff772293db8d35198128c36e1297cb0fd1d4

    [198] "fire a progress event named type at e" missing transmitted/length · Issue #1915 · whatwg/html () https://github.com/whatwg/html/issues/1915

    [199] 25795 – <img> error/loadend are always simple events () https://www.w3.org/Bugs/Public/show_bug.cgi?id=25795

    [200] Reacting to environment changes doesn't fire loadstart or loadend events · Issue #3860 · whatwg/html () https://github.com/whatwg/html/issues/3860

    [201] Remove <img> progress events by annevk · Pull Request #4842 · whatwg/html () https://github.com/whatwg/html/pull/4842

    [202] Add "queue an element task" algorithm (dtapuska, , ) https://github.com/whatwg/html/commit/a9e1d2ad5a7569010c685b271965ae4a3a34a64b

    Image constructor

    [211] CEA-2014-B