picture要素とsrcset属性の基礎知識と使い分けと注意点をまとめる

 

img要素のsrcset属性

srcset属性について、Googleでは下記のように述べられている。

 

現時点で十分にサポートされているのはピクセル密度のみです。 ……この属性は 2x の画像の提供にのみ利用してください。

(引用元:Web Fundamentals  – Google『画像 | マークアップを用いた画像処理』https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

 

つまりsrcset属性は、Retinaディスプレイといった高解像度のデバイスに最適な画像を表示するために用いる。

 

srcset属性の基本文法

srcset="画像のファイル名 デバイスピクセル比※単位はx"

 

デバイスピクセル比とは、デバイス上のピクセルとCSS上のピクセルの比率のこと。比率は、1x2x(iPhone6、6s、7、8等)、3x(iPhone6+、6s+、7+、8+等)がある。

次のページの画像を見ると理解しやすい。

PaintCode『The Ultimate Guide To iPhone Resolutions』:https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

 

  1. 全てのデバイスで表示される画像を用意。(仮にimg.pngとする)
  2. img要素のsrc属性で、srcset属性に対応していないブラウザ向けの画像を指定する
  3. img要素のsrcset属性で、デバイスピクセル別にディスプレイに表示する画像を指定する

 

index.html


<!-----------------------------------

一つ指定する場合

----------------------------------->

<img src="img.png" srcset="img@2x.png 2x">

<!-----------------------------------

複数指定する場合

----------------------------------->

<img src="img.png" srcset="img@2x.png 2x, img@3x.png 3x">

 

srcset属性のメリット

  • 画像の容量が不本意に重くなりすぎず、表示スピードが上がる。
  • スマホ表示を気にすることなく、鮮明な画像をデスクトップやラップトップ用に使用することができる。

srcset属性の注意点

picture要素

picture要素は、メディアクエリや解像度に応じて、表示する画像を最適化するために用いる

 

picture要素の基本文法

index.html


<picture>

<source media="メディアクエリを指定" srcset="指定したメディアクエリ時に表示される画像を指定,デバイスピクセル比別に画像を指定">

<img src="img.jpg" srcset="デバイスピクセル比別に画像を指定" alt="sample text">

</picture>

pictureをサポートしていないブラウザでは、img要素のsrc属性で指定した画像が表示される。

  1. 全てのデバイスで表示される画像を用意。(仮にimg.jpgとする)
  2. picture要素内にsource要素とimg要素を記入。
  3. source要素で、メディアクエリの指定をする
  4. img要素やsource要素内にあるsrcset属性で、解像度によって最適化された画像を指定する

 

index.html


<!-----------------------------------

img要素でデフォルトの画像のパスを指定する。

----------------------------------->

<picture>

<source media="(min-width: 800px)" srcset="img-pc.jpg, img-pc@2x.jpg 2x">

<source media="(min-width: 450px)" srcset="img-mobile.jpg, img-mobile@2x.jpg 2x">

<img src="img.jpg" srcset="img@2x.jpg 2x" alt="sample text">

</picture>

picture要素のメリット

  • 横長や縦長、解像度によって画像の印象的に配置するようにできる。

picture要素の注意点

 

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

スマホのディスプレイで、PCサイズの画像を表示すると、画像の容量が重くなり、読み込み速度が低下する。その際の解決策がsrcset属性。シンプルにいうと、img要素のsrcset属性は画像の解像度を変更するだけの手段。

 

一方で、様々な縦横比率(横長のディスプレイや縦長のディスプレイ)のディスプレイでも、印象的に画像を表示させるための手段として使われるのがpicture要素。つまり、picture要素は、srcset属性で出来ることの他に、ユーザーのデバイスによって表示する画像を変更するための手段。

終わりに

メディアクエリや解像度について基本的な理解がないと、picture要素とsrcset属性をちゃんと理解することが難しく感じた。それらに違いについてはいずれまとめる。

 

参考記事

Retinaディスプレイについては、

Apple『Retina ディスプレイを使う』https://support.apple.com/ja-jp/HT202471

 

srcset属性やpicture要素については、

Web Fundamentals | Google 『画像』:https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

MDN web docs『レスポンシブ画像』:https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

MDN web docs『<img>:埋め込み画像要素』:https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

MDN web docs『<picture>:画像要素』:https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

ブックマーク

関連して有益と思われるサイトをブックマーク。

PaintCode『The Ultimate Guide To iPhone Resolutions』:https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Picturefill:https://scottjehl.github.io/picturefill/

Responsive Images Community Group:https://responsiveimages.org/demos/

 

 

.