サイト制作
pictureとimgのsrcsetはどう使い分ける？構図を変えるかが目安
2026-11-01
この記事には広告・アフィリエイトリンクが含まれます。
画面幅に合わせて写真の構図を変えるならpicture、同じ画像の解像度違いを選ばせるならimgのsrcsetが基本です。
写真の中身を変えるかで考える
スマートフォンでは人物を大きく、広い画面では周囲の風景も見せたい。こうした構図の切り替えにはpicture要素が向いています。一方、同じ構図のまま細かさの異なる画像を用意するなら、img要素のsrcsetとsizesを検討します。どちらも画像対応ですが、解決したい問題が違います。
pictureの中にもimgが必要
pictureには条件に応じたsource要素と、実際に画像を表示するimg要素を置きます。sourceのmediaやtypeなどをブラウザーが確認し、適した候補を選びます。条件に合う候補がない場合に使う画像もimgで用意します。pictureだけを置けば画像が表示される、という構造ではありません。
代替テキストは意味に合わせる
altはimg側に記述します。画面ごとに構図を変えても、画像が伝える主な内容が同じなら、その意味を説明できる代替テキストにします。切り替えによって説明対象そのものが変わる設計では、情報が欠けていないか見直しましょう。飾りの画像と説明に必要な画像も区別します。
幅を変えて実物を確かめる
実装後は画面幅を変え、どの画像が読み込まれるかと、見せたい部分が残るかを確認します。小さな画面向け画像を用意しても、条件やファイル指定が合わなければ意図どおりになりません。寸法の指定や周囲の文章との関係も含めて、表示と読み込みの両方を確認してください。
