株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • HTMLだけで、PC画像とSP画像を切り替える方法(webp画像の設定とRetinaディスプレイ対応の設定)
2023年4月6日
HTMLだけで、PC画像とSP画像を切り替える方法(webp画像の設定とRetinaディスプレイ対応の設定)

今回は、前回のレスポンシブ対応|HTMLだけで、PC画像とSP画像を切り替える方法の続きで、pictureタグを使用してwebp画像の設定と、Retinaディスプレイ対応の設定をしていきたいと思います。

webp画像の設定

圧縮率の高い画像webp(ウェッピー)は、他の形式の画像より軽量なため、画像が複数あるサイトなどでは読み込みが早くなるメリットがあります。ただ、ブラウザによっては対応していないものもあるため、pictureタグを使用して画像を切り替えする必要が出てきます。

設定は簡単です。切り替えのコードは以下になります。

<picture>
    <!-- wbep画像の表示設定 -->
    <source srcset="wbep画像パス" type="image/webp">
     <!-- wbep画像の表示がされなかった場合の設定 -->
    <img src="wbep以外の画像パス"  alt="">
  </picture>
wbep画像の表示設定は必ず、sourceタグのtype属性に”image/webp”を入れてください。
そして、最後にwbep画像に対応していないブラウザのために、imgタグを設定してください。

Retinaディスプレイ対応の設定

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>
sourceタグのsrcset属性は、[,]で区切り、複数の画像を指定することができます。srcset属性に画像のパスを入れ(画像は通常の画像と高画質で書き出した画像それぞれ用意してください)、その後ろに通常は[1x]、高画質は[2x]と記述します。これによりMacやiPhoneでは高画質の画像が表示され、それ以外は通常の画像を表示してくれるようになります。
Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする