画像

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

画像を含める主な方法は、src を含む <img> タグを使用すること 属性（画像リソースを参照する）と、画像を説明する alt 属性があります。

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

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

<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 である場合は、role="img" も含めてください。 は、VoiceOver バグのため必要となっています。

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

効果的な alt 画像の説明を記述しています

alt 属性は短く簡潔なものにすることを目指し、画像から伝わるすべての関連情報を省略して提供します。 ドキュメント内の他のコンテンツと重複する情報、または有用でない情報。文章を書く際には、トーンは サイトの雰囲気を反映させます

効果的な代替テキストを記述するには、そのページを見ていない人にページ全体を読んでいると想像してみてください。方法 セマンティック <img> 要素により、スクリーン リーダーのユーザーと bot に通知が送信されます。 要素が画像であることを示します。「これは以下の画像/スクリーンショット/写真です」と記載するのは冗長です。alt にあります。ユーザーが 画像があることを知っておく必要がありますが、画像が伝える情報を知る必要もあります。

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

たとえば、犬の写真は、文脈に応じて異なる方法で表現されます。ふわふわの顔が Yuckymeat ドッグフードのレビューは 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 の 2 種類があります。凡例を含め、アイコンが UI 要素の意味を解読するための唯一の方法ではないことを確認します。

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

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

chrome://version/ に移動してブラウザのバージョン番号を調べる方法をスクリーン キャプチャに示した場合は、その URL を 指示としてページのコンテンツを指定し、alt 属性として空の文字列を指定している（画像では情報が提供されていないため） 最初の単語は前後のテキストに含まれません。

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

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

MachineLearningWorkshop.com には前景画像が 7 つあるため、alt 属性を含む 7 つの画像があります。「イースター エッグのライトのスイッチ」 手動アイコン、ハルとイブの経歴写真 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 が含まれ、その後にスペースが続きます。 作成します。幅記述子を使用する場合は、メディアとともに sizes 属性も含める必要があります。 最後のオプション以外の srcset オプションごとのクエリまたはソースサイズ。srcset を使用したレスポンシブ画像と説明的な構文に関するセクションをご確認ください。

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

<picture>、<source>

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

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

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

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

遅延読み込み

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

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

アスペクト比

ブラウザは、HTML を受信するとレンダリングを開始し、検出時にアセットをリクエストします。つまり、ブラウザは すでに HTML をレンダリングしていることがわかります。<img> タグが検出され、リクエストが行われると、また、画像の読み込みに時間がかかることがあります。 デフォルトでは、ブラウザは 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> をネストし、デバイスを指定しないユーザー向けに設定します。

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

理解度をチェックする

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