レスポンシブに構築を行う際、パソコンとスマートフォンなどでレイアウトを考慮しなければならないポイントの一つとして重要なのが画像の取り扱いです。HTML5以降では、CSSやJavascriptを使わずに、HTMLでのみレスポンシブに対応した画像の切り替えが行えるようになりました。

img要素のsrcset属性とsizes属性の使い方

レスポンシブなWebサイトではデスクトップや、ノートパソコン、タブレット、モバイルのサイズに合わせて画像を切り替える場合があります。これはモバイル時にデスクトップ用の高画質な画像を読み込ませたりすると、表示速度の遅延に関わるため、各デバイスごとに最良のサイズ画像を読み込ませた方が良いためです。パソコンでもモバイルでも同一の画像を読み込ませる場合には、srcset属性とsizes属性を使えば、サイズに応じてより軽量な画像を読み込ませることができるため有効です。
もしもパソコンとモバイルで異なる画像を読み込ませたい場合には、後述するpicture要素を活用した方が良いです。

imgタグに3つの属性を指定する

画像の切り替えを行う処理は、imgタグに3つの属性を記述していきます。

1. 画像ファイルのパス
2. 画像ファイルの横幅
3. 画像をウェブページ上で表示する際の横幅

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

srcset属性で画像ファイルのパスと横幅を指定する

はじめに画像ファイルの読み込みと横幅の指定をsrcset属性に記述していきます。画像の横幅はパスの記述の直後に半角スペースを空けて挿入します。単位はpxではなくwを用います。

srcset="picture_s.jpg 320w,
	    picture_m.jpg 640w,
        picture_l.jpg 1280w"

この320や640といった幅の数値は画像を切り替える際のブレイクポイントではなく、ブラウザ側に画像の情報を伝えるためのものになります。

sizes属性で画像を切り替える際の画面幅を指定する

sizes属性では条件と画像の表示を指定します。条件にはmax-widthなどメディアクエリを使用します。
例えば、
sizes="(max-width: 767px) 80vw, (max-width: 1080px) 50vw, 1080px"であればビューポート幅が767px以下であれば80vw、1080px以下であれば50vw、それ以外であれば1080pxで表示するようになります。
指定するサイズの単位にはpx,em,vwなど使えますが、%だけは使えないようです。

注意点としては、最適な画像がどれかはブラウザ側で判断されるので、ビューポートの幅に応じて任意の画像を選ぶことはできません。画像の切り替えもブラウザの使用によって異なりますので気をつけましょう。

• Chrome : 大きなサイズの画像ファイルをキャッシュした場合、画面幅を狭めても小さい画像は読み込まれない
• Firefox : 画面幅を変える度に、画面幅に適したサイズの画像を読み込む
• Safari : 最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされない

参照：https://ics.media/entry/13324/

picture要素の使い方

レスポンシブに対応したサイトの場合、デザインによってはモバイルに切り替わるタイミングで別の画像へと変更を行う場合があります。
任意のサイズに応じて画像を強制的に切り替えたい場合には、srcset属性よりpicture要素がおすすめです。

<picture>
    <source media="(max-width:640px)" srcset="picture_s.jpg 320w">
    <source media="(max-width:980px)" srcset="picture_m.jpg 640w">
    <img src="picture_l.jpg">
</picture>

picutureタグはメディアクエリ用のsourceとimgを使います。
最上位のsourceから順に読み込んでいき、どの条件にも当てはまらなければ最後のimgを表示させます。

sourceタグの条件指定

<source media="(max-width:980px)" srcset="picture_m.jpg 640w" type="image/webp"/>
<img src="picture_l.jpg"><!-- webp未対応のブラウザの場合に表示 -->

srcset属性には先ほどと同じく画像URLを指定します。
media属性にはsizesに書いたものと同じようにメディアクエリを指定します。上の例でいえば、画面幅が980pxまではpicture_m.jpgを読み込むという意味になります。
このタグを複数記述することで、画面サイズに応じた切り替えが可能になります。
また、画像ごとに形式も指定できます。jpeg,png,gifなどは全ブラウザで対応しているため記述不要ですが、webpなどを使用したい場合には必要になります。

picture要素とimg要素の使い分け

実際に使ってみると、picture要素の方が使い勝手が良いように思われますが、HTMLの記述方法としては状況に応じてimg要素とpicture要素を使い分けることが推奨されているようです。

1. サイズ変更させる場合はimgにsrcset属性を使う
2. レスポンシブ時に別画像を表示させる場合はpictureタグを使う

参照：https://parashuto.com/rriver/responsive-web/picture-srcset-use-case#two-markups

Share