ウェブ上のテキストは、はみ出さないよう画面の端で自動的に改行されます。画像の場合は違います画像には固有のサイズがあります。画像が画面よりも広いと、画像がはみ出して横方向のスクロールバーが表示されます。
幸いなことに、CSS で対策を講じてこのようなことが起こらないようにすることができます。
画像を制限する
スタイルシートで max-inline-size を使用すると、画像を含む要素よりも大きなサイズで画像をレンダリングしないよう宣言できます。
img {
max-inline-size: 100%;
block-size: auto;
}
動画や iframe などの他の埋め込みコンテンツにも、同じルールを適用できます。
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
このルールを適用すると、ブラウザは画面に合わせて画像を自動的に縮小します。
block-size の値に auto を追加すると、画像のアスペクト比が一定に保たれます。
コンテンツ マネジメント システムによって画像が追加された場合など、画像のサイズをお客様が制御できないことがあります。実際のサイズとは異なるアスペクト比の画像がデザイン上必要な場合は、CSS の aspect-ratio プロパティを使用します。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
ただし、指定どおりのアスペクト比に合わせて、ブラウザによって画像が押しつぶされたり引き伸ばされたりすることがあります。
これを防ぐには、object-fit プロパティを使用します。
object-fit の値を contain にすると、上下に空白が残る場合でも、画像のアスペクト比を保持するようブラウザに指示します。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
object-fit の値を cover に設定すると、画像の上下が切り取られる場合でも、画像のアスペクト比が保持されます。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
上下を均等に切り抜くのが問題な場合は、object-position CSS プロパティを使用して、切り抜きのフォーカスを調整します。
最も重要な画像コンテンツを表示したままにすることができます。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
画像を配信する
これらの CSS ルールは、画像のレンダリング方法をブラウザに指示します。ブラウザでの画像の処理方法についてヒントを HTML で指定することもできます。
サイズに関するヒント
画像のサイズがわかっている場合は、width 属性と height 属性を含める必要があります。画像が別のサイズでレンダリングされた場合でも（max-inline-size: 100% ルールにより）、ブラウザは幅と高さの比率を認識しているため、適切なスペースを確保できます。これにより、画像の読み込み時に他のコンテンツの動きが止まります。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
ヒントを読み込んでいます
loading 属性を使用して、画像の読み込みをビューポート内またはビューポート近くまで遅らせるかどうかをブラウザに指示します。スクロールしなければ見えない範囲の画像には、値 lazy を使用します。ユーザーが下までスクロールし、画像が表示されるまでに時間がかかるまで、ブラウザで遅延画像は読み込まれません。ユーザーがスクロールしなかった場合、画像は読み込まれません。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
スクロールせずに見える範囲にヒーロー画像を表示する場合は、loading を使用しないでください。サイトで loading="lazy" 属性が自動的に適用されている場合は、多くの場合、eager 属性（デフォルト）を設定して適用されないようにできます。
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
優先度を取得する
LCP 画像などの重要な画像の場合、fetchpriority 属性を high に設定することで、フェッチの優先度を使用して読み込みの優先順位をさらに高めることができます。
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
これにより、画像は通常取得されたとき、ブラウザでレイアウトが完了するまで待機するのではなく、画像を直ちに高い優先度で取得するようブラウザに指示します。
ただし、1 つのリソース（画像など）のダウンロードを優先するようブラウザに指示した場合、ブラウザは別のリソース（スクリプトやフォント ファイルなど）の優先度を下げる必要があります。fetchpriority="high" は、本当に重要な場合にのみ画像に設定します。
プリロードのヒント
JavaScript または CSS の背景画像として追加された画像は、最初の HTML で使用できないことがあります。また、プリロードを使用して、このような重要な画像を事前に取得できるようにすることもできます。非常に重要な画像については、この属性を fetchpriority 属性と組み合わせることができます。
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
これも、ブラウザの優先順位に関するヒューリスティックを過剰にオーバーライドしてパフォーマンスが低下するのを防ぐため、慎重に使用する必要があります。
imagesrcset 属性と imagesizes 属性を使用して、srcset（後述）に基づくレスポンシブ画像をプリロードする方法がより高度であり、一部のブラウザでサポートされていますが、すべてではありません。
href の代替を除外することで、これをサポートしていないブラウザで誤った画像がプリロードされないようにすることができます。
現時点では、ブラウザによるそれらの画像のサポートに基づくさまざまな画像形式に基づくプリロードはサポートされておらず、追加のダウンロードが発生する可能性があります。
理想は、可能な限りプリロードを回避し、最初の HTML で画像を用意して、コードの繰り返しを回避し、ブラウザがサポートするすべてのオプションにアクセスできるようにすることです。
画像のデコード
また、img 要素に追加できる decoding 属性もあります。画像を非同期でデコードできることをブラウザに伝えることができます。これにより、ブラウザは他のコンテンツの処理を優先できるようになります。
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
画像自体が最も重要なコンテンツ要素である場合は、sync 値を使用できます。
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
decoding 属性は、画像のデコード速度ではなく、ブラウザがこの画像のデコードを待機してから他のコンテンツをレンダリングするかどうかを変更するだけです。
ほとんどの場合、影響はほとんど生じませんが、状況によっては画像やコンテンツの表示が少し速くなることもあります。たとえば、レンダリングに時間がかかる要素が多く、デコードに時間がかかる大きな画像が含まれる大規模なドキュメントの場合、重要な画像で sync を設定すると、ブラウザは画像を待機して一度にレンダリングするように指示します。または、async を設定すると、画像のデコードを待たずにコンテンツをより速く表示できます。
ただし、通常は、過剰な DOM サイズを回避し、レスポンシブな画像を使用してデコード時間を短縮することをおすすめします。つまり、デコード属性がほとんど効果を持ちません。
srcset のレスポンシブ画像
max-inline-size: 100% の宣言により、イメージがコンテナの外に出ることはありません。しかし、収まるように縮小する大きな画像で問題はないように見えても、それでは不十分です。低帯域幅のネットワーク上で小画面のデバイスを使用すると、不必要に大きい画像がダウンロードされてしまいます。
同じ画像についてサイズが異なる複数のバージョンを作成した場合は、srcset 属性を使用してブラウザにそれらのバージョンを認識させることができます。
幅記述子
カンマ区切りの値のリストを渡すことができます。各値には、画像の URL を指定し、その後にスペースと画像に関するメタデータを指定します。このメタデータは記述子と呼ばれます。
この例では、メタデータに w 単位を使用して各画像の幅を記述しています。1 つの w が 1 ピクセル。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
srcset 属性は src 属性を置換するものではありません。代わりに、srcset 属性は src 属性を補完します。有効な src 属性は引き続き必要ですが、ブラウザはその値を srcset 属性に記載されたオプションのいずれかに置き換えることができます。
必要でない限り、大きな画像はブラウザによってダウンロードされません。帯域幅を節約できます。
サイズ
幅記述子を使用している場合は、sizes 属性も使用して、ブラウザにより多くの情報を伝える必要があります。これは、さまざまな条件下で画像が表示されると予想されるサイズをブラウザに伝えます。これらの条件は、メディアクエリで指定します。
sizes 属性は、メディアクエリと画像の幅のカンマ区切りのリストを受け取ります。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
この例では、ビューポートの幅 66em を超えて、画面の 3 分の 1 以内（たとえば 3 列レイアウト内）に画像を表示するようブラウザに指示します。
ビューポートの幅が 44em～66em の場合、画像が画面の半分の幅で表示されます（2 列レイアウト）。
44em より下の場合は、画面の横幅いっぱいで画像を表示します。
つまり、最も大きな画像が必ずしも最も広い画面で使用されるとは限りません。複数列のレイアウトを表示できる幅の広いブラウザ ウィンドウでは、1 列に収まる画像が使用されます。この画像は、狭い画面で単一列のレイアウトに使用される画像よりも小さい場合があります。
ピクセル密度記述子
また、同じ画像の複数のバージョンを提供したい場合もあります。
一部のデバイスは高密度ディスプレイを搭載しています。倍密度ディスプレイでは、2 ピクセル分の情報を 1 ピクセルのスペースにパッキングできます。これにより、このようなディスプレイで画像を鮮明に表示できます。
密度記述子を使用して、画像のピクセル密度を src 属性の画像との関係で記述します。密度記述子は、数字の後に文字 x（1x、2x など）が続きます。
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
small-image.png のサイズが 300 x 200 ピクセルで、medium-image.png のサイズが 600 x 400 ピクセルの場合、srcset リストの medium-image.png の後に 2x を指定できます。
整数を使用する必要はありません。画像の別のバージョンが 450x300 ピクセルの場合は、1.5x で記述できます。
プレゼンテーション画像
HTML の画像はコンテンツです。そのため、スクリーン リーダーや検索エンジン向けに、常に alt 属性に画像の説明を指定します。
意味のあるコンテンツがなく、純粋に視覚的に魅力ある画像を埋め込む場合は、空の alt 属性を使用します。
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
その場合でも alt 属性を含める必要があります。alt 属性の欠落は、空の alt 属性とは異なります。空の alt 属性は、この画像がプレゼンテーション用であることをスクリーン リーダーに伝えます。
理想的なのは、プレゼンテーション用画像や装飾用画像を HTML に含めないのが理想的です。HTML は構造化するためのものです。CSS はプレゼンテーション用です。
背景画像
CSS で background-image プロパティを使用して、プレゼンテーション画像を読み込みます。
element {
background-image: url(flourish.png);
}
background-image の image-set 関数を使用して、複数の画像候補を指定できます。
CSS の image-set 関数は、HTML の srcset 属性と同様に機能します。画像のリストと、各画像のピクセル密度記述子を提供します。
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
ブラウザにより、デバイスのピクセル密度に最適な画像が選択されます。
サイトに画像を追加する際には、次のようなさまざまな要素を考慮してください。
画像ごとに適切なスペースを確保する。必要なサイズの数を検討します。 画像がコンテンツか装飾的かを決定する。
適切な画像を作り出すために時間をかける価値はある。不適切な画像戦略は、ユーザーの不満や煩わしさの原因になります。優れた画像戦略を立てることで、ユーザーのデバイスやネットワーク接続に関係なく、サイトに軽快でシャープな印象を与えることができます。
ツールキットには、画像をより詳細に制御できるようにするためのもう 1 つの HTML 要素、picture 要素があります。
理解度チェック
画像に関する知識をテストする
画像がビューポートに収まるようにするには、スタイルを追加する必要があります。
画像の高さと幅を不自然なアスペクト比にした場合、その比率に画像を合わせるのに役立つスタイルはどれですか。
object-fitcontain や cover などのキーワードに画像がどのように適合するかを指定します。image-fitfit-imageaspect-ratio画像に height と width を設定すると、CSS で異なるスタイルを設定できなくなります。
srcset 属性は src 属性を _______ ではなく、_______ である。
srcset が src 属性は置き換えられることはありません。イメージで alt がないことは、空の alt と同じです。
alt 属性により、この画像がプレゼンテーション用であることをスクリーン リーダーに伝えるalt が指定されていない場合、スクリーン リーダーには何も通知されません。