画像

装飾的な画像（ボタンの背景のグラデーション、コンテンツの一部またはページ全体に表示される背景画像など）はプレゼンテーション用のため、CSS で適用する必要があります。画像によってドキュメントにコンテキストが追加される場合、それはコンテンツであり、HTML を使用して埋め込む必要があります。

画像を含める主な方法は、src 属性で画像リソースを参照し、alt 属性で画像を記述する <img> タグです。

<img src="images/eve.png" alt="Eve">

<img> の srcset 属性と <picture> 要素のどちらも、関連するメディアクエリに複数の画像ソースを含め、それぞれに代替画像ソースを指定する方法を提供し、デバイスの解像度、ブラウザの機能、ビューポートのサイズに基づいて最適な画像ファイルを提供できます。srcset 属性を使用すると、解像度とブラウザのビューポート サイズと sizes 属性に基づいて複数の画像バージョンを指定できます。

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

これは、<picture> 要素と <source> 子を使用して行うこともできます。この要素は、<img> をデフォルトのソースとして使用します。

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

これらの組み込み HTML レスポンシブ画像のメソッドに加えて、HTML ではさまざまな属性を使用して画像レンダリング パフォーマンスを改善できます。<img> タグ（つまり、画像送信ボタン <input type="image">）には、height 属性と width 属性を含めることで、コンテンツのレイアウト シフトを減らすために画像のアスペクト比を設定できます。lazy 属性を使用すると、遅延読み込みが可能になります。

HTML では、<svg> を直接使用して SVG 画像を含めることもできますが、<img> 要素を使用して（または data-uri として）SVG 画像を埋め込むことができます。.svg

少なくとも、各前景画像には src 属性と alt 属性を含める必要があります。

src ファイルは、埋め込み画像のパスとファイル名です。src 属性は、画像の URL を指定するために使用します。その後、ブラウザはアセットを取得してページにレンダリングします。この属性は <img> では必須です。この属性が指定されていない場合は、レンダリングされるものはありません。

alt 属性は画像の代替テキストを提供し、画面を見ることができない人（検索エンジンや支援技術、さらには Alexa、Siri、Google アシスタントなど）に画像の説明を提供します。画像が読み込まれない場合、ブラウザによって表示されることがあります。ネットワークが低速なユーザーや帯域幅が制限されているユーザーだけでなく、多くのユーザーがメールアプリケーションで画像をブロックしているため、alt テキストは HTML メールで非常に便利です。

<img src="path/filename" alt="descriptive text" />

画像のファイル形式が SVG である場合、role="img" も指定します。これは、VoiceOver のbugsにより必要となるものです。

<img src="switch.svg" alt="light switch" role="img" />

効果的な alt 画像の説明を書く

alt 属性は短く簡潔にし、画像から伝わる関連情報をすべて提供し、ドキュメント内の他のコンテンツと重複した情報や、有用でない情報は除外します。文章ではサイトのトーンを反映したものにします

効果的な代替テキストを書くために、見えない人にページ全体を読んでもらう場合を想像してください。セマンティック <img> 要素を使用すると、スクリーン リーダーのユーザーと bot に要素が画像であることを通知されます。alt に「This is an image/screenshot/photo of」というテキストを含める必要はありません。ユーザーは画像があることを知る必要はありませんが、画像がどのような情報を伝えるのかを知っておく必要があります。

通常は、「これは赤い帽子をかぶっている犬の粒子の粗い画像」とは言わないでしょう。画像の内容を伝えるのは、ドキュメントの他の部分のコンテキストです。伝える内容は、周囲のテキストの内容やコンテキストに応じて変化します。

たとえば、犬の写真は、文脈に応じてさまざまな方法で表現されます。「Yuckymeat」ドッグフードのレビューの横にあるアバターが Fluffy の場合は、alt="Fluffy" で十分です。

その写真が動物保護施設のウェブサイトにある Fluffy の養子縁組ページの一部である場合、ターゲット ユーザーは犬の親候補です。このテキストでは、画像で伝えられる情報について、導入ユーザーに関連し、周囲のテキストと重複しない形で説明する必要があります。alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" などの長い説明は適切です。養子縁組ページのテキストには通常、引き取られるペットの種、品種、年齢、性別が含まれるため、代替テキストでこれを繰り返す必要はありません。しかし、犬が書いた経歴には、おそらく髪の長さ、色、おもちゃの好みは含まれていないでしょう。なお、画像の説明は行っていません。犬の飼い主は、犬が屋内にいるか屋外にいるかや、赤い首輪と青いリードが付いているかを知る必要はありません。

アイコンに画像を使用する場合は、alt 属性がユーザー補助機能用の名前を提供するため、画像の説明ではなくアイコンの意味を伝えます。たとえば、虫メガネアイコンの alt 属性は search です。家のようなアイコンには、代替テキストとして home があります。5 インチ フロッピー ディスクのアイコンの説明は save です。ベスト プラクティスとアンチパターンを示すために Fluffy のアイコンが 2 つ使用されている場合、緑色のベレー帽をかぶった笑顔の犬には alt="good" を設定し、赤いベレー帽をかぶった犬の鳴き声には alt="bad" というようにします。ただし、標準のアイコン画像のみを使用してください。また、良い Fluffy や悪い Fluffy などの標準以外のアイコンを使用する場合は、凡例を含めて、アイコンが UI 要素の意味を解読する唯一の方法ではないことを確認してください。

画像がスクリーンショットやグラフの場合は、外観を説明するのではなく、画像から学習した内容を記述します。百聞は一見にしかずという言葉もありますが、説明では学んだすべてのことを簡潔に伝えなければなりません。

ユーザーがすでに知っている情報をコンテキストから省略し、それ以外の情報がコンテンツ内で通知されている。たとえば、ブラウザ設定の変更に関するチュートリアル ページを表示していて、それがブラウザの Chrome のアイコンのクリックに関するページである場合、スクリーン キャプチャのページの URL は重要ではありません。alt は、現在のトピック（設定を変更する方法）に限定します。alt は、「設定のアイコンは、検索フィールドの下のナビゲーション バーにあります」のようになります。「スクリーンショット」や「machinelearningworkshop」は含めないでください。ユーザーは、それがスクリーンショットであることを知る必要はなく、テクニカル ライターが指示を書いたときにブラウジングしていた場所を知る必要もありません。画像の説明は、そもそもその画像が含まれている理由に基づいています。

スクリーン キャプチャで chrome://version/ に移動してブラウザのバージョン番号を確認する方法が示されている場合は、ページ コンテンツに指示として URL を追加し、Alt 属性として空の文字列を指定します。この画像は、周囲のテキストにない情報を表示しないためです。

画像に追加情報がない場合や、単に装飾的な画像であっても、この属性は空の文字列として引き続き存在する必要があります。

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com には 7 つの前景画像があるため、7 つの画像に alt 属性（イースター エッグの照明のスイッチ、手動アイコン、Hal と Eve の伝記写真 2 枚、ミキサーのアバター、掃除機、トースターの 3 枚）があります。雑誌のように見える前景画像は、純粋に装飾的なものだけです。このページには背景画像も 2 つあります。背景画像も装飾的であり、CSS で追加されるためアクセスできません。

雑誌は純粋に装飾的なものなので、alt 属性が空で、role が none です（画像が純粋な SVG であるため）。意味がある場合は、SVG 画像に role="img" を含める必要があります。

<img src="svg/magazine.svg" alt="" role="none" />

ページの下部に 3 件のレビューと、それぞれポスターの画像が表示されます。通常、alt というテキストは、写っている人物の名前です。

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

これはジョークページであるため、ロービジョン ユーザーがユーモアを見逃さないように、まずは見えない情報を伝える必要があります。キャラクターの名前の代わりに、元のマシン関数を alt として使用します。

<img src="images/blender.svg" alt="blender" role="img" />

講師の写真はアバターだけではありません。伝記画像であるため、詳細な説明が表示されます。

これが実際のサイトである場合は、入学希望の生徒が教室に入ったときに教師を認識できるように、教師の見た目について最小限の説明のみを記載します。

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

これはジョークサイトであるため、代わりにジョークのコンテキストに関連する情報を提供してください。

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

友人に携帯電話でページを読んでいたら、赤い点がどう見えるかは気にしないでしょう。この場合、映画参照の履歴が重要になります。

説明テキストを記述する際は、画像からどのような情報が伝わるのか、ユーザーにとって重要で関連性のある情報は何かを考えます。画像の alt 属性の内容はコンテキストによって異なります。画像で伝えられ、目の見えるユーザーがアクセスでき、コンテキストに関連するすべての情報が、伝達する必要がある情報です。短く、正確で、役立つものにします。

src 属性と alt 属性は、埋め込み画像の最小要件です。他にも説明しなければならない属性がいくつかあります。

レスポンシブ画像

ビューポートのサイズが無数にあります。画面解像度もさまざまです。大画面モニターに十分な幅の画像を提供することでモバイル ユーザーの帯域幅を浪費するのは避けるべきですが、通常の画面解像度の 4 倍の小型デバイスには、高解像度の画像を提供する必要があります。ビューポートのサイズと画面の解像度に応じて異なる画像を表示する方法はいくつかあります。

<img> srcset 属性

srcset 属性を使用すると、ビューポートのサイズや画面解像度などの複数のメディアクエリに基づいて、ブラウザがリクエストする画像を選択し、複数の画像ファイルを提案できます。

<img> 要素ごとに 1 つの srcset 属性を指定できますが、その srcset を複数の画像にリンクできます。srcset 属性には、カンマ区切り値のリストを指定できます。各値は、アセットの URL の後にスペースと、そのイメージ オプションの記述子を続けます。幅記述子を使用する場合、最後以外の各 srcset オプションにメディアクエリまたはソースサイズとともに sizes 属性を含める必要があります。srcset を使用したレスポンシブ画像と説明構文について説明している学習セクションもぜひお読みください。

一致するものがある場合、srcset の画像が src の画像よりも優先されます。

<picture>、<source>

<picture> 要素を使用すると、複数のリソースを指定して、ブラウザで最適なアセットをレンダリングできます。<picture> 要素は、複数の画像オプションを格納するコンテナ要素で、個数無制限の <source> 要素と 1 つの必須の <img> 要素に指定します。

<source> 属性には、srcset、sizes、media、width、height があります。srcset 属性は、img、source、link と共通ですが、メディアクエリは <srcset> のメディア属性にリストできるため、通常はソースで若干異なる方法で実装されます。<source> は、type 属性で定義された画像形式もサポートします。

ブラウザは、それぞれの子 <source> 要素を考慮して、その中から最適なものを選択します。一致するものが見つからない場合は、<img> 要素の src 属性の URL が選択されます。アクセス可能な名前は、ネストされた <img> の alt 属性から取得されます。<picture> 要素と規範的な構文を扱う学習セクションも一読価値があります。

その他のパフォーマンス機能

遅延読み込み

loading 属性は、JS 対応ブラウザに対して画像の読み込み方法を指示します。デフォルトの eager 値は、画像が視認可能なビューポートの外にあっても、HTML が解析されるとすぐに読み込まれます。loading="lazy" を設定すると、ビューポートに表示されるまで画像の読み込みが延期されます。「可能性が高い」は、画像とビューポートの距離に基づいてブラウザによって定義されます。これはユーザーがスクロールすると更新されます。遅延読み込みを使用すると、帯域幅と CPU を節約でき、ほとんどのユーザーにとってパフォーマンスが向上します。JavaScript が無効になっている場合、セキュリティ上の理由により、すべての画像はデフォルトで eager に設定されます。

<img src="switch.svg" alt="light switch" loading="lazy" />

アスペクト比

ブラウザは、HTML を受信するとレンダリングを開始し、アクセスするとアセットをリクエストします。これは、ブラウザが <img> タグを検出してリクエストを行った時点で、すでに HTML をレンダリングしていることを意味します。また、画像の読み込みに時間がかかることがあります。 デフォルトでは、ブラウザで alt テキストのレンダリングに必要なサイズ以外の画像用のスペースは予約されません。

<img> 要素では、これまでも単位なしの height 属性と width 属性がサポートされていました。これらのプロパティは廃止され、CSS に置き換えられました。CSS では画像のサイズを定義できますが、多くの場合、アスペクト比が維持されるよう max-width: 100%; などの単一のディメンションが設定されます。通常、CSS は <head> に含まれているため、<img> が検出される前に解析されます。ただし、height またはアスペクト比を明示的に指定しない場合、予約されたスペースは alt テキストの高さ（または幅）になります。ほとんどのデベロッパーは幅しか宣言しないため、画像を受け取ってレンダリングすると累積的なレイアウト シフトが発生し、ウェブに関する指標に悪影響を及ぼします。この問題を解決するには、各ブラウザで画像のアスペクト比がサポートされています。<img> に height 属性と width 属性を含めると、サイズのヒントとして機能し、ブラウザにアスペクト比を通知できます。これにより、最終的な画像レンダリング用に適切な容量を予約できます。画像に高さと幅の値を含めることで、ブラウザはその画像のアスペクト比を認識します。ブラウザで 50% の例のように単一のディメンションが検出されると、画像用のスペースは CSS のサイズに合わせられ、もう一方のディメンションでは幅と高さのアスペクト比が維持されます。

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

CSS が正しく設定されていると、画像はレスポンシブのままになります。はい。含まれる単位なしの height と width の値は、CSS でオーバーライドされます。これらの属性を含める目的は、適切なアスペクト比でスペースを確保し、レイアウト シフトを減らしてパフォーマンスを改善することです。ページの読み込みにかかる時間は従来とほぼ同じですが、画像が画面にペイントされたときに UI がジャンプすることはありません。

画像のその他の機能

<img> 要素は、crossorigin、decoding、referrerpolicy、および Blink ベースのブラウザでは fetchpriority 属性もサポートしています。めったに使用されませんが、画像がサーバー側の地図の一部である場合は、ismap ブール値属性を含め、ポインティング デバイスを持たないユーザーのためにリンク内に <img> をネストします。

フォームの送信時にクリックの場所の x 座標と y 座標が送信され、値が入力名（存在する場合）に追加されるため、<input type="image" name="imageSubmitName"> では ismap 属性は必要ではなく、サポートされてもいません。たとえば、ユーザーが画像をクリックして送信すると、&imageSubmitName.x=169&imageSubmitName.y=66 のようなものがフォームとともに送信されます。画像に name 属性がない場合、x と y は &x=169&y=66 に送信されます。

理解度をチェックする

画像に関する知識をテストする。