ウェブ上のテキストは自動的に画面の端で折り返されるため、はみ出さないようにします。一方、画像には固有のサイズがあります。画像が画面よりも幅が広い場合、画像ははみ出し、全体を見るには横方向にスクロールする必要があります。
幸いなことに、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 を追加すると、ブラウザは画像のサイズ変更時に画像のアスペクト比を維持します。
画像のサイズは、コンテンツ マネジメント システム（CMS）やその他のコンテンツ配信システムによって設定されることがあります。デザインで CMS のデフォルトとは異なるアスペクト比を呼び出す場合は、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 プロパティを使用します。これにより切り抜きのフォーカスが調整されるため、画像の最も重要な部分が引き続き表示されます。
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
object-position を設定すると、画像の片側のみを切り抜くことができます。画像の配信
これらの CSS ルールは、画像のレンダリング方法をブラウザに指示します。また、ブラウザによる画像の処理方法に関するヒントを HTML 内に指定することもできます。
サイズ設定のヒント
画像のサイズがわかっている場合は、必ず width 属性と height 属性を含めます。max-inline-size ルールによって画像が別のサイズでレンダリングされた場合でも、ブラウザは幅と高さの比率を認識し、適切な量のスペースを確保できます。これにより、画像の読み込み時に他のコンテンツがジャンプするのを防ぐことができます。
<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" 属性を自動的に適用している場合は、通常、loading をデフォルト値の 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" を設定するのは、本当に重要な場合のみにしてください。
プリロードのヒント
最初の HTML ファイルにすべての画像を含めることで、可能な限りプリロードを避けることをおすすめします。ただし、JavaScript によって追加された画像や CSS の背景画像など、一部の画像は使用できない場合があります。
プリロードを使用すると、重要な画像を事前にブラウザに取得させることができます。非常に重要な画像の場合、このプリロードを fetchpriority 属性と組み合わせることができます。
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
ここでも、ブラウザの優先順位付けヒューリスティックを頻繁にオーバーライドしないように、この属性は慎重に使用してください。過度に使用すると、パフォーマンスが低下する可能性があります。
一部のブラウザでは、imagesrcset 属性と imagesizes 属性を使用して、srcset に基づいてレスポンシブ画像のプリロードを行うことができます。次に例を示します。
<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
href フォールバックを除外することで、srcset をサポートしていないブラウザでも正しい画像をプリロードできるようになります。
ブラウザによる特定の形式のサポートに基づいて、異なる形式の画像をプリロードすることはできません。これを行おうとすると、余分なダウンロードが発生し、ユーザーのデータを浪費する可能性があります。
画像のデコード
また、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 を設定すると、画像のデコードを待たずにブラウザでコンテンツをすばやく表示できます。
ただし、通常は decoding を使用する代わりに、過剰な DOM サイズを回避し、レスポンシブ画像を使用してデコード時間を短縮することをおすすめします。
srcset を使用したレスポンシブ画像
この max-inline-size: 100% 宣言により、イメージをコンテナの外に出すことができなくなります。ただし、ユーザーが小さな画面と低帯域幅のネットワークを使用している場合、大きな画面のユーザーと同じサイズの画像をダウンロードすると、データが無駄になります。
この問題を解決するには、同じ画像についてサイズが異なる複数のバージョンを追加し、srcset 属性を使用して、サイズが存在することと、それらのサイズを使用するタイミングをブラウザに伝えます。
幅記述子
値のカンマ区切りのリストを使用して 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 属性を置換する代わりに補完します。有効な 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 列に収まる画像が使用されます。この画像は、狭い画面の単一列レイアウトで使用される画像よりも小さくなる場合があります。
ピクセル密度記述子
また、記述子を使用して高密度ディスプレイに表示する画像の代替バージョンを提供し、高解像度でも鮮明な画像を維持することもできます。
密度記述子を使用して、src 属性の画像のピクセル密度と画像との関係を表現します。密度記述子は、1x や 2x のように、数字の後に文字 x が続く形式です。
<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 を指定できます。
整数を使う必要はありません。画像の別のバージョンが 450 x 300 ピクセルの場合は、1.5x で記述できます。
プレゼンテーション画像
HTML の画像はコンテンツです。そのため、スクリーン リーダーや検索エンジン向けに画像の説明を alt 属性に含めています。
意味のあるコンテンツのない装飾的な画像を埋め込む場合は、空の alt 属性を使用できます。
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
alt 属性は、空の場合でも必ず指定する必要があります。空の alt 属性は、画像がプレゼンテーションであることをスクリーン リーダーに伝えます。alt 属性が指定されていないと、その情報は提供されません。
HTML ではなく CSS で、プレゼンテーション用の画像や装飾的な画像を含めるのが理想的です。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 を指定しても、スクリーン リーダーには何も通知されません。