ウェブサイトの高速化は、ユーザーエクスペリエンスの向上だけでなく、SEO（検索エンジン最適化）にも重要な要素です。その中で、画像ファイルの最適化は大きな効果を発揮します。近年、注目を集めているのが次世代画像フォーマット「AVIF（エイブイアイエフ）」です。この記事では、AVIFの概要、メリット・デメリット、対応ブラウザ、使い方などを詳しく解説します。
AVIFとは？
AVIFは「AV1 Image File Format」の略で、動画圧縮技術であるAV1をベースに開発された静止画向けの画像フォーマットです。従来のJPEGやPNG、WebPなどと比較して、高画質を保ちながらファイルサイズを大幅に削減できるのが最大の特徴です。拡張子は「.avif」です。
AVIFのメリット
- 高い圧縮率: 同じ画質であれば、JPEGよりも大幅にファイルサイズを小さくできます。WebPと比較しても、さらに高い圧縮率を実現できる場合があります。これにより、ウェブページの読み込み速度を向上させ、ユーザーエクスペリエンスを改善できます。
- 高画質: 同じファイルサイズであれば、JPEGなどよりも高画質な画像を提供できます。高解像度ディスプレイでも鮮明な画像を表示できます。
- 透過（アルファチャンネル）に対応: PNGと同様に、背景を透過させた画像を作成できます。ロゴやアイコンなどに最適です。
- アニメーションに対応（一部ブラウザのみ）: アニメーションGIFのように、複数の画像を組み合わせてアニメーションを表示できます。ただし、現時点ではFirefoxは静止画のみの対応です。
- HDR（ハイダイナミックレンジ）に対応: より広い色域と輝度を表現できます。
AVIFのデメリット
- エンコードに時間がかかる場合がある: 高度な圧縮アルゴリズムを使用しているため、JPEGなどに比べてエンコード（変換）に時間がかかる場合があります。
- 一部ブラウザの対応状況: 主要ブラウザは対応していますが、Safariはまだネイティブ対応していません。ただし、
<picture>タグで代替画像を提供することで対応可能です。 - Firefoxは静止画のみ対応: アニメーションAVIFは表示できません。
AVIFの対応ブラウザ
主要なモダンブラウザはAVIFに対応しています。
- Google Chrome: ほぼ全てのバージョンで対応。
- Mozilla Firefox: 静止画のみ対応。
- Opera: 対応。
- Microsoft Edge: 対応。
- Safari: まだネイティブ対応していません（macOS Ventura以降のSafari Technology Previewでは試験的なサポートあり）。
AVIFの使い方
ウェブサイトでAVIFを使用する場合は、<picture>タグを使って代替画像を提供することが推奨されます。
このコードは、
- AVIF対応ブラウザは
image.avifを表示。 - WebP対応ブラウザは
image.webpを表示。 - どちらにも非対応のブラウザは
image.jpgを表示。
という動作になります。
avifencの使い方 (Windows環境を含む)
AVIFファイルを作成するには、libavifに含まれるavifencというコマンドラインツールを使用します。
基本的なコマンド:
avifenc [オプション] 入力ファイル 出力ファイル
avifenc input.png output.avif
avifenc -q 50 input.jpg output.avif // 品質50で変換
avifenc -s 8 input.png output.avif // 速度8で変換
avifenc -q 60 -s 4 input.jpg output.avif // 品質60、速度4で変換
Windows環境では、libavifをビルドするか、FFmpegなどに含まれるビルド済みバイナリを入手する必要があります。詳細は過去の回答を参照してください。まとめ
AVIFは高画質・低ファイルサイズを実現する次世代画像フォーマットです。主要ブラウザの対応が進み、<picture>タグによるフォールバックも確立されたことで、ウェブサイトで安心して利用できるようになりました。ウェブサイトの高速化やデータ量の削減に貢献するAVIFを、ぜひ活用してみてください。