ウィルスタイル株式会社 / Will Style Inc.

用意する画像

用意する画像はもちろん6枚です。
例えばスマホだけで切り替えたい場合は4枚になります。

1. 通常の画像(image.jpg)
2. Retina Display用の画像(image@2x.jpg)
3. タブレット用画像(image-991.jpg)
4. Retina Display用のタブレット用画像(image-991@2x.jpg)
5. スマホ用画像(image-767.jpg)
6. Retina Display用のスマホ用画像(image-767@2x.jpg)

※上記はブレイクポイントにあわせたファイル名にしていますが、ファイル名は適宜変更ください。

記述方法

pictureタグとsrcsetを利用して以下のように記述します。
sourceタグを追加していけばいくつでも切り替え可能です。（注意点としてmediaアトリビュートがmax-widthの場合は小さいサイズから順に記述してください。）

<picture>
	<source media="(max-width:767px)" srcset="img/image-767.jpg 1x,img/image-767@2x.jpg 2x">
	<source media="(max-width:991px)" srcset="img/image-991.jpg 1x,img/image-991@2x.jpg 2x">
	<img src="img/image.jpg" srcset="img/image.jpg 1x,img/image@2x.jpg 2x" alt="">
</picture>

Demo

それでは実際のデモを御覧ください。

最後に

今回は少し簡単にご説明させていただきました。
例えば以下のようにPCでは縦書きのタイポグラフィーを、スマホでは横書きのタイポグラフィーにしたい場合などに重宝します。

皆さんも是非活用してみてください。