ひょんなことから Apple の Safari HTML Reference を読んでみて知りました。
image要素のシンタックスのところに、
<img src="img.jpg" srcset="img_HD.jpg 2x, img_sm.jpg 100w, img_smHD.jpg 100w 2x">
と書いてあって、srcset属性ってなんだろうと調べ始めたのがきっかけです。
srcset属性とは
imageタグに複数のソースを指定するための属性です。
条件も記述できるので、条件によってソースを出し分けることができます。HTMLだけで。すごい。
昨今、PCにもRetinaディスプレイが搭載されたりで、いろんな環境で画像をしゃっきり見せるためにはどうしたらいいんだろうと考えていたんですが、srcset属性はそのひとつの解といっても良いのではないでしょうか。
srcset属性の書き方
<img src="hoge.jpg" srcset="hoge@2x.jpg 2x" />
こんな感じで書くと、 srcset属性に対応しているブラウザ で、 デバイスピクセル比が2の環境 では hoge@2x.jpg がそれ以外の環境では hoge.jpg が表示されるらしいです。
条件は複数かけるので、
<img src="hoge.jpg" srcset="hoge@2x.jpg 2x, sample_s.jpg 320w , hoge@2x.jpg 320w 2x" />
という感じで、ビューポートが320px以下のときの画像を指定したり、ビューポートが320px以下でデバイスピクセル比が2のときの画像を指定したりできるようです。すごい。
対応環境
iOS では 9.2からつかえるようです。
Can I use... Support tables for HTML5, CSS3, etc
対応していないブラウザでも下記のJSを読み込むとつかえるようになるみたいです。すごい。
