JavaScriptやCSSでPCとスマホの画像を切り替えることができますが、「picture」をしようすることで、HTMLだけでPCとSPので画像を切り替えることができます。
毎回「img」を２つ使ってCSSで「display:none;」「display:block;」で画像を切り替えているかたが下記に切り替えると幸せになれます（笑）
※IEではデフォルトでは動作しません。
HTMLでレスポンシブのPC,SPの画像切り替え、Retinaディスプレイに対応する方法
ひとまずレスポンシブのPC,SPの画像切り替えとRetinaディスプレイに対応するの２つに分けで説明していきます。
HTMLでレスポンシブのPC,SPの画像切り替え
「picture」を使用することで簡単に切り替えることができます。
下記のコードでは、幅が750px以内のときはsp.jpgの画像を表示し、751px以上に変わったらpc.jpgという画像が表示されるようになります。
追加でJSやCSSで消したりしなくていいのが最高ですね。
<picture> <source media="(min-width: 751px)" srcset="pc.jpg"> <source media="(max-width: 750px)" srcset="sp.jpg"> <img src="pc.jpg"> </picture>
Retinaディスプレイに対応する
Retinaディスプレイに対応するには、画像を等倍と倍の画像を用意する必要があります。
今回は、「img.png」という画像を用意します。
２倍で書き出す画像には、わかりやすく語尾に「@2x」と入れておきます。
これはPhotoshopやIllustrator、XDで簡単に書き出すことができます。
実際にHTMLに記述はこんな感じです。
<img src="img.png" srcset="img.png 1x, img@2x.png 2x" alt="">
「srcset」を使用ことで、画像を切り替えることができます。
レスポンシブのPC,SPの画像切り替えしつつ、Retinaディスプレイに対応する
上記で書いた２つの切替方法を使ってレスポンシブでPCとSPの画像を切り替えつつ、なおかつRetinaディスプレに対応してみます。
srcsetの中に２倍の画像の指定も入れてあげるだけで、Retinaディスプレイにも簡単に対応できます。
<picture>
<source media="(min-width:751px)" srcset="pc.jpg 1x,pc@2x.jpg 2x">
<source media="(max-width:750px)" srcset="sp.jpg 1x,sp@2x.jpg 2x">
<img src="pc.jpg" alt="">
</picture>
画像の切り替えだけでなく、テキストの改行位置もPCとSPをで変更したいという方はこちらの記事も参考にしてみてください。
PCのみ改行・タブレットのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】
web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！
