imgタグsrcset属性で画像出しわけ【レスポンシブイメージ】

更新2021/11/06

テスクトップ・タブレット・モバイル。今やサイトは色々な端末で見られます。
それぞれの画面幅や解像度に合った画像を読み込ませる画像最適化は、Webサイト制作に大切なことです。

レスポンシブイメージはレスポンシブサイトにおける画像の取扱い方を定めたもの。2016年11月に勧告されたHTML5.1の新しい仕様です。
【参照】
【W3C】 HTML 5.1: Changes
知ってるよね?HTML5.1の仕様変更はフロントエンジニアの常識

それまではCSSやJSで表示を切り替えていましたが、HTMLのみでレスポンシブ表示できるようになった、というもの。

デスクトップ用に2000px × 600pxの画像を用意したとしても、モバイル画面でもそのサイズの大きさが必要でしょうか。答えはNO。無駄に大きサイズの画像を使っては読み込みに時間がかかってしまいます。

そこで画面サイズに合わせて画像を切り替えることが必要になります。

HTMLのみで画像を切り替えるレスポンシブイメージ

デバイスに応じた

  • 最適サイズ
  • 最適画像

を出し分けできます。
何が使えるようになったかというと、srcset属性とsize属性です。
imgタグでレスポンシブ対応するなら3つの属性を覚えておく。

  • srcset
  • src
  • sizes

【記述例】

<img srcset="img_s.jpg 320w,
             img_m.jpg 640w,
             img_l.jpg 1280w"
     src="img_l.jpg"
     sizes="(max-width:1280px) 100vw, 1280px">

srcset属性

srcset は<img>で表示する画像を複数指定するものです。以下のように切り替え設定ができます。

  • ディスプレイの解像度に合わせて画像を切り替える
  • 画面サイズに合わせて画像を切り替える
  • 画面サイズ別に表示する画像を変更する

ディスプレイの解像度で画像切り替え

<img src="img.jpg" srcset="img.jpg 1x, img@2x.jpg 2x" alt="Example image">

画像URLとその画像を読み込む条件を指定。それぞれの画像はコンマで区切ります。

srcset="img.jpg 1x, img@2x.jpg 2x"
srcset="画像URL 解像度, 画像URL 解像度" を表しています。

通常のデバイスのdpiの大きさならimg.jpg、Retinaディスプレイのようにdpiの大きい場合はimg@2x.jpgを読み込みます。
srcset が読み込まれれば src 部分は読み込まれません。

画面サイズによって画像を切り替える

srcset属性に仕様するサイズの単位は「w」。

<img src="img.jpg"
     srcset="img-640.jpg 640w, img-1280.jpg 1280w"
     alt="Example image">

この場合、画面サイズが640px以下ならimg-640.jpg、1280px以下かそれ以上ならimg-1280.jpgを表示します。

この数字の指定であれば、dpiの高さも考慮してくれます。
→ 640pxの画面サイズでも、Retinaの場合img-1280.jpgを表示。

この指定方法でOKの場合、media属性は不要です。

pictureタグでの切り替えはこちら
pictureタグでレスポンシブ画像切り替え

sizes属性でより柔軟に

sizes属性は、画像の表示サイズを指定します。

<img src="img.jpg"
    sizes="50w"
     srcset="img-640.jpg 640w, img-1280.jpg 1280w"
     alt="Example image">

sizes属性のデフォルトは100vw。50vwにすることで画面サイズの半分のサイズ画像が読み込まれることになります。(1280pxを越えるまではimg-640.jpgが表示される)

メディアクエリを追加することで可変的に画像を指定することができます。

sizes="(min-width: 640px) 50vw, 100vw"

640以上の時は50vw(画面サイズの半分の大きさの画像)で読み込む。それ以外は100vw(画面サイズ100%)の画像を読み込みます。

単位はpx, em, vwが使用可能。%は使えない。

ブラウザによって画像切り替えが異なる

閲覧するブラウザによって、画像が切り替わらない?となることがあります。
それはブラウザのキャッシュの取り方の問題。サイト作成で確認するときはこのことも覚えておきましょう。

  • Chrome
    一番大きなサイズの画像ファイルをキャッシュしたら、それ以下の小さい画像は読み込まれない。
  • Firefox
    画面サイズが変わるたびに最適な画像を読み込む。
  • Safari
    最初に開いた画面サイズの画像をキャッシュし、画面サイズが変わってもその画像以外読み込まない。

アートディレクション

画面サイズによって画像の内容を変更することをアートディレクションと言います。画像をどれにするかを指し示すので、アート(画像)をディレクション(指示)するといった感じです。
PCでは横長でデザインした画像、SPでは縦長でデザインした画像を表示させる、といったことを言います。

このアートディレクションを行うにはimgタグだけでは対応しきれないのでpictureタグを使います。

pictureタグでレスポンシブ画像切り替え

未対応ブラウザにはpolyfill

srcset はieに対応していません。
【ブラウザ対応状況】caniuse

対応していないブラウザでも表示させる場合には、polyfillを使う。

polyfill.io がおすすめです。
参照サイト : 【Polyfill.io】を使用してJavascriptのブラウザ互換を解決する


カテゴリー : HTML-CSS

タグ :

TOPへ