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も併用することを忘れずに！