WebPって何？

WebPは、Googleが開発した画像フォーマットです。
従来のJPEGやPNGよりもファイルサイズが小さいのが特徴で、Webページの読み込みを速くするためによく使われます。

WebPのポイント

画像が軽くなる
WebPを使うと、画像のファイルサイズを小さくできます。これにより、Webサイトが速く表示され、モバイルデータの節約にもなります。
透明な画像もOK
WebPは、PNGのように透過画像にも対応しています。透明なロゴやアイコンも使いやすいです。
アニメーションもできる
GIFのような動く画像（アニメーション）もWebPで作れますが、WebPのほうがファイルサイズが小さいので、Webサイトの表示がさらに速くなります。

WebPの使い方

1. どのブラウザで使えるの？

以下のブラウザでWebPが使えます：

Google Chrome（バージョン17以降）
Firefox（バージョン65以降）
Safari（バージョン14以降）
Edge（バージョン18以降）

2. WebPへの変換方法

WebPに変換するには、以下の方法が便利です：

オンラインツール: Squooshなどを使うと、簡単にWebPに変換できます。

WebPの注意点

1. 古いブラウザでは見られないかも

WebPは、古いブラウザでは表示できません。
そのため、JPEGやPNGをフォールバックとして用意しておくことが大切です。

※フォールバックとは？

フォールバックとは、ブラウザが特定のフォーマットに対応していない場合に、別のフォーマットを表示する仕組みです。
例えば、WebPに対応していないブラウザでは、JPEGやPNGを用意することで、画像が正しく表示されます。

フォールバックの実装例：

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

他の画像フォーマットとの比較も参考までに📝

形式	特徴	ファイルサイズ	透明性対応	アニメーション対応
WebP	高圧縮率、画質維持	最小	対応	対応
JPEG	写真向け、非可逆圧縮	中程度	非対応	非対応
PNG	透過画像対応、可逆圧縮	大きい	対応	非対応
GIF	アニメーション画像向け	大きい	対応	対応

まとめ

WebPは、小さなファイルサイズで高画質の画像を表示できる便利なフォーマットです。
Webサイトの表示速度を速くし、モバイルデータの節約にも役立ちます。
互換性のために、JPEGやPNGも併用することを忘れずに！

参考資料