WebP と AVIF はどちらを使うべき?

AVIF は WebP より 10〜20% 小さいファイルを生成しますが、エンコードが遅く、ブラウザ対応も狭いです(Safari は 16.4 未満)。WebP はモダンブラウザで広くサポートされています。AVIF に WebP フォールバック(picture 要素)を組み合わせましょう: 。簡潔さを優先するなら WebP 単体です。

品質レベルはどう選ぶの?

写真なら、80〜85 で視覚的にロスレスになり、品質 100 より 50〜70% 小さくなります。文字や鋭いエッジを含むグラフィックなら、PNG(ロスレス)か品質 90 以上の WebP を使いましょう。必ず目視で比較してください。品質の数値はフォーマットやツール間で比較できません。比較ツールで、許容できる最低の品質を見つけましょう。

画像を圧縮・最適化する

適切なフォーマット(WebP/AVIF)の選択、品質調整、リサイズで画像のファイルサイズを削減します。ページの読み込み速度と Core Web Vitals を改善します。

1

画像の最適化:(1) フォーマット選択 — WebP(広い対応、JPEG より 30% 小)、AVIF(50% 小、新しい)、PNG(ロスレス、グラフィック向け)、JPEG(写真、レガシー)。(2) 品質設定 — 写真は 80〜85(視覚的にロスレス)、文字入りグラフィックは 90 以上。(3) 表示サイズへのリサイズ — 400px の表示に 4000px の画像を出荷しない。(4) 画面サイズごとのレスポンシブ画像(srcset)。(5) ファーストビューより下の画像の遅延読み込み。
2

画像圧縮ツール →
画像を圧縮します。出力フォーマット(WebP は広い対応、AVIF は最小サイズ)、品質レベル(写真は 80〜85)、必要に応じてリサイズを選択してください。ツールは圧縮前後のサイズと圧縮率を表示します。目安:ヒーロー画像は 100KB 未満、サムネイルは 50KB 未満。
3

画像フォーマットコンバーター →
圧縮なしでフォーマットを変換します。特定のフォーマットが必要だが品質を別途制御したい場合に便利です。写真の PNG は WebP に変換し、透過のあるグラフィックは PNG のままにします。JPEG を WebP に変換すると、サイズが 30% 減ります。
4

Base64 画像プレビュー →
圧縮した画像を base64 でプレビューします。HTML/CSS のインライン画像(data URI)や、圧縮結果の確認に便利です。注意:base64 はサイズを 33% 増やします。HTTP リクエストのオーバーヘッドが base64 の増加を上回る、小さな画像(4KB 未満)だけで使いましょう。

よくある質問

WebP と AVIF はどちらを使うべき?: AVIF は WebP より 10〜20% 小さいファイルを生成しますが、エンコードが遅く、ブラウザ対応も狭いです(Safari は 16.4 未満)。WebP はモダンブラウザで広くサポートされています。AVIF に WebP フォールバック(picture 要素)を組み合わせましょう:<picture><source type="image/avif"><source type="image/webp"><img></picture>。簡潔さを優先するなら WebP 単体です。
品質レベルはどう選ぶの?: 写真なら、80〜85 で視覚的にロスレスになり、品質 100 より 50〜70% 小さくなります。文字や鋭いエッジを含むグラフィックなら、PNG(ロスレス)か品質 90 以上の WebP を使いましょう。必ず目視で比較してください。品質の数値はフォーマットやツール間で比較できません。比較ツールで、許容できる最低の品質を見つけましょう。

よくある質問

関連ツール