Living Standard — Last Updated 12 December 2024
source
, img
, and link
elementsこの節は非規範的である。
単独の画像リソースのみが存在する場合、HTMLにおいて画像を埋め込むために、img
要素およびsrc
属性を使用する。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...
しかし、ユーザーエージェントが選択することができる複数の画像リソースを用いることを著者が望むかもしれない多数の状況が存在する:
異なるユーザーが異なる環境特性を持つかもしれない:
ユーザーの物理スクリーンサイズは他のものと異なるかもしれない。
ラップトップのスクリーンは14インチ型であるかもしれない一方で、携帯電話のスクリーンは4インチ型であるかもしれない。
画像のレンダリングサイズがビューポートに依存する場合、これは単に関連するだけである。
ユーザーのスクリーンピクセル密度は、別のスクリーンと異なるかもしれない。
携帯電話のスクリーンは、物理スクリーンサイズに関わらず、別の携帯電話のスクリーンと比較してインチあたり物理ピクセルとして3倍になるかもしれない。
ユーザーのズームレベルは別のものと異なるかもしれず、時間とともに単独のユーザーに対して変化するかもしれない。
ユーザーは、特定の画像の詳細を見るためにズームするかもしれない。
ズームレベルおよびスクリーンピクセル密度(前のポイント)は、CSSピクセル密度あたり多数の物理スクリーンピクセルに影響を与えることができる。この比率は、一般にデバイスピクセル比として参照される。
ユーザーのスクリーン方向は別のものと異なるかもしれず、時間とともに単独のユーザーに対して変化するかもしれない。
タブレットは縦型または90度回転して固定されることができ、その結果スクリーンは、"縦長"(portrait)または"横長"(landscape)のいずれかとなる。
ユーザーのネットワーク速度、ネットワークレイテンシおよび帯域幅コストは異なるかもしれず、時間とともに単独のユーザーに対して変化するかもしれない。
ユーザーは、仕事で低レイテンシおよび一定コスト接続の高速かもしれないし、家で低レイテンシおよび一定コスト接続の低速かもしれないし、他の場所で高レイテンシおよび可変コスト接続の速度変化かもしれない。
著者は、ビューポートの幅に依存して、同じ画像だが異なるレンダリングサイズを表示したいかもしれない。これは通常ビューポートベースの選択として参照される。
A web page might have a banner at the top that always spans the entire viewport width. この場合、画像のレンダリングサイズはスクリーンの物理サイズに依存する(最大化されたブラウザーウィンドウを仮定する)。
Another web page might have images in columns, with a single column for screens with a small physical size, two columns for screens with medium physical size, and three columns for screens with big physical size, with the images varying in rendered size in each case to fill up the viewport. この場合、画像のレンダリングサイズは、スクリーンがより小さくにもかかわらず、2列レイアウトと比較して1列レイアウトでより大きくなるかもしれない。
著者は、画像のレンダリングサイズ次第で異なる画像コンテンツを表示したいかもしれない。これは通常art directionとして参照される。
When a web page is viewed on a screen with a large physical size (assuming a maximised browser window), the author might wish to include some less relevant parts surrounding the critical part of the image. When the same web page is viewed on a screen with a small physical size, the author might wish to show only the critical part of the image.
著者は、ユーザーエージェントがサポートする画像フォーマットに応じて、同じ画像コンテンツだが異なる画像フォーマットを表示したいかもしれない。これは通常画像フォーマットベースの選択として参照される。
A web page might have some images in the JPEG, WebP and JPEG XR image formats, with the latter two having better compression abilities compared to JPEG. 異なるユーザーエージェントは、よりよい圧縮比を提供するフォーマットをもつ、異なる画像フォーマットをサポートすることができるため、サポートしないユーザーエージェントに対してJPEGフォールバックを提供する一方で、著者はフォーマットをサポートするユーザーエージェントに対してよりよいフォーマットを配信したいだろう。
上記の状況は、相互に排他的ではない。たとえば、art directionに対する異なるリソースをもつ異なるデバイスピクセル比が異なるリソースを組み合わせることは理にかなっている。
スクリプトを使用することでこれら問題を解決することは可能である間、そのようにすることは他の問題を導入する:
Some user agents aggressively download images specified in the HTML markup, before scripts have had a chance to run, so that web pages complete loading sooner. スクリプトがダウンロードする画像を変更する場合、より悪いページ読み込みパフォーマンスを引き起こすことができるダウンロードの代わりに、ユーザーエージェントはダウンロードを分離する2つを潜在的に開始するだろう。
著者がHTMLマークアップで任意の画像の指定を避け、かつスクリプトから単一のダウンロードを代わりに実例を示す場合、それは上記の2回のダウンロード問題を回避するが、無効にされるスクリプトをもつユーザーに対して画像を一切ダウンロードせず、かつ積極的な画像ダウンロード最適化も無効にされる。
このことを考慮して、この仕様は宣言する方法で上記の問題を申し立てるための多数の機能を導入する。
img
要素のsrc
およびsrcset
は、(より小さいサイズがより大きい画像のスケールダウンバージョンとなる)画像サイズで変化するのみの複数の画像を提供するためにx
記述子を用いて使用することができる。
画像のレンダリングサイズがビューポート幅に依存する場合(ビューポートベースの選択)、x
記述子は適さないが、art directionと一緒に使用することができる。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg"
srcset = "/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...
ユーザーエージェントは、ユーザーのスクリーンのピクセル密度、ズームレベルおよびユーザーのネットワーク状態のような可能性のあるその他の要素に依存する与えられたリソースのどれでも選択することができる。
srcset
属性を解釈しない古いユーザーエージェントの後方互換性のために、URLの1つは、img
要素のsrc
属性で指定される。これは(ユーザーが好むよりももしかすると低い解像度だけれども)古いユーザーエージェントにおいてさえも表示されるという何かしら役に立つ結果になるだろう。新しいユーザーエージェントに対して、あたかも属性が1x
記述子とともにsrcset
で指定されたかのように、src
属性はリソース選択に参加する。
画像のレンダリングサイズは、画像がダウンロードされる前に画像に対する空間を割り当てることがユーザーエージェントにできるwidth
およびheight
属性で与えられる。
srcset
およびsizes
は、(より小さいサイズがより大きい画像のスケールダウンバージョンとなる)画像サイズで変化するのみの複数の画像を提供するためにw
記述子を用いて使用することができる。
この例において、バナー画像は(適切なCSSを用いて)ビューポート幅全体を取る。
< h1 >< img sizes = "100vw" srcset = "wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src = "wolf-400.jpg" alt = "The rad wolf" ></ h1 >
ユーザーエージェントは、指定されるw
記述子およびsizes
属性で指定されるレンダリングサイズから各画像の効果的なピクセル密度を算出するだろう。 ユーザーエージェントは、ユーザーのスクリーンのピクセル密度、ズームレベルおよびユーザーのネットワーク状態のような可能性のあるその他の要素に依存する与えられたリソースのどれでも選択することができる。
ユーザーのスクリーンが320 CSSピクセル幅である場合、これはwolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x
に指定するのと等価である。言い換えると、ユーザーのスクリーン1200 CSSピクセル幅である場合、これはwolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x
に指定するのと等価である。w
記述子およびsizes
属性を使用することによって、ユーザーエージェントはユーザーのデバイスの大きさにかかわらず、ダウンロードする正確な画像リソースを選択することができる。
後方互換性のために、URLの1つはimg
要素のsrc
属性で指定される。新しいユーザーエージェントにおいて、srcset
属性がw
記述子を使用する場合、src
属性は無視される。
In this example, the web page has three layouts depending on the width of the viewport. 狭いレイアウトは1列目の画像(各画像の幅が約100%)、中程度のレイアウトは2列目の画像(各画像の幅が約50%)、広いレイアウトは3列目の画像(各画像の幅が約33%)、およびページマージンを持つ。ビューポートがそれぞれ幅30em
および幅50em
である場合、これらのレイアウトを壊す。
< img sizes = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" >
sizes
属性は、30em
および50em
でレイアウトのブレークポイントを設定し、これらブレークポイントの間で 100vw
、50vw
またはcalc(33vw - 100px)
に画像サイズを宣言する。これらサイズは、CSSで指定されたように実際の画像幅と厳密にマッチする必要が必然的にない。
ユーザーエージェントは、trueに評価する<media-condition>(丸括弧の一部)をもつ最初の項目を用いる、またはそれらがfalseにすべて評価する場合、最後の項目(calc(33vw - 100px)
)を用いて、sizes
属性から幅を選ぶだろう。
たとえば、ビューポート幅が29em
である場合、(max-width: 30em)
がtrueに評価し100vw
が使用され結果として、リソース選択の目的で画像サイズは29em
である。ビューポート幅が代わりに32em
である場合、(max-width: 30em)
はfalseに評価するが、(max-width: 50em)
はtrueに評価し、50vw
が使用され結果として、リソース選択の目的で画像のサイズは16em
(ビューポート幅の半分)となる。異なるレイアウトのため、わずかにより幅の広いビューポートがより小さい画像をもたらすことに注目する。
ユーザーエージェントは、効果的なピクセル密度を選択し、前の例と似た適切なリソースを選択することができる。
This example is the same as the previous example, but the image is lazy-loaded. In this case, the sizes
attribute can use the auto
keyword, and the user agent will use the width
attribute (or the width specified in CSS) for the source size.
< img loading = "lazy" width = "200" height = "200" sizes = "auto"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" >
For better backwards-compatibility with legacy user agents that don't support the auto
keyword, fallback sizes can be specified if desired.
< img loading = "lazy" width = "200" height = "200"
sizes = "auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" >
The picture
element and the source
element, together with the media
attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image).
< picture >
< source media = "(min-width: 45em)" srcset = "large.jpg" >
< source media = "(min-width: 32em)" srcset = "med.jpg" >
< img src = "small.jpg" alt = "The wolf runs through the snow." >
</ picture >
ユーザーエージェントがmedia
属性におけるメディアクエリがマッチする最初のsource
要素を選択し、要素のsrcset
属性から適切なURLを選択する。
画像のレンダリングサイズは、ソースが選択されるものに依存して変化する。ダウンロードされた画像を持つ前にユーザーエージェントが使用することができる次元を指定するために、CSSは使用することができる。
img { width : 300 px ; height : 300 px }
@media ( min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }
この例は、art directionおよびデバイスピクセル比ベースの選択を組み合わせる。ビューポートの半分を取るバナーは、1つは広いスクリーンに対して、1つは狭いスクリーンに対しての、2つのバージョンで提供される。
< h1 >
< picture >
< source media = "(max-width: 500px)" srcset = "banner-phone.jpeg, banner-phone-HD.jpeg 2x" >
< img src = "banner.jpeg" srcset = "banner-HD.jpeg 2x" alt = "The Breakfast Combo" >
</ picture >
</ h1 >
The type
attribute on the source
element can be used to provide multiple images in different formats.
< h2 > From today's featured article</ h2 >
< picture >
< source srcset = "/uploads/100-marie-lloyd.webp" type = "image/webp" >
< source srcset = "/uploads/100-marie-lloyd.jxr" type = "image/vnd.ms-photo" >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
</ picture >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...
この例において、ユーザーエージェントは、サポートされるMIMEタイプをもつtype
属性を持つ最初のリソースを選択する。ユーザーエージェントがWebP画像をサポートする場合、最初のsource
要素が選択される。WebP画像をサポートしないが、ユーザーエージェントがJPEG XR画像をサポートする場合、2つ目のsource
要素が選択される。これらのフォーマットがいずれもサポートされない場合、img
要素が選択される。
この節は非規範的である。
CSSおよびメディアクエリーは、具体的には異なるビューポートの次元および画素密度で、ユーザーの環境に動的に適応するグラフィカルなページレイアウトを構築するために使用することができる。しかしコンテンツに対して、CSSは助けにならない。代わりに、img
要素のsrcset
属性およびpicture
要素がある。この節は、この機能を使用する方法を示すサンプル例を渡り歩く。
(600 CSSピクセルより広い)大きな画面でa-rectangle.png
という名前の300×150の画像が使用される一方で、(600 CSSピクセルより小さい)小さな画面でa-square.png
という名前の100×100の画像が使用される状況を考えてみよう。この場合のマークアップは次のようになる:
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure >
alt
属性の中に入れるものの詳細については、画像の代替として機能するテキストを提供するための要件の節を参照のこと。
これに伴う問題は、ユーザーエージェントが、画像が読み込まれる際に画像に使用する次元が何か必ずしも分からないということである。ページが読み込まれる最中に、複数回のリフローさせるレイアウトを回避するために、CSSおよびCSSメディアクエリーは、次元を提供するために使用することができる:
< style >
# a { width : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure >
代替として、width
およびheight
属性は、単にpicture
をサポートするユーザーエージェントにCSSを単に使用して、レガシーユーザエージェントに幅および高さを提供するために使用することができる:
< style media = "(max-width: 600px)" >
# a { width : 100 px ; height : 100 px ; }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" width = "300" height = "150"
alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure >
img
要素は、picture
要素をサポートしないレガシーユーザーエージェントに使用するために画像のURLを与えるsrc
属性とともに使用される。これは、src
属性で提供するためにその画像の質問につながる。
著者がレガシーユーザーエージェントで最大の画像を希望する場合、マークアップは次のようになる:
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< img src = "pear-desktop.jpeg" alt = "The pear is juicy." >
</ picture >
しかし、レガシーモバイルユーザーエージェントがより重要である場合、完全にsrc
属性を上書きする、source
要素にすべての3つの画像を一覧表示することができる。
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture >
この時点で、実際にsrc
属性はpicture
をサポートするユーザーエージェントによって完全に無視されるため、src
属性は最小でも最大でもないものを含む、任意の画像をデフォルトにすることができる:
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-tablet.jpeg" alt = "The pear is juicy." >
</ picture >
max-width
メディア機能が使用される上記は、画像が意図される最大(ビューポート)次元を与える。代わりにmin-width
を使用することも可能である。
< picture >
< source srcset = "pear-desktop.jpeg" media = "(min-width: 1281px)" >
< source srcset = "pear-tablet.jpeg" media = "(min-width: 721px)" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture >
source
, img
, and link
elementssrcset属性は、この節で定義された要件をもつ属性である。
属性が存在する場合、属性値は、U+002C COMMA文字(,)でそれぞれ分離される1つ以上の画像候補文字列から成らなければならない。画像候補文字列が記述子およびURLの後にASCII空白文字を一切含まない場合、次の画像候補文字列が存在するとき、1つ以上のASCII空白文字で開始しなければならない。
画像候補文字列は、以下のリストで説明される追加の制限とともに、順に、以下のコンポーネントから成る:
0個以上のASCII空白文字。
U+002C COMMA(,)文字で開始または終了しない妥当な空でないURLで、非インタラクティブを参照し、任意でアニメーション、ページ化もスクリプト化もされない画像リソース。
0個以上のASCII空白文字。
次の0または1つ:
0個以上のASCII空白文字。
同じ要素に対して別の画像候補文字列の幅記述子値と同じ幅記述子値を持つ要素に対する画像候補文字列が存在してはならない。
同じ要素に対して別の画像候補文字列のピクセル密度記述子値と同じピクセル密度記述子値を持つ要素に対する画像候補文字列が存在してはならない。この要求の目的のために、記述子をもたない画像候補文字列は、1x
記述子をもつ画像候補文字列と等価である。
要素に対する画像候補文字列が幅記述子を指定させる場合、その要素に対するすべての他の画像候補文字列も幅記述子を指定させなければならない。
The specified width in an image candidate string's width descriptor must match the natural width in the resource given by the image candidate string's URL, if it has a natural width.
要素が存在するsizes属性を持つ場合、その要素に対するすべての画像候補文字列は幅記述子を指定させなければならない。
sizes属性は、この節で定義された要件をもつ属性である。
存在する場合、値は妥当なソースサイズのリストでなければならない。
妥当なソースサイズのリストは、以下の文法にマッチする文字列である:[CSSVALUES] [MQ]
< source-size-list > = < source-size > #? , < source-size-value >
< source-size > = < media-condition > < source-size-value > | auto
< source-size-value > = < length > | auto
A <source-size-value> that is a <length> must not be negative, and must not use CSS functions other than the math functions.
The keyword auto
is a width that is computed in parse a sizes attribute. If present, it must be the first entry and the entire <source-size-list> value must either be the string "auto
" (ASCII case-insensitive) or start with the string "auto,
" (ASCII case-insensitive).
If the img
element that initiated the image loading (with the update the image data or react to environment changes algorithms) allows auto-sizes and is being rendered, then auto
is the concrete object size width. Otherwise, the auto
value is ignored and the next source size is used instead, if any.
The auto
keyword may be specified in the sizes
attribute of source
elements and sizes
attribute of img
elements, if the following conditions are met. Otherwise, auto
must not be specified.
The element is a source
element with a following sibling img
element.
The element is an img
element.
The img
element referenced in either condition above allows auto-sizes.
In addition, it is strongly encouraged to specify dimensions using the width
and height
attributes or with CSS. Without specified dimensions, the image will likely render with 300x150 dimensions because sizes="auto"
implies contain-intrinsic-size: 300px 150px
in the Rendering section.
<source-size-value>は、画像の意図するレイアウト幅を与える。著者は、<media-condition>をもつ異なる環境に対して異なる幅を指定してもよい。
何に相対するかについての混乱を避けるため、パーセンテージは<source-size-value>で許可されない。'vw'単位は、viewport幅に相対的な大きさに対して使用することができる。
An img
element has a current request and a pending request. The current request is initially set to a new image request. The pending request is initially set to null.
An image request has a state, current URL, and image data.
An image request's state is one of the following:
An image request's current URL is initially the empty string.
An image request's image data is the decoded image data.
When an image request's state is either partially available or completely available, the image request is said to be available.
When an img
element's current request's state is completely available and the user agent can decode the media data without errors, then the img
element is said to be fully decodable.
An image request's state is initially unavailable.
When an img
element's current request is available, the img
element provides a paint source whose width is the image's density-corrected natural width (if any), whose height is the image's density-corrected natural height (if any), and whose appearance is the natural appearance of the image.
An img
element is said to use srcset
or picture
if it has a srcset
attribute specified or if it has a parent that is a picture
element.
Each img
element has a last selected source, which must initially be null.
Each image request has a current pixel density, which must initially be 1.
Each image request has preferred density-corrected dimensions, which is either a struct consisting of a width and a height or is null. It must initially be null.
To determine the density-corrected natural width and height of an img
element img:
Let dim be img's current request's preferred density-corrected dimensions.
The preferred density-corrected dimensions are set in the prepare an image for presentation algorithm based on meta information in the image.
If dim is null, set dim to img's natural dimensions.
Set dim's width to dim's width divided by img's current request's current pixel density.
Set dim's height to dim's height divided by img's current request's current pixel density.
Return dim.
For example, if the current pixel density is 3.125, that means that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has density-corrected natural width and height of 96 CSS pixels by 192 CSS pixels.
All img
and link
elements are associated with a source set.
A source set is an ordered set of zero or more image sources and a source size.
An image source is a URL, and optionally either a pixel density descriptor, or a width descriptor.
A source size is a <source-size-value>. When a source size has a unit relative to the viewport, it must be interpreted relative to the img
element's node document's viewport. Other units must be interpreted the same as in Media Queries. [MQ]
A parse error for algorithms in this section indicates a non-fatal mismatch between input and requirements. User agents are encouraged to expose parse errors somehow.
Whether the image is fetched successfully or not (e.g. whether the response status was an ok status) must be ignored when determining the image's type and whether it is a valid image.
This allows servers to return images with error responses, and have them displayed.
The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the img
element (e.g. XML files whose document element is an HTML element). User agents must not run executable code (e.g. scripts) embedded in the image resource. User agents must only display the first page of a multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an interactive fashion, but should honour any animation in the resource.
This specification does not specify which image types are to be supported.
By default, images are obtained immediately. User agents may provide users with the option to instead obtain them on-demand. (The on-demand option might be used by bandwidth-constrained users, for example.)
When obtaining images immediately, the user agent must synchronously update the image data of the img
element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations.
When obtaining images on demand, the user agent must update the image data of an img
element whenever it needs the image data (i.e., on demand), but only if the img
element's current request's state is unavailable. When an img
element has experienced relevant mutations, if the user agent only obtains images on demand, the img
element's current request's state must return to unavailable.
The relevant mutations for an img
element are as follows:
The element's src
, srcset
, width
, or sizes
attributes are set, changed, or removed.
The element's src
attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm.
The element's crossorigin
attribute's state is changed.
The element's referrerpolicy
attribute's state is changed.
The img
or source
HTML element insertion steps or HTML element removing steps count the mutation as a relevant mutation.
The element's parent is a picture
element and a source
element that is a previous sibling has its srcset
, sizes
, media
, type
, width
or height
attributes set, changed, or removed.
The element's adopting steps are run.
If the element allows auto-sizes: the element starts or stops being rendered, or its concrete object size width changes. This must set the maybe omit events flag for the update the image data algorithm.
Each Document
object must have a list of available images. Each image in this list is identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin. Each image furthermore has an ignore higher-layer caching flag. User agents may copy entries from one Document
object's list of available images to another at any time (e.g. when the Document
is created, user agents can add to it all the images that are loaded in other Document
s), but must not change the keys of entries copied in this way when doing so, and must unset the ignore higher-layer caching flag for the copied entry. User agents may also remove images from such lists at any time (e.g. to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP `Cache-Control
` response header) when the ignore higher-layer caching flag is unset.
The list of available images is intended to enable synchronous switching when changing the src
attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don't allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading.
The user agent can also store the image data separately from the list of available images.
For example, if a resource has the HTTP response header `Cache-Control: must-revalidate
`, and its ignore higher-layer caching flag is unset, the user agent would remove it from the list of available images but could keep the image data separately, and use that if the server responds with a 304 Not Modified
status.
Image data is usually encoded in order to reduce file size. This means that in order for the user agent to present the image to the screen, the data needs to be decoded. Decoding is the process which converts an image's media data into a bitmap form, suitable for presentation to the screen. Note that this process can be slow relative to other processes involved in presenting content. Thus, the user agent can choose when to perform decoding, in order to create the best user experience.
Image decoding is said to be synchronous if it prevents presentation of other content until it is finished. Typically, this has an effect of atomically presenting the image and any other content at the same time. However, this presentation is delayed by the amount of time it takes to perform the decode.
Image decoding is said to be asynchronous if it does not prevent presentation of other content. This has an effect of presenting non-image content faster. However, the image content is missing on screen until the decode finishes. Once the decode is finished, the screen is updated with the image.
In both synchronous and asynchronous decoding modes, the final content is presented to screen after the same amount of time has elapsed. The main difference is whether the user agent presents non-image content ahead of presenting the final content.
In order to aid the user agent in deciding whether to perform synchronous or asynchronous decode, the decoding
attribute can be set on img
elements. The possible values of the decoding
attribute are the following image decoding hint keywords:
キーワード | 状態 | 説明 |
---|---|---|
sync | Sync | Indicates a preference to decode this image synchronously for atomic presentation with other content. |
async | Async | Indicates a preference to decode this image asynchronously to avoid delaying presentation of other content. |
auto | Auto | Indicates no preference in decoding mode (the default). |
When decoding an image, the user agent should respect the preference indicated by the decoding
attribute's state. If the state indicated is auto, then the user agent is free to choose any decoding behavior.
It is also possible to control the decoding behavior using the decode()
method. Since the decode()
method performs decoding independently from the process responsible for presenting content to screen, it is unaffected by the decoding
attribute.
This algorithm cannot be called from steps running in parallel. If a user agent needs to call this algorithm from steps running in parallel, it needs to queue a task to do so.
When the user agent is to update the image data of an img
element, optionally with the restart animations flag set, optionally with the maybe omit events flag set, it must run the following steps:
If the element's node document is not fully active, then:
Continue running this algorithm in parallel.
Wait until the element's node document is fully active.
If another instance of this algorithm for this img
element was started after this instance (even if it aborted and is no longer running), then return.
Queue a microtask to continue this algorithm.
If the user agent cannot support images, or its support for images has been disabled, then abort the image request for the current request and the pending request, set current request's state to unavailable, set pending request to null, and return.
Let previous URL be the current request's current URL.
Let selected source be null and selected pixel density be undefined.
If the element does not use srcset
or picture
and it has a src
attribute specified whose value is not the empty string, then set selected source to the value of the element's src
attribute and set selected pixel density to 1.0.
Set the element's last selected source to selected source.
If selected source is not null, then:
Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.
If urlString is failure, then abort this inner set of steps.
Let key be a tuple consisting of urlString, the img
element's crossorigin
attribute's mode, and, if that mode is not No CORS, the node document's origin.
If the list of available images contains an entry for key, then:
Set the ignore higher-layer caching flag for that entry.
Abort the image request for the current request and the pending request.
Set pending request to null.
Let current request be a new image request whose image data is that of the entry and whose state is completely available.
Prepare current request for presentation given img.
Set current request's current pixel density to selected pixel density.
Queue an element task on the DOM manipulation task source given the img
element and the following steps:
If restart animation is set, then restart the animation.
Set current request's current URL to urlString.
If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named load
at the img
element.
Abort the update the image data algorithm.
Queue a microtask to perform the rest of this algorithm, allowing the task that invoked this algorithm to continue.
If another instance of this algorithm for this img
element was started after this instance (even if it aborted and is no longer running), then return.
Only the last instance takes effect, to avoid multiple requests when, for example, the src
, srcset
, and crossorigin
attributes are all set in succession.
Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.
If selected source is null, then:
Set the current request's state to broken, abort the image request for the current request and the pending request, and set pending request to null.
Queue an element task on the DOM manipulation task source given the img
element and the following steps:
Change the current request's current URL to the empty string.
If all of the following are true:
the element has a src
attribute or it uses srcset
or picture
; and
maybe omit events is not set or previousURL is not the empty string,
then fire an event named error
at the img
element.
Return.
Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.
If urlString is failure, then:
Abort the image request for the current request and the pending request.
Set the current request's state to broken.
Set pending request to null.
Queue an element task on the DOM manipulation task source given the img
element and the following steps:
Change the current request's current URL to selected source.
If maybe omit events is not set or previousURL is not equal to selected source, then fire an event named error
at the img
element.
Return.
If the pending request is not null and urlString is the same as the pending request's current URL, then return.
If urlString is the same as the current request's current URL and current request's state is partially available, then abort the image request for the pending request, queue an element task on the DOM manipulation task source given the img
element to restart the animation if restart animation is set, and return.
Abort the image request for the pending request.
Set image request to a new image request whose current URL is urlString.
If current request's state is unavailable or broken, then set the current request to image request. Otherwise, set the pending request to image request.
Let request be the result of creating a potential-CORS request given urlString, "image
", and the current state of the element's crossorigin
content attribute.
Set request's client to the element's node document's relevant settings object.
If the element uses srcset
or picture
, set request's initiator to "imageset
".
Set request's referrer policy to the current state of the element's referrerpolicy
attribute.
Set request's priority to the current state of the element's fetchpriority
attribute.
Let delay load event be true if the img
's lazy loading attribute is in the Eager state, or if scripting is disabled for the img
, and false otherwise.
If the will lazy load element steps given the img
return true, then:
Set the img
's lazy load resumption steps to the rest of this algorithm starting with the step labeled fetch the image.
Start intersection-observing a lazy loading element for the img
element.
Return.
Fetch the image: Fetch request. Return from this algorithm, and run the remaining steps as part of the fetch's processResponse for the response response.
The resource obtained in this fashion, if any, is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the image's interaction with other APIs (e.g., when used on a canvas
).
When delay load event is true, fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing web content.
As soon as possible, jump to the first applicable entry from the following list:
multipart/x-mixed-replace
The next task that is queued by the networking task source while the image is being fetched must run the following steps:
If image request is the pending request and at least one body part has been completely decoded, abort the image request for the current request, and upgrade the pending request to the current request.
Otherwise, if image request is the pending request and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, abort the image request for the current request, upgrade the pending request to the current request, and set the current request's state to broken.
Otherwise, if image request is the current request, its state is unavailable, and the user agent is able to determine image request's image's width and height, set the current request's state to partially available.
Otherwise, if image request is the current request, its state is unavailable, and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, set the current request's state to broken.
Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, if the user agent is able to determine the image's width and height, it must prepare the img
element's current request for presentation given the img
element and replace the previous image. Once one body part has been completely decoded, perform the following steps:
Set the img
element's current request's state to completely available.
If maybe omit events is not set or previousURL is not equal to urlString, then queue an element task on the DOM manipulation task source given the img
element to fire an event named load
at the img
element.
The next task that is queued by the networking task source while the image is being fetched must run the following steps:
If the user agent is able to determine image request's image's width and height, and image request is pending request, set image request's state to partially available.
Otherwise, if the user agent is able to determine image request's image's width and height, and image request is current request, prepare image request for presentation given the img
element and set image request's state to partially available.
Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is pending request:
Abort the image request for the current request and the pending request.
Set current request's state to broken.
Fire an event named error
at the img
element.
Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is current request:
Abort the image request for image request.
If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named error
at the img
element.
That task, and each subsequent task, that is queued by the networking task source while the image is being fetched, if image request is the current request, must update the presentation of the image appropriately (e.g., if the image is a progressive JPEG, each packet can improve the resolution of the image).
Furthermore, the last task that is queued by the networking task source once the resource has been fetched must additionally run these steps:
If image request is the pending request, abort the image request for the current request, upgrade the pending request to the current request and prepare image request for presentation given the img
element.
Set image request to the completely available state.
Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named load
at the img
element.
The image data is not in a supported file format; the user agent must set image request's state to broken, abort the image request for the current request and the pending request, upgrade the pending request to the current request if image request is the pending request, and then, if maybe omit events is not set or previousURL is not equal to urlString, queue an element task on the DOM manipulation task source given the img
element to fire an event named error
at the img
element.
While a user agent is running the above algorithm for an element x, there must be a strong reference from the element's node document to the element x, even if that element is not connected.
To abort the image request for an image request or null image request means to run the following steps:
If image request is null, then return.
Forget image request's image data, if any.
Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.
To upgrade the pending request to the current request for an img
element means to run the following steps:
Let the img
element's current request be the pending request.
Let the img
element's pending request be null.
To prepare an image for presentation for an image request req given image element img:
Let exifTagMap be the EXIF tags obtained from req's image data, as defined by the relevant codec. [EXIF]
Let physicalWidth and physicalHeight be the width and height obtained from req's image data, as defined by the relevant codec.
Let dimX be the value of exifTagMap's tag 0xA002
(PixelXDimension
).
Let dimY be the value of exifTagMap's tag 0xA003
(PixelYDimension
).
Let resX be the value of exifTagMap's tag 0x011A
(XResolution
).
Let resY be the value of exifTagMap's tag 0x011B
(YResolution
).
Let resUnit be the value of exifTagMap's tag 0x0128
(ResolutionUnit
).
If either dimX or dimY is not a positive integer, then return.
If either resX or resY is not a positive floating-point number, then return.
If resUnit is not equal to 2
(Inch
), then return.
Let widthFromDensity be the value of physicalWidth, multiplied by 72 and divided by resX.
Let heightFromDensity be the value of physicalHeight, multiplied by 72 and divided by resY.
If widthFromDensity is not equal to dimX or heightFromDensity is not equal to dimY, then return.
If req's image data is CORS-cross-origin, then set img's natural dimensions to dimX and dimY, scale img's pixel data accordingly, and return.
Set req's preferred density-corrected dimensions to a struct with its width set to dimX and its height set to dimY.
Update req's img
element's presentation appropriately.
Resolution in EXIF is equivalent to CSS points per inch, therefore 72 is the base for computing size from resolution.
It is not yet specified what would be the case if EXIF arrives after the image is already presented. See issue #4929.
To select an image source given an img
element el:
Update the source set for el.
If el's source set is empty, return null as the URL and undefined as the pixel density.
Return the result of selecting an image from el's source set.
To select an image source from a source set given a source set sourceSet:
If an entry b in sourceSet has the same associated pixel density descriptor as an earlier entry a in sourceSet, then remove entry b. Repeat this step until none of the entries in sourceSet have the same associated pixel density descriptor as an earlier entry.
In an implementation-defined manner, choose one image source from sourceSet. Let this be selectedSource.
Return selectedSource and its associated pixel density.
When asked to create a source set given a string default source, a string srcset, a string sizes, and an element or null img:
Let source set be an empty source set.
If srcset is not an empty string, then set source set to the result of parsing srcset.
Let source size be the result of parsing sizes with img.
If default source is not the empty string and source set does not contain an image source with a pixel density descriptor value of 1, and no image source with a width descriptor, append default source to source set.
Normalize the source densities of source set.
Return source set.
When asked to update the source set for a given img
or link
element el, user agents must do the following:
Set el's source set to an empty source set.
Let elements be « el ».
If el is an img
element whose parent node is a picture
element, then replace the contents of elements with el's parent node's child elements, retaining relative order.
Let img be el if el is an img
element, otherwise null.
For each child in elements:
If child is el:
Let default source be the empty string.
Let srcset be the empty string.
Let sizes be the empty string.
If el is an img
element that has a srcset
attribute, then set srcset to that attribute's value.
Otherwise, if el is a link
element that has an imagesrcset
attribute, then set srcset to that attribute's value.
If el is an img
element that has a sizes
attribute, then set sizes to that attribute's value.
Otherwise, if el is a link
element that has an imagesizes
attribute, then set sizes to that attribute's value.
If el is an img
element that has a src
attribute, then set default source to that attribute's value.
Otherwise, if el is a link
element that has an href
attribute, then set default source to that attribute's value.
Let el's source set be the result of creating a source set given default source, srcset, sizes, and img.
Return.
If el is a link
element, then elements contains only el, so this step will be reached immediately and the rest of the algorithm will not run.
If child does not have a srcset
attribute, continue to the next child.
Parse child's srcset attribute and let the returned source set be source set.
If source set has zero image sources, continue to the next child.
If child has a media
attribute, and its value does not match the environment, continue to the next child.
Parse child's sizes attribute with img, and let source set's source size be the returned value.
If child has a type
attribute, and its value is an unknown or unsupported MIME type, continue to the next child.
If child has width
or height
attributes, set el's dimension attribute source to child. Otherwise, set el's dimension attribute source to el.
Normalize the source densities of source set.
Let el's source set be source set.
Return.
Each img
element independently considers its previous sibling source
elements plus the img
element itself for selecting an image source, ignoring any other (invalid) elements, including other img
elements in the same picture
element, or source
elements that are following siblings of the relevant img
element.
When asked to parse a srcset attribute from an element, parse the value of the element's srcset attribute as follows:
Let input be the value passed to this algorithm.
Let position be a pointer into input, initially pointing at the start of the string.
Let candidates be an initially empty source set.
Splitting loop: Collect a sequence of code points that are ASCII whitespace or U+002C COMMA characters from input given position. If any U+002C COMMA characters were collected, that is a parse error.
If position is past the end of input, return candidates.
Collect a sequence of code points that are not ASCII whitespace from input given position, and let that be url.
Let descriptors be a new empty list.
If url ends with U+002C (,), then:
Remove all trailing U+002C COMMA characters from url. If this removed more than one character, that is a parse error.
Otherwise:
Descriptor tokenizer: Skip ASCII whitespace within input given position.
Let current descriptor be the empty string.
Let state be in descriptor.
Let c be the character at position. Do the following depending on the value of state. For the purpose of this step, "EOF" is a special character representing that position is past the end of input.
Do the following, depending on the value of c:
If current descriptor is not empty, append current descriptor to descriptors and let current descriptor be the empty string. Set state to after descriptor.
Advance position to the next character in input. If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser.
Append c to current descriptor. Set state to in parens.
If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser.
Append c to current descriptor.
Do the following, depending on the value of c:
Append c to current descriptor. Set state to in descriptor.
Append current descriptor to descriptors. Jump to the step labeled descriptor parser.
Append c to current descriptor.
Do the following, depending on the value of c:
Stay in this state.
Jump to the step labeled descriptor parser.
Set state to in descriptor. Set position to the previous character in input.
Advance position to the next character in input. Repeat this step.
In order to be compatible with future additions, this algorithm supports multiple descriptors and descriptors with parens.
Descriptor parser: Let error be no.
Let width be absent.
Let density be absent.
Let future-compat-h be absent.
For each descriptor in descriptors, run the appropriate set of steps from the following list:
If the user agent does not support the sizes
attribute, let error be yes.
A conforming user agent will support the sizes
attribute. However, user agents typically implement and ship features in an incremental manner in practice.
If width and density are not both absent, then let error be yes.
Apply the rules for parsing non-negative integers to the descriptor. If the result is 0, let error be yes. Otherwise, let width be the result.
If width, density and future-compat-h are not all absent, then let error be yes.
Apply the rules for parsing floating-point number values to the descriptor. If the result is less than 0, let error be yes. Otherwise, let density be the result.
If density is 0, the natural dimensions will be infinite. User agents are expected to have limits in how big images can be rendered.
This is a parse error.
If future-compat-h and density are not both absent, then let error be yes.
Apply the rules for parsing non-negative integers to the descriptor. If the result is 0, let error be yes. Otherwise, let future-compat-h be the result.
Let error be yes.
If future-compat-h is not absent and width is absent, let error be yes.
If error is still no, then append a new image source to candidates whose URL is url, associated with a width width if not absent and a pixel density density if not absent. Otherwise, there is a parse error.
Return to the step labeled splitting loop.
When asked to parse a sizes attribute from an element element, with an img
element or null img:
Let unparsed sizes list be the result of parsing a comma-separated list of component values from the value of element's sizes attribute (or the empty string, if the attribute is absent). [CSSSYNTAX]
Let size be null.
For each unparsed size in unparsed sizes list:
Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size is now empty, then that is a parse error; continue.
If the last component value in unparsed size is a valid non-negative <source-size-value>, then set size to its value and remove the component value from unparsed size. Any CSS function other than the math functions is invalid. Otherwise, there is a parse error; continue.
If size is auto
, and img is not null, and img is being rendered, and img allows auto-sizes, then set size to the concrete object size width of img, in CSS pixels.
If size is still auto
, then it will be ignored.
Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size is now empty:
If this was not the last item in unparsed sizes list, that is a parse error.
If size is not auto
, then return size. Otherwise, continue.
Parse the remaining component values in unparsed size as a <media-condition>. If it does not parse correctly, or it does parse correctly but the <media-condition> evaluates to false, continue. [MQ]
If size is not auto
, then return size. Otherwise, continue.
Return 100vw
.
It is invalid to use a bare <source-size-value> that is a <length> (without an accompanying <media-condition>) as an entry in the <source-size-list> that is not the last entry. However, the parsing algorithm allows it at any point in the <source-size-list>, and will accept it immediately as the size if the preceding entries in the list weren't used. This is to enable future extensions, and protect against simple author errors such as a final trailing comma. A bare auto
keyword is allowed to have other entries following it to provide a fallback for legacy user agents.
An image source can have a pixel density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalizing a source set gives every image source a pixel density descriptor.
When asked to normalize the source densities of a source set source set, the user agent must do the following:
Let source size be source set's source size.
For each image source in source set:
If the image source has a pixel density descriptor, continue to the next image source.
Otherwise, if the image source has a width descriptor, replace the width descriptor with a pixel density descriptor with a value of the width descriptor value divided by the source size and a unit of x
.
If the source size is 0, then the density would be infinity, which results in the natural dimensions being 0 by 0.
Otherwise, give the image source a pixel density descriptor of 1x
.
The user agent may at any time run the following algorithm to update an img
element's image in order to react to changes in the environment. (User agents are not required to ever run this algorithm; for example, if the user is not looking at the page any more, the user agent might want to wait until the user has returned to the page before determining which image to use, in case the environment changes again in the meantime.)
User agents are encouraged to run this algorithm in particular when the user changes the viewport's size (e.g. by resizing the window or changing the page zoom), and when an img
element is inserted into a document, so that the density-corrected natural width and height match the new viewport, and so that the correct image is chosen when art direction is involved.
Await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ If the img
element does not use srcset
or picture
, its node document is not fully active, has image data whose resource type is multipart/x-mixed-replace
, or the pending request is not null, then return.
⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.
⌛ If selected source is null, then return.
⌛ If selected source and selected pixel density are the same as the element's last selected source and current pixel density, then return.
⌛ Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.
⌛ If urlString is failure, then return.
⌛ Let corsAttributeState be the state of the element's crossorigin
content attribute.
⌛ Let origin be the img
element's node document's origin.
⌛ Let client be the img
element's node document's relevant settings object.
⌛ Let key be a tuple consisting of urlString, corsAttributeState, and, if corsAttributeState is not No CORS, origin.
⌛ Let image request be a new image request whose current URL is urlString.
⌛ Let the element's pending request be image request.
End the synchronous section, continuing the remaining steps in parallel.
If the list of available images contains an entry for key, then set image request's image data to that of the entry. Continue to the next step.
Otherwise:
Let request be the result of creating a potential-CORS request given urlString, "image
", and corsAttributeState.
Set request's client to client, initiator to "imageset
", and set request's synchronous flag.
Set request's referrer policy to the current state of the element's referrerpolicy
attribute.
Set request's priority to the current state of the element's fetchpriority
attribute.
Let response be the result of fetching request.
If response's unsafe response is a network error or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), or if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, or if the resource type is multipart/x-mixed-replace
, then let pending request be null and abort these steps.
Otherwise, response's unsafe response is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the image's interaction with other APIs (e.g., when used on a canvas
).
Queue an element task on the DOM manipulation task source given the img
element and the following steps:
If the img
element has experienced relevant mutations since this algorithm started, then let pending request be null and abort these steps.
Let the img
element's last selected source be selected source and the img
element's current pixel density be selected pixel density.
Set the image request's state to completely available.
Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
Prepare image request for presentation given the img
element.
Fire an event named load
at the img
element.
特に指定されている場合を除き、alt
属性を指定しなければならず、その値は空であってはならない。値は画像に対して適切な代用品でなければならない。alt
属性に対する具体的な要件は、以下の節で説明するように、画像が表現しようとするものによって異なる。
The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt
attribute does not change the meaning of the page.
よって、一般に、代替テキストは、もし画像を含めることができなかったならば、何が書かれていただろうかを考慮することで記述することができる。
この帰結は、alt
属性の値が画像のキャプション、タイトル、凡例とみなすことができるテキストを含めるべきではないということである。ユーザーが画像の代わりに使用できる代用テキストを含むはずである。画像を補完することを意図しない。title
属性は、補足情報のために使用することができる。
もう一つの帰結は、alt
属性の値は既に画像隣接する文で提供される情報を繰り返すべきではないということである。
代替テキストを考える一つの方法は、画像の存在があることを言及することなく、電話で誰かに画像を含むページをどのように読むかを考えることである。通常、画像の代わりに言うものは何でも、代替テキストを記述するための良いスタートである。
When an a
element that creates a hyperlink, or a button
element, has no textual content but contains one or more images, the alt
attributes must contain text that together convey the purpose of the link or button.
この例では、ユーザーは、3つのリストから好みの色を選択するよう求められている。各色は画像で与えられるが、画像を表示しないようにユーザーエージェントを設定しているユーザーのために、色名が代わりに使用される:
< h1 > Pick your color</ h1 >
< ul >
< li >< a href = "green.html" > < img src = "green.jpeg" alt = "Green" > </ a ></ li >
< li >< a href = "blue.html" > < img src = "blue.jpeg" alt = "Blue" > </ a ></ li >
< li >< a href = "red.html" > < img src = "red.jpeg" alt = "Red" > </ a ></ li >
</ ul >
この例において、それぞれのボタンは、ユーザーが望む色の出力の種類を示すために、画像のセットを持つ。最初の画像は、代替テキストを提供するために使用される。
< button name = "rgb" > < img src = "red" alt = "RGB" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button >
各画像はテキストの一部を表すため、このようにも書くことができる:
< button name = "rgb" > < img src = "red" alt = "R" >< img src = "green" alt = "G" >< img src = "blue" alt = "B" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "C" >< img src = "magenta" alt = "M" >< img src = "yellow" alt = "Y" >< img src = "black" alt = "K" > </ button >
しかし、他の代替テキストとともに、これは動作しないかもしれず、それぞれの場合に1つの画像にすべての代替テキストを入れる方が理にかなっているかもしれない:
< button name = "rgb" > < img src = "red" alt = "sRGB profile" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK profile" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button >
たとえばフローチャート、図、グラフ、または道順を示す簡単な地図など、意味ある物を視覚的な形式で時により明確に記述することができる。In such cases, an image can be given using the img
element, but the lesser textual version must still be given, so that users who are unable to view the image (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice web browser, or simply because they are blind) are still able to understand the message being conveyed.
テキストはalt
属性で指定されなければならず、かつsrc
属性で指定される画像と同じメッセージを伝えなければならない。
代替テキストが画像の説明でなく、画像の代用品であることを認識することが重要である。
次の例において、文形式のフローチャートを言い換えるalt
属性のテキストをともなう、画像形式のフローチャートを持つ:
< p > In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = "The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer." > </ p >
これは別の例であり、説明に画像を含める問題に良い解決策と悪い解決策を示すものである。
まず、これは良い解決策である。このサンプルは、画像が存在しなかった場合、代替テキストがちょうど文に入れたであろうものがどうあるべきかを示す。
<!-- This is the correct way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "The house is white, with a boarded front door." >
There is a small mailbox here.
</ p >
つぎに、これは悪い解決策である。この間違った方法では、画像に対するテキスト置換の代わりに、代替テキストは画像の簡単な説明である。画像が表示されていない場合、テキストは最初の例と同様に流れない。
<!-- This is the wrong way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "A white house, with a boarded front door." >
There is a small mailbox here.
</ p >
(title
属性に対して、または、この画像をもつfigure
のfigcaption
要素内で適当かもしれないが)"Photo of white house with boarded door"などのテキストは同様に悪い代替テキストとなる。
文書は、アイコン形式で情報を含むことができる。アイコンは、視覚ブラウザーのユーザーに一目で機能を認識するのを助けることを意図する。
ある場合、アイコンは同じ意味を伝えるテキストラベルを補足する。これらの場合において、alt
属性は存在しなければならないが、空でなければならない。
ここで、アイコンは同じ意味を伝えるテキストの隣にあるので、空のalt
属性を持つ:
< nav >
< p >< a href = "/help/" > < img src = "/icons/help.png" alt = "" > Help</ a ></ p >
< p >< a href = "/configure/" > < img src = "/icons/configuration.png" alt = "" >
Configuration Tools</ a ></ p >
</ nav >
他の場合において、アイコンは何かを意味する記述をもつ横のテキストを持たない。アイコンは自明であると仮定される。この場合において、同等のテキストラベルはalt
属性で指定しなければならない。
ここで、ニュースサイトの記事は、そのトピックを示すアイコンが表示される。
< body >
< article >
< header >
< h1 > Ratatouille wins < i > Best Movie of the Year</ i > award</ h1 >
< p > < img src = "movies.png" alt = "Movies" > </ p >
</ header >
< p > Pixar has won yet another < i > Best Movie of the Year</ i > award,
making this its 8th win in the last 12 years.</ p >
</ article >
< article >
< header >
< h1 > Latest TWiT episode is online</ h1 >
< p > < img src = "podcasts.png" alt = "Podcasts" > </ p >
</ header >
< p > The latest TWiT episode has been posted, in which we hear
several tech news stories as well as learning much more about the
iPhone. This week, the panelists compare how reflective their
iPhones' Apple logos are.</ p >
</ article >
</ body >
多くのページは、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国、またはその他団体を表すロゴ、記号、旗、またはエンブレムを含む。
たとえばページの見出しのように、ロゴが団体を表すために使用されている場合、alt
属性はロゴによって表されるその団体の名前を含まなければならない。alt
属性は、伝えられているロゴであるという事実はないので、単語"ロゴ"のようなテキストを含んではならない。団体そのものである。
ロゴが表すものの名前の横にロゴが使用される場合、そのロゴは補足であり、そのalt
属性は空でなければならない。
ロゴが単なる装飾材料(ブランディングとして、たとえば、ロゴが所属する実体を言及する記事でサイドイメージ)として使用される場合、純粋に装飾的な画像で以下のエントリが適用される。ロゴが実際に議論されている場合、それは代替グラフィック表現(ロゴ自体)、および適用される上記の最初のエントリを持つ語句や段落(ロゴの説明)として使用されている。
以下の断片において、上記の例のすべての4つが存在している。まず、会社を表すために使用されるロゴを見てみる:
< h1 > < img src = "XYZ.gif" alt = "The XYZ company" > </ h1 >
次に、会社名の隣でロゴを使用する段落を見てみよう。何ら代替テキストを持たない:
< article >
< h2 > News</ h2 >
< p > We have recently been looking at buying the < img src = "alpha.gif"
alt = "" > ΑΒΓ company, a small Greek company
specializing in our type of product.</ p >
この3番目の断片において、購買を吟味するarticleの一部として、asideに使用されているロゴを持つ:
< aside >< p >< img src = "alpha-large.gif" alt = "" ></ p ></ aside >
< p > The ΑΒΓ company has had a good quarter, and our
pie chart studies of their accounts suggest a much bigger blue slice
than its green and orange slices, which is always a good sign.</ p >
</ article >
最後に、ロゴを話題にする意見記事であり、ロゴは代替テキストで詳細に記載される。
< p > Consider for a moment their logo:</ p >
< p >< img src = "/images/logo" alt = "It consists of a green circle with a
green question mark centered inside it." ></ p >
< p > How unoriginal can you get? I mean, oooooh, a question mark, how
< em > revolutionary</ em > , how utterly < em > ground-breaking</ em > , I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</ p >
この例は、画像が利用可能でない場合、どのように代替テキストは記述すべきかを示し、代わりにテキストが使用され、あたかも画像が最初の場所になかったかのように、テキストは周囲のテキストにシームレスに流れる。
時に、画像がテキストだけで構成されており、画像の目的が、テキストをレンダリングするために使用される実際の印刷効果を強調するだけでなく、単にテキスト自体を伝えるもの。
このような場合、alt
属性が存在しなければならないが、画像自身に書かれたものと同じテキストで構成されなければならない。
テキスト"Earth Day"を含むグラフィックを考慮するが、文字はすべての花や植物で飾られる。グラフィカルなユーザーに対してページに味わいを加えるために、テキストが単に見出しとして使用される場合、適切な代替テキストはまさに同じテキスト"Earth Day"であり、装飾的な言及は何ら必要ない:
< h1 > < img src = "earthdayheading.png" alt = "Earth Day" > </ h1 >
彩色写本は、その画像の一部のグラフィックスを使用するかもしれない。このような状況で代替テキストは、単に画像が表す文字である。
< p >< img src = "initials/o.svg" alt = "O" > nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...
画像がUnicodeで表現できない文字を表すために別の方法で使用される場合、たとえば外字、異体字、または新規の通貨記号のような新しい文字において、テキストによる代替は、たとえば、文字の発音を与えるために表音のひらがなやカタカナを使用するなど、同じものを記述するより伝統的な方法であるべきである。
1997年からのこの例において、中央の2つのバーとともに渦巻き状のEのように見える最新式の通貨記号のかわりに、画像を使用して表現される。代替テキストは、文字の発音を与える。
< p > Only < img src = "euro.png" alt = "euro " > 5.99!
文字が同じ目的を果たすならば画像を使用すべきでない。たとえば装飾のため、または適切な文字がないため(外字の場合のように)など、テキストをテキストで直接表現することができない場合にのみ、画像が適切だろう。
If an author is tempted to use an image because their default system font does not support a given character, then web fonts are a better solution than images.
多くの場合、画像は実際には単なる補足であり、その存在は単に周囲のテキストを強調するだけである。この場合、alt
属性が存在しなければならないが、その値は空文字列でなければならない。
一般に画像は、画像を削除してもページの有用性が弱まるわけでない場合にこのカテゴリーに分類されるが、画像を含めることは、視覚ブラウザーのユーザーにとって概念を理解することがはるかに容易になる。
グラフィカルな形式で、前の段落を繰り返すフローチャート:
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "" ></ p >
この場合、単なるキャプションで構成する代替テキストを含めることが間違っているだろう。キャプションが含まれるべき場合、title
属性、または、figure
およびfigcaption
要素のいずれかを使用できる。後者の場合、画像は実際に代替グラフィック表現を伴うフレーズまたは段落かもしれず、したがって代替テキストを必要とする。
<!-- Using the title="" attribute -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = ""
title = "Flowchart representation of the parsing model." > </ p >
<!-- Using <figure> and <figcaption> -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< figure >
< img src = "images/parsing-model-overview.svg" alt = "The Network leads to
the Input Stream Preprocessor, which leads to the Tokenizer, which
leads to the Tree Construction stage. The Tree Construction stage
leads to two items. The first is Script Execution, which leads via
document.write() back to the Tokenizer. The second item from which
Tree Construction leads is the DOM. The DOM is related to the Script
Execution." >
< figcaption > Flowchart representation of the parsing model.</ figcaption >
</ figure >
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg"
alt = "Flowchart representation of the parsing model." ></ p >
<!-- Never put the image's caption in the alt="" attribute! -->
グラフィカルな形式で、前の段落を繰り返すグラフ:
< p > According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</ p >
< p >< img src = "rendering-mode-pie-chart.png" alt = "" ></ p >
時には、画像はコンテンツに重要ではないが、それにもかかわらず、純粋に装飾的でもテキストと完全に冗長でもないことがある。この場合、alt
属性は存在しなければならず、かつその値は空の文字列、または画像が伝える情報のテキスト表現のいずれかであるべきである。画像が画像のタイトルを与えるキャプションを持つ場合、(非視覚読者に相当な混乱を与えることになるので)alt
属性の値は空であってはならない。
Consider a news article about a political figure, in which the individual's face was shown in an image. ニュース記事に関連するので、画像は純粋に装飾的ではない。政治家がどのように見えるかを示すので、画像はいずれかのニュース記事とも完全に冗長ではない。Whether any alternative text need be provided is an authoring decision, decided by whether the image influences the interpretation of the prose.
この最初の変形例において、画像はコンテキストなしで示され、かつ一切の代替テキストが提供されない:
< p > < img src = "president.jpeg" alt = "" > Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</ p >
画像が顔のみである場合、その画像を説明する際に値は存在しないかもしれない。個人が赤髪または金髪を持つかどうか、個人が白い肌または黒い肌を持つかどうか、個人が片目または両目を持つかどうか、読者に興味のないことである。
しかし、画像がより動的である、たとえば怒る、非常に幸せ、またはひどく落ち込んだなどの政治家を示す場合、一部の代替テキストは、文章のトーンを設定する際に有用であり、そうでなければ見逃されるかもしれない:
< p > < img src = "president.jpeg" alt = "The President is sad." >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p >
< p > < img src = "president.jpeg" alt = "The President is happy!" >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p >
Whether the individual was "sad" or "happy" makes a difference to how the rest of the paragraph is to be interpreted: is she likely saying that she is unhappy with the country being divided, or is she saying that the prospect of a divided country is good for her political career?解釈は、画像に基づいて変化する。
画像がキャプションを持つ場合、代替テキストを含むことはキャプションが何を参照するかについての混乱を非ビジュアルユーザーに残すことを避ける。
< p > Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</ p >
< figure >
< img src = "president.jpeg"
alt = "A high forehead, cheerful disposition, and dark hair round out the President's face." >
< figcaption > The President of Ruritania. Photo © 2014 PolitiPhoto. </ figcaption >
</ figure >
画像が装飾的であるが特にページ固有でない場合―たとえばサイト全体のデザインスキームの一部を形成する画像のような―画像は、文書のマークアップでなく、サイトのCSSで指定すべきである。
しかし、周囲のテキストで議論されないが、依然として一部の関連性を持つ装飾的な画像はimg
要素を使用して、ページに含めることが可能である。そのような画像は装飾的であるが、依然としてコンテンツの一部に由来する。この場合、alt
属性が存在しなければならないが、その値は空文字列でなければならない。
詩を暗唱するページで、Burning Manのイベント、または詩にインスパイアされた絵画の画像についてのブログ投稿でBlack Rock Cityの風景の写真のようなものを含むものが関連するにも関わらず、画像が純粋に装飾的である例。次の断片は、(最初の詩の行のみがこの断片に含まれる)後者の場合の例を示す:
< h1 > The Lady of Shalott</ h1 >
< p >< img src = "shalott.jpeg" alt = "" ></ p >
< p > On either side the river lie< br >
Long fields of barley and of rye,< br >
That clothe the wold and meet the sky;< br >
And through the field the road run by< br >
To many-tower'd Camelot;< br >
And up and down the people go,< br >
Gazing where the lilies blow< br >
Round an island there below,< br >
The island of Shalott.</ p >
画像が小さな画像ファイルに分割されている場合、再度完全な画像を形成するために共に表示され、画像の1つは、全体としての絵に適するだろう関連規則に従って設定されたalt
属性を持たなければならず、残りのすべての画像は、空のalt
属性を持たなければならない。
次の例において、XYZ社の会社のロゴを表す絵が2枚に分割されており、1枚目は文字"XYZ"を含み、2枚目は単語"Corp"をもつ。代替テキスト( "XYZ Corp")は、最初の画像ですべてである。
< h1 > < img src = "logo1.png" alt = "XYZ Corp" >< img src = "logo2.png" alt = "" > </ h1 >
次の例において、評価は、3つの塗りつぶされた星と、2つの中抜きの星として示される。代替テキストは"★★★☆☆"かもしれないが、代わりに著者は、より親切な形式"3 out of 5"の評価を与えるようにした。これは最初の画像の代替テキストであり、残りは空白の代替テキストを持つ。
< p > Rating: < meter max = 5 value = 3 > < img src = "1" alt = "3 out of 5"
>< img src = "1" alt = "" >< img src = "1" alt = "" >< img src = "0" alt = ""
>< img src = "0" alt = "" > </ meter ></ p >
一般にイメージマップは、リンク用の画像をスライスする代わりに使用されるべきである。
画像が確かにスライスされ、スライスされた画像のコンポーネントのいずれかがリンクの唯一のコンテンツである場合、リンクあたりの1つの画像は、リンクの目的を表すalt
属性で代替テキストを持たなければならない。
次の例において、ユーザーが冒険中の左側または右側を選ぶことができるように、異なる画像で左付属と右付属のそれぞれと、飛行スパゲッティモンスターエンブレムを表す絵である。
< h1 > The Church</ h1 >
< p > You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</ p >
< p >< a href = "?go=left" >< img src = "fsm-left.png" alt = "Left side. " ></ a
>< img src = "fsm-middle.png" alt = ""
>< a href = "?go=right" >< img src = "fsm-right.png" alt = "Right side." ></ a ></ p >
場合によっては、画像はコンテンツの重要な部分である。たとえば、これは、フォトギャラリーの一部であるページに当てはまるかもしれない。画像はその画像を含むページの全体の要点である。
コンテンツの重要な部分である画像の代替テキストを提供する方法は、画像の出所に依存する。
提供される詳細な代替テキストで可能な場合、たとえば、画像が雑誌のレビューでの一連のスクリーンショットや、漫画の一部、またはその写真に関するブログエントリーでの写真である場合、画像に対して適切に提供されるようなテキストがalt
属性のコンテンツとして指定されなければならない。
代替テキストを伴う、新しいOSについてのギャラリーでのスクリーンショット:
< figure >
< img src = "KDE%20Light%20desktop.png"
alt = "The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock." >
< figcaption > Screenshot of a KDE desktop.</ figcaption >
</ figure >
財務レポートのグラフ:
< img src = "sales.gif"
title = "Sales graph"
alt = "From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%" >
"sales graph"は、売上グラフに対する代替テキストとして不十分であることに注意する。良いキャプションとされるテキストは、一般に置換テキストとしては適さない。
ある場合において、画像の性質は、徹底した代替テキストを提供することが現実的ではないかもしれない。たとえば、画像は不鮮明であったり、複雑なフラクタルかもしれず、詳細な地形図であるかもしれない。
この場合、alt
属性は、適切な代替テキストが含まれなければならないが、それはやや短いかもしれない。
単に画像を正しく扱うことのできるテキストが存在しないのである。たとえば、ロールシャッハ・インクブロットテストを記述するための有用な言及はほとんどない。しかし、短い説明であっても、まだ何もないよりましである:
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
the center extending below the sides." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure >
以下は、代替テキストの非常に悪い用法であろうことに注意する:
<!-- This example is wrong. Do not copy it. -->
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A black outline
of the first of the ten cards in the Rorschach inkblot test." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure >
このような代替テキストのキャプションを含むことは、実用的でない。なぜなら、一度でもキャプションを読んだり聞いたことがあった場合、2回以上助けず、画像を持たないユーザーに対してキャプションを効果的に重複するためである。
完全な説明を覆す画像の別の例は、定義により、詳細で無限であるフラクタルである。
次の例は、マンデルブロ集合の画像の完全なビューの代替テキストを提供する1つの可能な方法を示す。
< img src = "ms1.jpeg" alt = "The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes." >
同様に、人の顔の写真は、たとえば伝記において、コンテンツにかなり関連し、コンテンツの鍵と考えることができるが、テキストを完全に代替するのは困難である:
< section class = "bio" >
< h1 > A Biography of Isaac Asimov</ h1 >
< p > Born < b > Isaak Yudovich Ozimov</ b > in 1920, Isaac was a prolific author.</ p >
< p >< img src = "headpics/asimov.jpeg" alt = "Isaac Asimov had dark hair, a tall forehead, and wore glasses.
Later in life, he wore long white sideburns." ></ p >
< p > Asimov was born in Russia, and moved to the US when he was three years old.</ p >
< p > ...</ p >
</ section >
そのような場合、そのようなテキストは、画像の存在を報告するブラウザー自体に冗長になるため、代替テキストで画像自体の存在への参照を含むことは不必要である(実際に推奨されない)。たとえば、代替テキストが"アイザック・アシモフの写真"であった場合、適合するユーザーエージェントはより有用な"(画像)アイザック・アシモフは黒い髪、長い額で、眼鏡をかけ..."よりもむしろ"(画像)アイザック・アシモフの写真"として読み上げるかもしれない。
In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g., a webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not themself know what the images represent (e.g. a blind photographer sharing an image on their blog).
そのような場合、alt
属性を省略してもよいが、次のいずれかの条件をさらに満たさなければならない:
title
属性が存在しかつ空でない値を持つ。
title
属性に依存することは、多くのユーザーエージェントがこの仕様で要求されるようなアクセス可能な方法で属性を公開しないため、現在推奨されない(たとえば、ツールチップを出現させるマウスなどのポインティングデバイスが必要になり、これはモダンな携帯端末やタブレットをもつ人のような、キーボードのみのユーザーとタッチのみのユーザーを締め出す)。
そのような場合は最小限に保たれるべきである。実際の代替テキストを提供する能力を有する著者のわずかな可能性がある場合、alt
属性の省略を許容しないだろう。
サイトがキャプション以外のメタデータを用いて画像を受信した場合、写真共有サイトの写真は、次のようにマークアップできる:
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > Bubbles traveled everywhere with us.</ figcaption >
</ figure >
しかし、画像の重要部分の詳細な説明が、ユーザーから取得してページに含まれる場合、これはより良いだろう。
ユーザーが撮影した写真での視覚障害者ユーザーのブログを示す。最初に、ユーザーはショーを撮った写真の任意のアイデアを持たないかもしれない:
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article >
しかし最終的に、ユーザーは友人による画像の説明を取得するかもしれず、その場合代替テキストを含めることができる:
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" alt = "The photograph shows my squirrel
feeder hanging from the edge of my roof. It is half full, but there
are no squirrels around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
with light blue streaks." >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article >
時として画像全体の要点は、テキストの説明が利用できず、ユーザーが説明を提供する。たとえば、CAPTCHA画像のポイントは、ユーザーが文字通りグラフィックを読むことができるかどうかを確認することにある。これはCAPTCHAをマークアップする一つの方法である(title
属性に注目する):
< p >< label > What does this image say?
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(If you cannot see the image, you can use an < a
href = "?audio" > audio</ a > test instead.)</ p >
もう一つの例は、画像を表示し、正しい代替テキストをもつページを書く目的に対して正確に代替テキストを求めるソフトウェアである。そのようなページは次のように、画像のテーブルを持つことができる:
< table >
< thead >
< tr > < th > Image < th > Description
< tbody >
< tr >
< td > < img src = "2421.png" title = "Image 640 by 100, filename 'banner.gif'" >
< td > < input name = "alt2421" >
< tr >
< td > < img src = "2422.png" title = "Image 200 by 480, filename 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table >
この例ですら、できる限り多くの有用な情報が依然としてtitle
属性に含まれることに注意する。
Since some users cannot use images at all (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice web browser, or simply because they are blind), the alt
attribute is only allowed to be omitted rather than being provided with replacement text when no alternative text is available and none can be made available, as in the above examples. 執筆者の一部による努力の欠如は、alt
属性を省略するための許容可能な理由でない。
一般に、著者は画像を表示する以外の目的でimg
要素を使用することは避けるべきである。
img
要素を画像を表示する以外の目的で使用する場合、たとえば、ページビューをカウントするサービスの一部として用いる場合、alt
属性は空文字列でなければならない。
このような場合、width
とheight
属性は、両方ともゼロに設定すべきである。
This section does not apply to documents that are publicly accessible, or whose target audience is not necessarily personally known to the author, such as documents on a web site, emails sent to public mailing lists, or software documentation.
When an image is included in a private communication (such as an HTML email) aimed at a specific person who is known to be able to view images, the alt
attribute may be omitted. However, even in such cases authors are strongly urged to include alternative text (as appropriate according to the kind of image involved, as described in the above entries), so that the email is still usable should the user use a mail client that does not support images, or should the document be forwarded on to other users whose abilities might not include easily seeing images.
Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible.
For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the alternative text.
For images that have captions, markup generators should use the figure
and figcaption
elements, or the title
attribute, to provide the image's caption.
As a last resort, implementers should either set the alt
attribute to the empty string, under the assumption that the image is a purely decorative image that doesn't add any information but is still specific to the surrounding content, or omit the alt
attribute altogether, under the assumption that the image is a key part of the content.
Markup generators may specify a generator-unable-to-provide-required-alt
attribute on img
elements for which they have been unable to obtain alternative text and for which they have therefore omitted the alt
attribute. The value of this attribute must be the empty string. Documents containing such attributes are not conforming, but conformance checkers will silently ignore this error.
This is intended to avoid markup generators from being pressured into replacing the error of omitting the alt
attribute with the even more egregious error of providing phony alternative text, because state-of-the-art automated conformance checkers cannot distinguish phony alternative text from correct alternative text.
Markup generators should generally avoid using the image's own filename as the alternative text. Similarly, markup generators should avoid generating alternative text from any content that will be equally available to presentation user agents (e.g., web browsers).
This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page.
A conformance checker must report the lack of an alt
attribute as an error unless one of the conditions listed below applies:
The img
element is in a figure
element that satisfies the conditions described above.
The img
element has a title
attribute with a value that is not the empty string (also as described above).
The conformance checker has been configured to assume that the document is an email or document intended for a specific person who is known to be able to view images.
The img
element has a (non-conforming) generator-unable-to-provide-required-alt
attribute whose value is the empty string. A conformance checker that is not reporting the lack of an alt
attribute as an error must also not report the presence of the empty generator-unable-to-provide-required-alt
attribute as an error. (This case does not represent a case where the document is conforming, only that the generator could not determine appropriate alternative text — validators are not required to show an error in this case, because such an error might encourage markup generators to include bogus alternative text purely in an attempt to silence validators. Naturally, conformance checkers may report the lack of an alt
attribute as an error even in the presence of the generator-unable-to-provide-required-alt
attribute; for example, there could be a user option to report all conformance errors even those that might be the more or less inevitable result of using a markup generator.)