画像圧縮の完全ガイド：JPEG vs PNG vs WebP vs AVIF

非圧縮画像がページ速度を台無しにする

ToolsKuの開発で数多くの画像問題に遭遇しました。5MBのPNGをプロフィール画像に使うケースや、iPhoneの「元画像」をそのままアップロードするケースなど。

4大フォーマット比較

特性	JPEG	PNG	WebP	AVIF
非可逆圧縮	✅ 最高	❌	✅ 良好	✅ 最高
可逆圧縮	❌	✅ 最高	✅ 良好	✅ 良好
透過	❌	✅	✅	✅
ブラウザ対応	100%	100%	97%	93%

実測データ

元PNG：4.2 MB

JPEG (品質90)  1.1 MB  視覚的に無損失
WebP (品質90)  680 KB  視覚的に無損失
AVIF (品質70)  250 KB  視覚的に無損失

クイック判断フロー

透過が必要？
├── はい → WebP または PNG
└── いいえ → 写真？
              ├── はい → WebP (品質85) + JPEGフォールバック
              └── いいえ → スクリーンショット？
                           ├── はい → PNG (8ビット)
                           └── いいえ → WebP (品質80)

ToolsKu画像圧縮で、ブラウザ内ですべての処理が完結します。