【初心者向け】ブラウザに合わせて.webp画像を切り替える方法

2023.12.12

URLをコピーしました！

.webpのメリットがわからない
HTMLで.webpの切り替え方がわからない
CSSで.webpの切り替え方がわからない

このような悩みにお答えします。

コーディング案件で.webp対応を求められることもあるかと思います。
WordPressであればプラグインを使用することで簡単に実装できますが、静的コーディングの場合は自分で設定しなければいけません。

この記事では、静的コーディングで.webp対応する方法を具体的なコードも紹介しながら解説していきます。

この記事を読むことで、静的コーディングでも迷うことなく.webp対応を簡単に実装できるようになります。

この記事を書いた人

すずき

フリーランスでwebデザイナーをしています。
デザインからコーディング、運用まで幅広く対応しています。
3年間で50件以上のサイトをコーディングしてきました。

結論のコード

時間のない方の為に先にコードを解説します。

<img>タグの場合は<picture>タグを使うことで簡単に切り替えることができます。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="説明文">
</picture>

CSSのbackground-imageの場合、@supportを使用することで切り替えることができます。

.background {
  background-image: url('image.png');
}

@supports (background-image: url('image.webp')) {
  .background {
    background-image: url('image.webp');
  }
}

、JPEGやPNGに比べて圧縮率が高く、品質の低下が少ないのが特徴です。
これにより、同じ画像をより小さなサイズで表示することができ、ページの読み込み速度を向上させることができます。

しかし、.webpはまだ全てのブラウザでサポートされていません。
なので.webpをサポートしていないブラウザに対しては、.pngや.jpgなどで切り替え表示する必要があります。
これにより、どのブラウザを使用していてもユーザーに最適な画像を表示することができます。

`.webp`とは？

.webpはGoogleが開発した画像フォーマットで、以下のような特徴があります。

圧縮率が高く、ファイルサイズが軽い
.pngのように投下した画像にも対応
.gifのようにアニメーション画像にも対応

1番のメリットはファイルサイズが軽いということで、ページの読み込み速度が早くなります。

しかし、古いバージョンのブラウザでは、一部サポートされていません。
最新の対応状況は、下記サイトで確認することができます。

HTMLで`.webp`画像を出し分ける方法

HTMLでは、<img>タグの代わりに<picture>タグを使用することで出し分けできます。
<picture>タグは、複数の画像ソースを提供し、ブラウザが最適なものを選択して表示するためのHTML要素です。

<picture>タグ内には一つ以上の<source>タグと、<img>タグを配置します。
<source>要素には、.webpを指定します。

具体的には、以下のコードです。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="説明文">
</picture>

これでブラウザが.webpをサポートしている場合はimage.webpが表示され、サポートしていない場合はimage.pngが表示されます。

CSSで`.webp`画像を出し分ける方法

CSSでは@supportsルールを使用すると、ブラウザの状況に応じてプロパティを出し分けることができます。

具体的には、以下のコードで実装できます。

.background {
  background-image: url('image.png');
}

@supports (background-image: url('image.webp')) {
  .background {
    background-image: url('image.webp');
  }
}

これでブラウザが.webpをサポートしている場合にのみ、背景画像を.webpに切り替えることができます。