ウェブ上のテキストは自動的に画面の端で折り返されるため、はみ出さないようにします。一方、画像には固有のサイズがあります。画像が画面よりも幅が広い場合、画像ははみ出し、全体を見るには横方向にスクロールする必要があります。
幸いなことに、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;
}
画像の配信
これらの 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-fit
contain
や cover
などのキーワードを使用して、画像の位置を指定します。image-fit
fit-image
aspect-ratio
画像に height
と width
を設定すると、CSS で異なるスタイルを設定できなくなります。
srcset
属性は src
属性を _______ するのではなく、_______します。
srcset
は明らかに src
属性を置き換えるものではありません。画像で alt
がないことは、空の alt
と同じです。
alt
属性が空の場合、この画像がプレゼンテーション用であることをスクリーン リーダーに伝えます。alt
を指定しても、スクリーン リーダーには何も通知されません。