AVIF画像フォーマット:完全初心者ガイド
AVIFとは何か、なぜ重要なのか、そして画像ファイルサイズを劇的に削減するために使い始める方法。
AVIFとは?
AVIF(AV1 Image File Format)はAV1ビデオコーデックに基づく次世代画像フォーマットで、Alliance for Open Media(Google、Netflix、Amazon、Apple、Microsoftがメンバー)によって開発されました。同等の視覚品質でJPEGより40–50%小さいファイルを実現 — WebPの25–35%を大幅に上回ります。
AVIFは非可逆・可逆圧縮、HDR、広色域、アルファ透明度、そしてアニメーションをサポートしています。現在Web利用で最も効率的な画像フォーマットです。
AVIF vs JPEG vs WebP:圧縮比較
実テスト:品質80での4000×3000風景写真:
| フォーマット | ファイルサイズ | JPEG比削減 | エンコード速度 |
|---|---|---|---|
| JPEG (q80) | 2.4 MB | — | Instant |
| WebP (q80) | 1.6 MB | −33% | ~100ms |
| AVIF (q80) | 1.1 MB | −54% | ~800ms |
AVIFは最小のファイルサイズを実現しますが、エンコードに時間がかかります。そのためリアルタイム変換よりも事前処理画像(ビルド時、バッチ変換、CMSアップロード)に最適です。
2025年 AVIFブラウザ対応
AVIFはすべての主要モダンブラウザでサポートされています:
- Chrome: Full support since v85 (2020)
- Firefox: Full support since v93 (2021)
- Safari: Full support since v16 (2022)
- Edge: Full support since v121 (2024)
- Opera: Full support since v71 (2020)
グローバルカバー率は現在92%+。残りのブラウザには<picture>要素でWebPとJPEGのフォールバックを提供。
フォールバック付きAVIFの使い方
AVIFをプライマリフォーマットとして、WebPとJPEGをプログレッシブフォールバックとして提供:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" width="1200" height="800" loading="lazy">
</picture>ブラウザは各<source>を順番に評価し、サポートする最初のフォーマットを選択します。これですべての訪問者が画像を見られます — そしてそのブラウザで処理できる最も効率的なフォーマットで。
AVIF vs WebP 使い分け
AVIFを選ぶ場面:
- 最小のファイルサイズを実現したい
- ビルド時やアップロード時に画像を事前処理する
- 帯域幅コストが大きな懸念(モバイルユーザー)
- ヒーロー画像や大型写真を最適化する
- ターゲットがモダンブラウザを使用
WebPを選ぶ場面:
- リアルタイム変換に高速エンコードが必要
- 最大のブラウザ互換性が重要
- CDNがオンザフライ画像変換を実行
- アニメーション画像が必要(WebPはアニメーション対応)
- 大量のEC商品画像を提供
AVIFとSEO
GoogleはCore Web Vitals最適化の一環としてAVIFなどのモダン画像フォーマットの使用を明示的に推奨しています。小さい画像ファイルはより高速なLargest Contentful Paint (LCP)につながり、直接ランキング要因となります。ヒーロー画像をJPEGからAVIFに切り替えたサイトは、モバイル接続で1–2秒の測定可能なLCP改善をしばしば確認しています。
さらに、高速なページは直帰率の低下とエンゲージメントの向上につながり — SEOパフォーマンスにさらに利益をもたらす間接的なシグナルです。
画像を無料でAVIFに変換
BulkPicConvを使えばブラウザ内で直接画像をAVIFに変換できます — アップロード不要、登録不要、ウォーターマークなし。画像をドロップしてAVIF出力フォーマットを選択、数秒で最適化ファイルをダウンロード。