はじめに

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

Retinaとは

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

srcset属性

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

<img src="hoge.png"/>

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

<imt src="hoge.png" srcset="hoge.png 1x, [email protected] 2x"/>

hoge.png と [email protected] を見比べたところ、大きさだけが異なる同じ画像だった。


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

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

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

画像の用意

Retina用画像は通常の画像の2倍の大きさで用意し、ファイル名を[email protected]などとすることが多い。

おわりに

pictureタグも調べたい。

参考

• https://creative.eccom.jp/922/
• https://jobtech.jp/html_css/3852/