レスポンシブ画像の基本｜srcset・sizes・pictureの違い

CSSで縮小しても画像の通信量は減らない

PC向けの大きな写真を、スマホでは小さな幅で表示する。見た目が収まっていても、同じ大きな画像ファイルを読み込んでいる場合があります。画面に置くサイズと、通信で受け取るファイルを分けて考える必要があるんですね。

srcsetとsizesでサイズ違いの画像候補を伝える

レスポンシブ画像では、同じ写真のサイズ違いを用意し、ブラウザーへ選択の材料を渡せます。MDNは、候補を示すsrcsetと、想定する表示幅を伝えるsizesの組み合わせを説明しています。

ただ、sizesを書けば画面上の幅そのものが決まる、という理解は避けたいところです。レイアウトの実際の幅と、伝えている情報が食い違っていないか確認します。

pictureで画面に合う構図へ切り替える

横長の風景写真を縮小すると、主役が小さすぎて見えないことがあります。この場合は、単なるサイズ違いより、スマホで主役が伝わる構図を考える必要があります。MDNでは、picture要素を使うアートディレクションとして区別しています。

小さく軽くすることと、写真の意味を伝えることは、両方必要なんです。

表示幅・読み込んだファイル・構図を確認

私なら、スマホで収まった画面を見て安心する前に、読み込まれた画像も確認したいです。候補を置いただけで期待どおり選ばれるとは決めつけません。

表示幅、受け取るファイル、写真の構図。この三つを別々に見ると、軽さのために肝心の主役が見えなくなる変更も避けやすくなります。