コーディング

超高解像度の時代がすぐそこに
pictureとsrcsetを使いこなして最適な画像指定をしよう

2017.09.15

超高解像度の時代がすぐそこにpictureとsrcsetを使いこなして最適な画像指定をしようのアイキャッチ画像

先日iPhoneXの発表がありましたね。僕が何より驚いたのはその解像度。2,436×1,125ピクセルです。これまでは高解像度スマートフォン向けに実際の2倍のサイズの画像を用いてコーディングをしてきましたが、このiPhoneXでも綺麗に画像を見せるには3倍のサイズが必要になります。

またPCでも4Kディスプレイやウルトラワイドディスプレイなど高解像度モニタが普及しつつあります。

それでは高解像モニタに合わせてWebサイトの構築でも高解像度の画像を使用していけばいいのでしょうか?それは間違いです。これをするとWebサイトの通信量は大幅に増加してしまいます。モニタサイズに合わせて最適な画像を読み込むことが重要になります。

今回はそういった時に使用するpicture要素とsrcset属性を紹介します。

picture要素

picture要素はブラウザサイズに合わせて一つのimgタグで複数の画像を切り替えて読み込む際に使用します。レスポンシブデザイン等で、ブラウザサイズによってレイアウトなどが変わり、それに合わせたデザインの画像等を表示する際に最適です。

記述例

picture要素は以下のように記述します。

<picture>
  <source media="(max-width: 668px)" srcset="imageA.jpg">
  <source media="(max-width: 978px)" srcset="imageB.jpg">
  <img src="imageC.jpg" alt="画像名">
</picture>

記述の上から順番に判定され条件を満たす場合はsrcsetに設定された画像を読み込み、満たさない場合は次の行の判定がされます。

どの条件も満たさない場合は最後の行のimgタグで指定された画像を読み込みます。

上記の例ではブラウザ幅が668px以下の場合imageA.jpgが、668px以上978px以下の場合はimageB.jpgがそれ以外の場合はimageC.jpgが読み込まれます。

srcset属性

srcset属性は上記のsource要素や一般的なimg要素などで使用できます。こちらも条件に合致した時に指定した画像を表示します。

記述例

srcset属性は以下のように記述します。

<img src="imageA.jpg" srcset="imageB.jpg 2x,imageC.jpg 3x" alt="画像名">

上記の記述例ではRetinaディスプレイなどのピクセル密度が2倍のディスプレイではimageB.jpgが表示され、iPhoneXやiPhoneのプラスシリーズなどのピクセル密度が3倍のディスプレイではimageC.jpgが表示され、それ以外ではimageA.jpgが表示されます。

picture要素とsrcset属性は併用することができ下記のようにも記述できます。

<picture>
  <source media="(max-width: 668px)" srcset="imageA-1x.jpg 1x,imageA-2x.jpg 2x,imageA-3x.jpg 3x">
  <source media="(max-width: 978px)" srcset="imageB.jpg">
  <img src="imageC.jpg" alt="画像名">
</picture>

picture要素とsrcset属性は似たような用途で使用できるので使い分けに悩むこともあるかと思いますが、目安としてpicture要素はウィンドウ幅によって表示させる画像を切り替える場合に使用し、srcset属性は同じ画像で解像度が異なるものを切り替える場合に使用することをおすすめします。

参考にしてみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。