はじめに

コードを読んでいたら、html の imgタグにsrcsetという見慣れない属性があったので調べた。

Retinaとは

RetinaとはApple社が開発したディスプレイのこと。
通常のディスプレイと比べ高画質であり、同じ画像でもぼやけて見えてしまいやすい。
そのため、しばしば Retina用の画像を別で用意する。

これまでよく使っていた imgタグ

<img src="hoge.png"/>

今回初めて目にした imgタグ

<imt src="hoge.png" srcset="hoge.png 1x, hoge@2x.png 2x"/>

hoge.png と hoge@&#;2x.png を見比べたところ、大きさだけが異なる同じ画像だった。

結論から言うと、srcsetはHTML5.1から追加された属性で、複数の画像と解像度の組み合わせを指定し、表示ディスプレイの解像度に応じて画像を使い分ける役割があるらしい。

画像の指定は、解像度が低い順にsrcset = "画像ファイル名解像度, ..."といったフォーマットで記述する。

Internet Explorerには対応していないため、src="hoge.png"の記述も残しておく必要があることに注意。

Retina用画像は通常の画像の2倍の大きさで用意し、ファイル名をhoge@2x.pngなどとすることが多い。

pictureタグも調べたい。