ポイント
- 画像は容量が大きい
- PNG・JPEG・WebP・AVIF の 画像形式 を比較
- 現状は WebP が良い
目的：画像を早く表示する
ブログサイトの表示を高速化する。
画像は容量が大きく、当該サイトのデータ転送量の８割以上を占めている。
ファイル形式による、容量と画質の違いを検証する。
対象：PNG・JPEG・WebP・AVIF
| 登場 | 圧縮 | 圧縮率 | 透過 | |
|---|---|---|---|---|
| JPEG | 1994 年 | 非可逆 | ◯ | ✕ |
| PNG | 1996 年 | 可逆 | △ | ◯ |
| WebP | 2010 年 | 両方 | ◎ | ◯ |
| AVIF | 2020 年 | 両方 | ◎◎ | ◯ |
AVIF は、主要なブラウザの最新版はほぼ対応している
参考：caniuse.com サイト
検証結果
データ量
可逆圧縮と非可逆圧縮でデータ量に大きな違い がある。
WebP より AVIF の方がデータ量が小さい。
画質：PNG → WebP（可逆）
PNG 275 KB と WebP（可逆） 222 KB
可逆圧縮なので、もちろん劣化していない。容量は 20% ほど削減できる。
PNG → JPEG（非可逆）→ WebP（非可逆）
PNG を JPEG に圧縮し、さらにそれを WebP に変換する。
JPEG の圧縮率は Google 推奨の 85 で行っている。
JEPG 34.6 KB と WebP（非可逆） 27.2 KB
JPEG は、よく見ると元の PNG より山の稜線や空の色味が劣化している。
WebP は JPEG よりさらに圧縮できるが、違いはわからない。
PNG → AVIF（可逆）、PNG → AVIF（非可逆）
Qiita では AVIF を入力できない！ ので、画像を見たい方は、元のブログ記事を参照してください。
高解像度画像
最近は、1点 に２～３倍の解像度で表示させる高解像度の機種が主流になっている。
画質を求めるなら、最適なレベルまで圧縮した画像を高解像度で配信するのが正解。
上：WebP（非可逆） 27.2 KB 下：２倍解像度 800 × 800 106.8 KB
ただし、データ量は解像度に比例して大きくなるので、バランスが悩ましい。
結論：現状は WebP が良い
データ量のグラフ（再掲）
可逆圧縮と非可逆圧縮で、データ量に大きな違い がある。
WebP は PNG と JEPG より小さい。
AVIF は WebP より小さい。
AVIF はブラウザはほぼ対応しているが、Qiita を含む一部の Webサービス は対応していない。
現状は WebP が無難。
次の記事
オリジナルの記事