【HTML/CSS】対応ブラウザでWebp画像が表示される、画像の切り替え方法

こんにちは、ぬいぬい(@opitech_web)です！

最近ぐっと使われることが多くなってきた、Webp（ウェッピー）。

Webp（ウェッピー）は、2010年にGoogleが開発した次世代画像フォーマットです。
画像サイズが軽いので、サイト表示速度の改善にもつながるのが特徴です。

今回は、対応しているブラウザではWebp画像が表示されるよう、画像の切り替えを実装する方法を紹介します！

①HTMLで切り替え設定する場合

HTMLへの記述方法

HTMLの場合は、<picture>タグの中に<source>と<img>を用いることで出しわけが可能です。
※srcset、またはsrcには画像の置き場所を指定してください

<picture>
  <source type="image/webp" srcset="../images/***.webp" alt="">
  <img src="../images/***.jpg" alt="">
</picture>

<source>タグは複数記述することが可能ですが、
上から順番に読み込むので、上で指示した画像が優先されて表示され、
対応していない場合は下で指定した画像となります。

このコードだと、.webpに対応していない場合、通常の.jpg画像が表示されるということですね。

ぬいぬい

ちなみに、pictureタグを使用して
レスポンシブに画像の切り替えも可能です

レスポンシブに画像の切り替えをする

PCサイズの時と、モバイルサイズの時で別々の画像を表示したいときは
以下のように記述することで画像の切り替えができます。
※srcset、またはsrcには画像の置き場所を指定してください

<picture>
  <!-- ブラウザ幅~768pxまで表示される -->
　<source srcset="../images/***_sp.webp" media="(max-width: 768px)" type="image/webp">
　<source srcset="../images/***_sp.jpg" media="(max-width: 768px)" type="image/jpg">
  <!-- ブラウザ幅769px~表示される -->
  <source type="image/webp" srcset="../images/***.webp" type="image/webp" alt="" >
  <img src="../images/***.jpg" type="image/jpg" alt="">
</picture>

②CSSで切り替え設定する場合

CSSでは、＠supportsを使用して画像の出しわけを行います。

＠supportsは、指定したプロパティやプロパティと値の組み合わせがブラウザに対応されているかどうかをチェックするCSSの機能です。

そのため、対応しているブラウザでは軽量画像に切り替えたり、ということが可能になります。

ぬいぬい

使用頻度が少ないセレクタを使う場合は、
まずは、ブラウザの対応状況を確認しておきましょう。

ブラウザの対応状況を確認

既にサポートが終了しているIEを除けば、他のブラウザではほぼ対応してそうですね。（2024年2月25日現在）

CSSへの記述方法

cssではbackground-imageで画像を表示する記述をした後に、
@supportsで対応ブラウザでは.webp画像を表示するように指示していきます。

<!--.imgクラスの中に画像を表示させたい場合  -->
<div class="img"></div>

.img {
  background-image: url(../images/***.png);
}

@supports (background-image: url(../images/***.webp)) {
  .img {
    background-image: url(../images/***.webp);
  }
}

これで完成です。機能を知っていれば、思ったより簡単に実装が可能ですね。

まとめ

.webpはとても軽量なので、ページの読み込み速度を向上させるためにも
積極的に取り入れていきたい要素です！

よければ参考にしてください。