画像

ボタンの背景グラデーションや、コンテンツのセクションまたはページ全体の背景画像などの装飾画像は、プレゼンテーション用であり、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 画像を含めることもできますが、.svg 拡張子を持つ SVG 画像（または data-uri）は <img> 要素を使用して埋め込むことができます。

各フォアグラウンド画像には、少なくとも src 属性と alt 属性を含める必要があります。

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

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

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

画像が SVG ファイル形式の場合は、VoiceOver のバグにより必要な role="img" も含めます。

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

効果的な alt 画像の説明文を作成する

alt 属性は、短く簡潔にすることを目的としています。画像が伝える関連情報をすべて提供し、ドキュメント内の他のコンテンツと重複する情報や、役に立たない情報は省略します。テキストを作成する際は、サイトのトーンを反映する必要があります。

効果的な代替テキストを作成するには、ページ全体を目の不自由な人に読み聞かせていると想像してください。セマンティック <img> 要素を使用すると、スクリーン リーダーのユーザーとボットに、その要素が画像であることが通知されます。alt に「これは～の画像/スクリーンショット/写真です」を含めるのは冗長です。ユーザーは画像があることを知る必要はありませんが、画像が伝える情報を知る必要があります。

通常、「これは赤い帽子をかぶった犬の粗い画像です」とは言いません。むしろ、ドキュメントの残りの部分のコンテキストに関連して、画像が伝えている内容を伝えます。伝わる内容は、周囲のテキストのコンテキストとコンテンツによって異なります。

たとえば、犬の写真は、コンテキストに応じてさまざまな方法で説明されます。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 です。ベスト プラクティスとアンチパターンを示すために 2 つの Fluffy アイコンが使用されている場合、緑色のベレー帽をかぶった笑顔の犬には alt="good" が設定され、赤いベレー帽をかぶった犬には alt="bad" が設定されている可能性があります。ただし、標準のアイコンのみを使用してください。良い Fluffy や悪い Fluffy などの標準以外のアイコンを使用する場合は、凡例を含めて、アイコンが UI 要素の意味を解読する唯一の方法にならないようにしてください。

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

ユーザーがすでに知っている情報や、コンテンツで別途説明されている情報は、コンテキストから除外します。たとえば、ブラウザの設定変更に関するチュートリアル ページで、ブラウザのクロームにあるアイコンをクリックする手順を説明している場合、スクリーン キャプチャのページの URL は重要ではありません。alt は、設定の変更方法という現在のトピックに限定します。

alt は「設定アイコンは検索フィールドの下のナビゲーション バーにあります。」になる可能性があります。「スクリーンショット」や「machinelearningworkshop」は含めないでください。ユーザーはスクリーンショットであることを知る必要がなく、テクニカル ライターが手順を記述したときにどこを閲覧していたかを知る必要もありません。画像の説明は、そもそも画像が追加された理由のコンテキストに基づいています。

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

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

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

MachineLearningWorkshop.com には 7 つのフォアグラウンド画像があるため、alt 属性を持つ画像は 7 つあります。イースター エッグのライトスイッチ、マニュアル アイコン、Hal と Eve の伝記写真 2 枚、ブレンダー、掃除機、トースターのアバター 3 つです。雑誌のように見える前景画像のみが純粋に装飾的なものです。このページには 2 つの背景画像もあります。これらの画像は装飾用で、CSS で追加されているため、アクセスできません。

この雑誌は純粋に装飾的なものであるため、alt 属性は空で、画像は純粋にプレゼンテーション用の SVG であるため、role は none です。意味のある 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 を使用したレスポンシブ画像と説明的な構文に関する Learn セクションは一読の価値があります。

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

<picture>、<source>

複数のリソースを提供し、ブラウザが最適なアセットをレンダリングできるようにするもう 1 つの方法は、<picture> 要素を使用することです。<picture> 要素は、無制限の数の <source> 要素と 1 つの必須の <img> 要素にリストされている複数の画像オプションのコンテナ要素です。

<source> 属性には、srcset、sizes、media、width、height が含まれます。srcset 属性は img、source、link に共通ですが、一般的にソースでは実装が若干異なります。これは、メディアクエリを <srcset> の media 属性に記述できるためです。<source> は、type 属性で定義された画像形式もサポートしています。

ブラウザは各子 <source> 要素を考慮し、その中から最適なものを選択します。一致するものが見つからない場合、<img> 要素の src 属性の URL が選択されます。アクセス可能な名前は、ネストされた <img> の alt 属性から取得されます。<picture> 要素と規範構文について説明している「学習」セクションもご覧ください。

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

サイトのパフォーマンスを向上させるための画像機能は他にも多数あります。

遅延読み込み

loading 属性は、JS 対応ブラウザに画像の読み込み方法を指示します。デフォルトの eager 値は、画像がビューポートの表示範囲外にある場合でも、HTML の解析と同時に画像がすぐに読み込まれることを意味します。loading="lazy" を設定すると、画像がビューポートに表示される可能性が高くなるまで、画像の読み込みが遅延されます。「Likely」は、画像がビューポートからどのくらい離れているかに基づいてブラウザによって定義されます。これは、ユーザーがスクロールすると更新されます。遅延読み込みは、帯域幅と 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> をリンク内にネストします。

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

理解度を確認する

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