BLOG

ブログ

トップ ブログ HTMLでレスポンシブイメージを実装して最適な画像を表示する

2021.11.03

HTMLでレスポンシブイメージを実装して最適な画像を表示する

レスポンシブデザインのウェブサイトコーディングでは、デバイスごとに適正なサイズの画像を読み込ませる、という実装が必須です。
以前まではこのような場合、すべてのサイズの画像を読み込ませてCSSのメディアクエリで出し分けたり、JavaScriptを用いて読み込みファイルの制御をしていましたが、現在はHTMLだけで最適化されたレスポンシブイメージの実装が可能になっています。

この記事では、レスポンシブイメージを実装する２つの方法を紹介いたします。

srcset属性とsizes属性

レスポンシブなウェブサイト用に画像を用意したとき、スマートフォン用とパソコン用で大きくイメージサイズが異なる場合があると思います。
パソコン用の画像をそのまま縮小すればスマートフォンでもデザイン通りになりますが、不必要に大きいファイルを読み込むことになりますのでサイト表示速度が遅くなる恐れがあります。
また、パソコンでもRetinaディスプレイのような高画素密度モニターと通常のモニターでは適切なファイルサイズが異なります。

このようにレスポンシブイメージを使用したい用途が「画像解像度の変更」だけなら、img要素とsrcset属性を組み合わせた方法がおすすめです。

HTMLの記述方法

<img srcset="画像1のパス 記述子, 
             画像2のパス 記述子,
             画像3のパス 記述子"
     src="フォールバック画像のパス"
     sizes="メディアクエリー（任意） 表示サイズ,
            画像2のメディアクエリー（任意） 画像2の表示サイズ,
            画像3のメディアクエリー（任意） 画像3の表示サイズ"
     alt="代替テキスト" 
     width="横幅" 
     height="縦幅">

srcset
画像パスと記述子の間は<b>半角スペース</b>、次の画像を指定するときは「<b>, （カンマ）</b>」で繋ぎます。

src
記入した画像がsrcset属性に対応していないブラウザで使用されます。

sizes
記述子を”w”に設定したときのみ使用できます(省略可)。表示サイズを指定。（vwやpx ※%は不可）

srcset属性に使用できる記述子は2種類です。

記述子

w　（幅デスクリプタ）
画像の固有サイズをブラウザに伝えるための単位です。画像の実寸値を入力しましょう

x (ピクセル密度)
高解像度ディスプレイをサポート（1x, 2x など）

srcが必要なのは、ほぼIE11だけなのでPC用画像を指定します。

sizes属性には表示する画像の横幅を入力します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。

sizes="(max-width: 1280px) 100vw, 1280px"

どのデバイスでもコンテンツ幅一杯に表示させる場合は100vwだけでOKです。
このとき画像が等倍サイズ以上で表示されるのを防ぐためにCSSで次のようにスタイルリセットしておきましょう。

img { max-width: 100%; height: auto; }

実装例

<img srcset="img/640x320.png 640w,
             img/1280x640.png 1280w,
             img/1600x800.png 1600w"
     src="img/1600x800.png"
     sizes="100vw"
     width="1280"
     height="640"
     alt="">

まとめ

  • srcset属性とsizes属性を使うことで、1つのimg要素に対して、複数の画像ファイルを設定することができる
  • ブラウザ幅だけでなくデバイスピクセル比も考慮して最適なものをブラウザが自動で選んでくれるようになる
  • どの画像が表示されるかはディスプレイの性能に依存するので異なるデザインの画像の出し分けには向いていない

以下の場合にsrcsetとsizesを使うのが適切です。

  • スマホ〜PCでサイズ差が大きい
  • スマホ〜PCで縦横比が変わらない
  • スマホ〜PCでデザインが変わらない

picture要素

レスポンシブイメージを使用したい用途が、「画角を変更したい」や「デザインを変更したい」なら、picture要素+srcset属性を組み合わせた方法がおすすめです。

HTMLの記述方法

<picture>
    <source media="メディアクエリー" srcset="画像1のパス">
    <source media="メディアクエリー" srcset="画像2のパス">
    <img src="フォールバック画像のパス" alt="代替テキスト" width="横幅" height="縦幅">
</picture>

picture
とくに特別な属性などは記述しない。source要素の親要素。

img
srcset属性が使えないブラウザでフォールバック画像として使用される。picture要素の子要素。

source要素にはsrcset属性を記述します。記述方法はimg要素のsrcset属性と同じです。
ブラウザは各sourceタグのmedia属性を参照し、メディアクエリにマッチするものがあればsrcset属性で指定した画像を表示します。 マッチするものがなかったり、ブラウザがpicture要素に対応していない場合は、imgタグの画像が表示されます。imgタグの指定は必須。

実装例

<picture>
    <source media="(max-width:400px)" srcset="img/640x640.png">
    <source media="(max-width:768px)" srcset="img/1280x800.png">
    <img src="img/1600x800.png" width="1600" height="800" alt="">
</picture>

ブラウザ幅が400pxまで　→　640×320.png
ブラウザ幅が400px〜768pxまで　→　1280×800.png
ブラウザ幅が768pxより大きいとき　→　1600×800.png

まとめ

画像が切り替わるブレイクポイントを指定することでデバイスごとに表示したい画像を制御するデバイスによって画角やデザインが異なるデザインのときに使用します

以下の場合にpictureを使うのが適切です。

  • スマホとPCで画角が変わる
  • スマホ〜PCでデザインが変わる

BACK TO INDEX