レスポンシブ画像をpicture要素で出し分ける実践ガイド

スマートフォンとパソコンでは画面幅だけでなく、通信環境や画像の見え方も大きく異なります。ひとつの大きな画像をすべての端末へ配信すると、スマホでは表示領域に対してファイル容量が過剰になり、読み込み速度や操作感に影響することがあります。

HTMLのpicture要素を使えば、画面幅に応じた画像や、ブラウザが対応する画像形式を選択できます。この記事では、レスポンシブ対応で画像を出し分ける基本から、アートディレクション、WebP・AVIF、アクセシビリティまで、実際の制作で使いやすい記述方法を整理します。

picture要素を使う基本構造

picture要素では、複数のsource要素と、最後のimg要素を組み合わせます。ブラウザは上から順番に条件を確認し、最初に利用できる画像を表示します。imgはフォールバックとして必ず残しておくのが基本です。

<picture>
  <source media="(max-width: 767px)" srcset="/images/hero-sp.jpg">
  <source media="(min-width: 768px)" srcset="/images/hero-pc.jpg">
  <img src="/images/hero-pc.jpg" alt="サービス紹介のメインビジュアル">
</picture>

この例では、画面幅767px以下でスマートフォン用画像、それ以上でパソコン用画像を読み込みます。CSSのbackground-imageでも似た表現はできますが、コンテンツとして意味を持つ画像なら、SEOや代替テキストを扱いやすいimgとpictureの組み合わせが適しています。

画面幅で構図を切り替える

単純な縮小では、横長のメインビジュアルに配置した人物や商品が小さくなりすぎることがあります。その場合は、スマホ用に縦長の画像を用意し、構図そのものを変更します。この考え方は「アートディレクション」と呼ばれます。

<picture>
  <source
    media="(max-width: 600px)"
    srcset="/images/campaign-portrait.jpg">
  <img
    src="/images/campaign-landscape.jpg"
    alt="新商品のキャンペーンビジュアル">
</picture>

sourceの順番を意識し、狭い画面向けの条件を先に記述すると意図が伝わりやすくなります。ブレークポイントは端末名ではなく、画像やレイアウトが窮屈になる幅を基準に決めると、タブレットや小型ノートパソコンにも対応しやすくなります。

WebPやAVIFを優先して配信する

画像形式の出し分けにもpicture要素を利用できます。AVIFに対応しているブラウザにはAVIFを送り、対応していない場合はWebP、さらに古い環境ではJPEGを表示する構成です。

<picture>
  <source srcset="/images/visual.avif" type="image/avif">
  <source srcset="/images/visual.webp" type="image/webp">
  <img
    src="/images/visual.jpg"
    alt="青空の下にあるワークスペース"
    width="1200"
    height="800">
</picture>

ファイル容量を削減できる一方で、すべての画像を無条件に高圧縮すればよいわけではありません。文字入りの画像や細い線が多い画像では、圧縮後のにじみを確認します。制作物の公開や検証結果をまとめる際は、制作記録のように実装と見た目の両方を残しておくと、後から改善点を振り返れます。

srcsetとsizesで解像度を最適化する

同じ構図を保ったまま、表示幅に応じて適切な解像度を選ぶなら、srcsetとsizesが便利です。候補画像の幅をw記号で示し、sizesで表示領域の目安を伝えます。

<img
  src="/images/card-800.jpg"
  srcset="
    /images/card-400.jpg 400w,
    /images/card-800.jpg 800w,
    /images/card-1200.jpg 1200w"
  sizes="(max-width: 767px) 92vw, 800px"
  alt="デザイン制作事例のカード"
  width="1200"
  height="800"
  loading="lazy">

ブラウザはビューポート幅と端末の画面密度を考慮し、候補から適切なファイルを選びます。widthとheightを指定しておけば、画像読み込み前に表示領域が確保され、レイアウトシフトの抑制にもつながります。

スマートフォン表示で確認するポイント

レスポンシブ画像は、HTMLを書くだけで完成するものではありません。実機または開発者ツールで、ブレークポイント付近の表示、画像の切り替え、通信速度を確認します。特にスマホでは、画像が切り替わってもカードの高さや余白が崩れないかを見ます。

画像の検証やスマートフォン向けUIの学習記録を探す場合は、スマホ記事のような関連テーマも参考になります。ChromeのNetworkパネルでは実際に取得されたファイル名と容量を確認できるため、意図せず大きなPC画像が配信されていないかを調べられます。

アクセシビリティと保守性を整える

picture要素を使っても、代替テキストはimgのaltに一つだけ記述します。スマホ用とPC用で構図が変わっても、画像が伝える内容が同じなら、端末ごとに別の説明を用意する必要はありません。意味を持たない装飾画像ならalt=""とします。

画像ファイルの命名規則や保存場所も、長期運用では重要です。hero-sp.webp、hero-pc.webpのように用途を明確にし、デザイン変更時には不要な旧画像を整理します。表示確認、容量測定、アクセシビリティ検査を一つのチェック項目として扱うと、見た目だけに偏らない実装になります。

実際のサイトに導入するときは、まず代表的なヒーロー画像や容量の大きい一覧画像からpicture要素へ置き換え、表示速度と視認性の変化を確認してください。画面幅、画像形式、代替テキストを順に検証し、プロジェクトに合ったレスポンシブ画像のルールとして共有しましょう。