ウェブ上のテキストは、画面の端で自動的に折り返され、オーバーフローしません。一方、画像には固有のサイズがあります。画像が画面よりも幅が広い場合、画像はオーバーフローし、ユーザーは横方向にスクロールして画像全体を表示する必要があります。
幸い、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 つの列に収まる画像が使用されます。この画像は、狭い画面の 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 ピクセルの場合、medium-image.png
の後に 2x
を追加して srcset
リストに登録できます。
整数値を使用する必要はありません。別のバージョンの画像のサイズが 450×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
);
}
ブラウザは、デバイスのピクセル密度に最も適した画像を選択します。
サイトに画像を追加する際には、次のような多くの要素を考慮する必要があります。
- 各画像に適切なスペースを予約する。
- 必要なサイズを把握する。
- 画像がコンテンツか装飾的なものかを判断する。
画像を適切に設定するために時間をかける価値はあります。画像戦略が不適切だと、ユーザーの不満やイライラにつながる可能性があります。優れた画像戦略を策定すると、ユーザーのデバイスやネットワーク接続に関係なく、サイトがスムーズでシャープな印象を与えることができます。
画像をより細かく制御できる HTML 要素がツールキットにもう 1 つあります。それは picture
要素です。
理解度を確認する
画像に関する知識をテストする。
画像をビューポート内に収めるには、スタイルを追加する必要があります。
画像の高さと幅が不自然なアスペクト比に強制的に設定されている場合、画像をこれらの比率に収まるように調整するには、どのスタイルを使用すればよいですか。
object-fit
contain
、cover
など)にどのように適合するかを指定します。image-fit
fit-image
aspect-ratio
画像に height
と width
を適用すると、CSS で画像のスタイルを変更できなくなります。
srcset
属性は src
属性を _______ ではなく、_______ します。
srcset
は src
属性に代わるものではありません。画像に alt
がない場合、空の alt
と同じです。
alt
属性は、この画像がプレゼンテーション用であることをスクリーン リーダーに伝えます。alt
がない場合、スクリーン リーダーには何も通知されません。