HTML

picture要素srcset属性の使い所をおさえてレスポンシブ完全攻略

2017.09.05

写真

HTML5で実装されたpicture要素srcset属性は、jsやユーザーエージェント判定に頼ることなく、解像度やウィンドサイズに合わせて画像を変更することができます。執筆時点のブラウザサポート状況はガシガシ使っても問題ないレベルだと思います。

picture要素とimg要素でのsrcset属性の使い分け

実はpicture要素もimg要素でのsrcset属性も機能的にはそれぞれを兼ねることが可能です。しかしそこはマークアップ言語であるHTMLだからこそ意味をもって使い分ける必要があります。

srcsetはサイズ違いに使う

srcsetはオブジェクトの比率は同じでRetinaや非Retinaなどのサイズ違いに使います。ロゴなどが代表的な使い所です。

srcsetの出力例

srcsethの出力例はいくつかあります。

シンプルな例

<img src="logo1x.png"
    srcset="logo1x.png 1x,
              logo.png 2x"
    alt="W.D.S" width="163" height="38"
>

上記は当サイトのロゴの出力例です。一番シンプルな使い方で、srcでサポート外のブラウザの指定をしておき、1xで等倍の画像、2xでRetina対応の画像を呼び出しております。

サイズで指定する方法
<img src="img320.jpg"
     srcset="img640.jpg 640w,
             img320.jpg 320w"
     alt="おると!"
>

続いてはサイズを指定する方法です。上記の例ではウィンドウ幅が320px以下はimg320.jpgが読み込まれ、640px以下と以上ではimg640.jpgが読み込まれます。ちなみに320pxRetinaは640の画像が読み込まれます。賢い!

レスポンシブな指定
<img src="img320.jpg"
     srcset="img640.jpg 640w,
             img320.jpg 320w"
     sizes="(max-width: 640px) 50vw"
     alt="おると!"
>

上記例では640px以下はimg320.jpgを読み込みそれ以上がimg640.jpgです。sizesの指定は640pxまでは50%で計算してくださいって指定です。

pictureは違う画像や画面サイズに合わせた画像に

picture要素はモバイルとPCで表示領域の異なる画像やリキッドレイアウトなどで画面サイズで画像を変更する場合に用います。メイン画像などが該当すると思います。

<picture>
  <source media="(min-width: 750px)" srcset="img750.jpg">
  <source media="(min-width: 375px)" srcset="img375.jpg">
  <img src="img375.jpg" alt="おると!">
</picture>

picture要素はsourceの記述順に注意が必要です。メディアで指定するサイズの大きい順に記述し、最後にimg要素を記述します。srcsetのサイズ指定と考え方が異なる点にも注意が必要です。

//picture要素
<picture>
<source media="(min-width: 750px)" srcset="img750.jpg">
<source media="(min-width: 375px)" srcset="img375.jpg">
<img src="img375.jpg">
</picture>

//srcset属性
<img src="img375.jpg"
     srcset="img750.jpg 750w,
             img375.jpg 749w"
>

同じサイズで指定すると上記のようになります。振る舞いも異なります。srcsetはpageの読み込み時にサイズ調整が入りますがpictureはレスポンシブに画像が切り替わります。

<picture>
  <source media="(min-width: 375px)" srcset="img.jpg 1x, img@2x.jpg 2x">
  <img src="img.jpg" alt="おると!">
</picture>

picture要素にもRetina用の指定を入れることも可能です。

picture要素srcset属性のメリット

HTML5で実装されたこの二つの機能を使うメリットは工数とパフォーマンスでしょう。慣れるまでは面倒に感じてしまうかもしれませんが、慣れてしまえばjsやユーザーエージェンとで画像を切り替えるより手軽に実装できます。無駄な画像も読み込みませんのでパフォーマンス的にもいい感じです。

picture要素srcset属性で適宜画像を用意しておけばPagespeedInsightで怒られることも無くなります。レスポンシブなリキッドレイアウトでもパフォーマンスを両立することが可能になります。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する