簡単に画像のレティナ対応 #HTML

先に注意、
この方法は写真などは扱えません。SVGを使うためです。

今までレティナ対応と言えば

sample.html

<img src="example.jpg"
     srcset="example.jpg 1x,
             example@2x.jpg 2x,
             example@4x.jpg 4x"
     width="66" height="66"
     alt="sample image">

みたいにやってました。

でもこれって画像の枚数が増えると大変ですよね。

かと言ってSVGだけだと古いブラウザで見れなくなる。（サポートしないなら別）

なのでこんな形はどうでしょう。

sample.html

<img src="example.jpg"
     srcset="img/example.svg 2x"
     width="66" height="66"
     alt="sample image">

単純に２倍解像度のところにSVGを入れて、他の解像度は除きます。

これで２倍以上のレティナすべてに対応できます。

今時のスマホ、タブレットはほぼレティナ対応しないといけないので、
こういった方法で簡単かつ確実な対策をしてみてはいかがでしょうか。