今回は、前回のレスポンシブ対応｜HTMLだけで、PC画像とSP画像を切り替える方法の続きで、pictureタグを使用してwebp画像の設定と、Retinaディスプレイ対応の設定をしていきたいと思います。
圧縮率の高い画像webp（ウェッピー）は、他の形式の画像より軽量なため、画像が複数あるサイトなどでは読み込みが早くなるメリットがあります。ただ、ブラウザによっては対応していないものもあるため、pictureタグを使用して画像を切り替えする必要が出てきます。
設定は簡単です。切り替えのコードは以下になります。
<picture>
<!-- wbep画像の表示設定 -->
<source srcset="wbep画像パス" type="image/webp">
<!-- wbep画像の表示がされなかった場合の設定 -->
<img src="wbep以外の画像パス" alt="">
</picture>Retinaディスプレイは高解像度でハイコントラストな色彩表現を可能としたディスプレイで、MacやiPhone、iPadに搭載された機種があります。通常の画像ではぼやけてしまう可能性もあるため、pictureタグを使用して通常の画像と高画質画像の切り替えをしていきます。
設定は以下です。
<picture>
<source srcset="通常の画像パス 1x,高画質の画像パス 2x" media="(min-width: 1200px)">
<source srcset="通常の画像パス 1x,高画質の画像パス 2x" media="(min-width: 768px)">
<img src="上記条件が表示されなかった為の画像パス" alt="">
</picture>
