画像サイズを動的に変化させる-retinaディスプレイへの対応

retinaディスプレイ等の高解像度なディスプレイを使っている場合を想定すると、他のディスプレイで表示する場合と区別しなければ、画像はぼやけたように表示されてしまいます。HTML5のsrcsetを使った方法では、retinaディスプレイかそうでないか・ウィンドウサイズはどのくらいか、を判断し表示する画像サイズを切り替えることが出来ます。詳細は参考サイトの方を見ていただくとして、簡単な例を示します。

・imgタグにsrcsetをつかう

<img src="https://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="example-small-img.jpg"
     srcset="example-small-img.jpg 1x,
             example-big-img.jpg 2x"
     alt="Example image"><noscript><img src="example-small-img.jpg"
     srcset="example-small-img.jpg 1x,
             example-big-img.jpg 2x"
     alt="Example image"></noscript>

と記述すると、srcsetに対応していない画像では一行目によって小さい画像が、また対応している場合srcsetによってretinaディスプレイでない場合2行目が、retinaディスプレイであれば3行目が適用され画像サイズの異なった画像を参照することが出来ます。

　その他、書き方によってはディスプレイの種類だけでなくウィンドウサイズに寄って切り替えたりも出来ます。

　また、1xや2xというのは「デバイスピクセル比」というものを表すものだそうです。詳しくはグーグルで調べていただいたほうが正確だと思います。

　注意　srcsetは対応していないブラウザがあります。

参考サイト： ・srcsetの使い方

http://www.9142.net/blog/2015/03/09/srcset/

http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

・srcsetデバイスピクセル比判定の注意について

http://iwb.jp/img-srcset-devicepixelratio-load2x/