NoteWebディレクター・ハラヒロシのブログ

srcsetを使ってRetina対応

Retinaディスプレイなどの高解像度デバイスと画像を使い分けるテスト。背景画像ならCSSでコントロールできるけど、imgタグの場合はHTML5のsrcsetを使って切り分け可能。通常だと「1x」、Retinaだと下の画像が「2x」となります。
image

<img src="image.jpg"
srcset="image.jpg 1x,
image@2x.jpg 2x"
alt="image">

<参考>
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King