srcset属性を試してみました。

GoogleのPageSpeed Insightsで合格点が欲しくて、色々ググってましたら、imgタグにsrcset属性なるものがあるそうな。

画面サイズで画像が切り替えるらしい。

picture要素も同じことが出来るとの事。

早速試してみました。

先ずはsrcset属性からテスト、画像を適当なサイズで作って、body内のタグは下記で。

[code]
<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/620w.jpg 620w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">
<script async src="picturefill.js"&gt;&lt;/script>
[/code]

PCで各ブラウザでチェック、Chromeだけ若干挙動がおかしいが、一応画像は切り替わってる。

今度はスマートフォンでチェック。

おかしい、980w.jpgが表示されてる、何で?

その後、2日間悪戦苦闘しましたが、わかりました。

320wとか360wとか設定してる数値は、PCでは画面サイズ、スマートフォンではピクセルサイズだった。

これは使えません。

今度はpicture要素。

[code]
<picture>
  <source media="(min-width: 980px)" srcset="img/2000w.jpg">
  <source media="(min-width: 768px)" srcset="img/1280w.jpg">
  <source media="(min-width: 640px)" srcset="img/640w.jpg">
  <source media="(min-width: 360px)" srcset="img/360w.jpg 1x,img/640w.jpg 2x">
  <source media="(min-width: 320px)" srcset="img/320w.jpg 1x, img/360w.jpg 2x">
  <img src="img/2000w.jpg" alt="pictureのテスト">
</picture>
<script async src="picturefill.js"></script>
[/code]

PCのブラウザチェック、やはりChromeだけ若干挙動がおかしい。

スマートフォンでチェック、今度はOK!

いやしかし、1xというのが効いてない。

GoogleのPageSpeed Insightsでチェックすると2xの360w.jpgが表示されてる。

PageSpeed Insights

これではPageSpeed Insightsで合格点は出ません。

PCのブラウザ画面サイズが320pxでは320w.jpgが表示されているのに、PageSpeed Insightsでは360w.jpgが表示されてる。

今はsrcset属性もpicture要素も使えそうにないですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です