WebP と AVIF ファイルの自動生成サービス
IMAGE2Webp (opens new window) は次世代画像フォーマットのWebPとAVIF画像を生成するためのWEBサービスとなります 😀
# Samples
TIP
非対応ブラウザではWebPやAVIFが見えない場合があります。
# JPEG
Original JPEG (279KB)
WebP (80KB) Compressed to about 28%
AVIF (186KB) Compressed to about 66%
TIP
多くの場合、AVIFはWebPよりも軽い、と表現されますが、実際に試してみたところ、WebPのほうが軽くなるケースも少なくないように思いました。特に大きいサイズのJPEGでそのようなことになる場合が多いようです。
# PNG
Original PNG (20KB)
WebP (12KB) Compressed to about 60%
AVIF (4KB) Compressed to about 20%
# WebPとは何か
WebpはGoogleが開発した画像フォーマットで、画像の質を落とさずに高い圧縮率を実現します。2011年のGoogleの調査によれば、PNGからWebPへの変換でおおよそ45%のファイル容量が削減されたとのことです。WebPを利用することでユーザーエクスペリエンスの向上とサーバー負荷の軽減が見込まれます。
ただ、比較的新しいフォーマットで古いブラウザなどではサポートされていないため、実際にWEBサイトにwebpを設置する際にはpngやjpegなどと一緒に設置する必要があります。
# AVIFとは何か
AVIFはAV1 Image File Formatの略称で、AV1という形式で圧縮された画像をHEIFというファイル形式で保存する画像フォーマットです。多くの場合、AVIFはWebP以上の圧縮効果を期待できますが、対応しているブラウザが少なく、また、AVIFへの変換が可能なサービスやプログラムも少ないのが現状です。そのため、WEBサイトでAVIFを設置する際はpngやjpegなどと一緒に設置する必要があります。
# 実際にどのくらい軽くなるのか
実際にどのくらい軽くなるのかはIMAGE2Webp (opens new window)で試してみることができますが、私が色々と試している限りではWebPやAVIF共に元の画像の半分以下に圧縮されることが多いように思います。画像が大幅に軽くなるため、サーバーの負荷を軽減したり、より高いパフォーマンスを発揮することができます。
# ベストプラクティス
前述の通り、WebPとAVIFをサポートしていないブラウザが存在し、かつAVIFやWebPはPNG/JPEG/GIFよりも高い圧縮率を持っていますので、下記のような書き方がベストプラクティスとなります。
- ブラウザがAVIFをサポートしていればAVIF画像を表示する。
- ブラウザがWebPをサポートしていればWebP画像を表示する。
- どちらもサポートされていなければ、従来のPNG/JPEG/GIF画像を表示する
上記のようにするには下記のようなHTMLコードを記載します。
<picture>
<source srcset="/path/to/AVIF" type="image/avif" />
<source srcset="/path/to/WebP" type="image/webp" />
<img src="/path/to/PNG_or_JPEG" alt="" width="..." height="..." />
</picture>
2
3
4
5
6
7