AVIF とは？フォーマットの特徴から実際の圧縮率まで解説

2024年2月27日 カテゴリ - サイトスピード

AVIF（エーブイアイエフ）は、「AV1 Image File Format」の略で圧縮率の高い画像フォーマットです。

AVIF は次世代画像フォーマットのひとつで、PNG や JPEG と比べてファイルサイズが小さいです。
しかし、実際に PNG や JPEG を変換するとどれくらい圧縮ができるか気になる方もいるのではないでしょうか。

この記事では、AVIF のフォーマットの特徴から実際の圧縮率まで解説します。

AVIF とは

AVIF は、Alliance for Open Media（AOMedia）によって開発された新しい画像フォーマットです。

Alliance for Open Media は、Google、Amazon、Netflix、Intel、Microsoft などの企業や団体が協力して、より効率的でデータ節約のできるビデオや画像の開発を目的とした非営利団体です。

PNG や JPEG を AVIF に変換すると、高画質を保ちつつファイルサイズを50%以上軽量化できるとされています。

AVIF の特徴

AVIF は以下の5つの特徴があります。

・圧縮率が高い
・透過処理が可能
・可逆圧縮と非可逆圧縮に対応
・アニメーションに対応
・HDR に対応

圧縮率が高い

AVIF は前述した PNG や JPEG 、さらには同じ次世代画像フォーマットである WebP と比べても圧縮率が高いです。

AVIF は高度な圧縮アルゴリズムである AV1 ビデオコーデックを使用しています。
AV1 ビデオコーデックは、高品質なビデオを低いビットレートで圧縮できることで知られています。
この圧縮アルゴリズムを静止画像に適用することで、AVIF は WebP よりも高い圧縮率を実現しています。

圧縮率が高いことは画像の軽量化につながり、 SEO 対策で重要なページの表示速度の改善に役立ちます。

透過処理が可能

AVIF はアルファチャンネルを持つため、透過処理が可能です。
アルファチャンネルとは、画像に含まれるピクセルの透明度を表現します。

AVIF は、透過処理ができるため、ウェブページのロゴやアイコン、アプリケーションの UI デザインなどで表現の幅が広がります。

可逆圧縮と非可逆圧縮に対応

AVIF は可逆圧縮と非可逆圧縮の両方に対応しています。
可逆圧縮と非可逆圧縮を選択できることにより、ユーザーは画像の品質とファイルサイズのバランスを取ることができ、さまざまな用途に応じた画像ファイルを作成することができます。

画像の圧縮方式について詳しく知りたい方は以下をご覧ください。
【参考】サイトの表示速度の改善に影響を与える画像軽量化
https://fastest.jp/blog/image-compression/

アニメーションに対応

AVIF は複数の静止画を1つのファイルに組み込むことでアニメーションの作成が可能です。
AVIF は同じアニメーションに対応している GIF と比べて小さなファイルサイズで高品質のアニメーションを作成することができます。

HDR に対応

HDR（High Dynamic Range）とは映像技術の一つです。
HDR は従来の SDR（Standard Dynamic Range）に比べて、より鮮やかでリアルな色彩を表現できます。

Netflix や U-NEXT などの動画配信サービスでは、HDR 対応の配信も増えています。

AVIF の注意点

AVIF は古いブラウザには対応していないものがあります。
主要なブラウザである Google Chrome や Safari は、AVIF に対応していますが、まだ全てのバージョンでサポートされているわけではありません。

非対応ブラウザの場合、picture タグ等を用いて、JPEG や PNG などの代替フォーマットの画像を表示させる必要があります。

【補足】picture タグを使って JPEG や PNG などの代替フォーマットの画像を表示させる方法

AVIF がサポートされていないブラウザを考慮する際には、JPEG や PNG が AVIF の代わりに表示されるよう HTML を調整しましょう。
以下のように HTML で記述することで、AVIF がサポートされている場合は AVIF を、サポートされていない場合は JPEG や PNG を表示できます。

<picture>

   <source srcset="./images/sample.avif" type="image/avif">

   <img src="./images/sample.png">

</picture>

なお、上記は記述の一例です。
実際に実装する場合には、各サイトに適した形で実装し、必ず検証を行ったうえで本番環境へ適用してください。

AVIF への実際の変換率を検証してみた

前章で「PNG や JPEG を AVIF に変換すると、ファイルサイズを50%以上軽量化できる」と解説しました。

実際に PNG や JPEG を AVIF に変換するとどれだけ軽量化できるのか検証してみました。
以下がその結果です。

PNG から AVIF への変換は PNG のファイルサイズに関係なく70%以上の軽量化が可能です。
一方で JPEG から AVIF への変換は JPEG のファイルサイズが小さい場合には大幅に圧縮はできませんが、500KB を超えるファイルサイズに対しては90%以上の軽量化が可能です。

どちらの画像フォーマットでも1,500KB 程度であれば AVIF に変換することで50KB 程度に圧縮ができることが分かりました。

AVIF への変換は一般的な認識以上にファイルの圧縮が可能です。

AVIF ファイルの Windows での開き方

この章では、Windows での AVIF ファイルの開き方を解説します。
手順は以下の通りです。

①保存した AVIF ファイルを選択し、「プログラムから開く」 > 「Microsoft Store を検索する」をクリックします。

②「AV1 Video Extension」を検索し、該当のアプリをインストールします。

「AV1 Video Extension」のインストールが完了すると、「フォト」で AVIF ファイルを開くことができます。

AVIF に変換できるツール

従来の画像フォーマットである JPEG や PNG 、GIF などから AVIF に変換できる主なツールは以下の4つです。

・FasTest（ファーステスト）
・Squoosh
・Convertio
・CloudConvert

FasTest

FasTest は、1クリックで既存のページの表示速度を改善できるツールです。
既存のページ内の画像を自動で AVIF に変換できます。
ページ単位で画像の変換ができるため、変換する際の画像のアップロードやダウンロード、HTML の書き換えの手間が省けます。
そのため、時間をかけずにページ内の画像フォーマットを AVIF に変換したい方におすすめです。

また、画像フォーマットの変換以外にもページの表示速度を改善するための多くの機能があります。
FasTest の主要な機能については以下をご覧ください。

【参考】FasTest｜ページスピード改善機能
https://fastest.jp/tools/

Squoosh

Squoosh は Google が開発した画像軽量化ツールです。
1枚ずつしか変換できませんが、AVIF への変換が簡単で圧縮前後の画質を比較しながら圧縮率の調整が行えるため便利です。
そのため、変換する画像が少なく圧縮率を自分で調整したい方におすすめです。

Convertio

Convertio はブラウザ上でファイルを変換できるツールです。
画像だけでなく、動画や音声など様々なファイルの変換が可能です。
そのため、様々なファイルを一つのツールで変換したい方におすすめです。
一方で、無料版には以下の3つの制限があるため注意が必要です。

・変換できる最大のファイルサイズは100 MB まで
・変換数は24時間当たり10ファイルまで
・同時に変換できるのは2ファイルまで

CloudConvert

CloudConvert はドイツのミュンヘンにある Lunaweb GmbH によって2012年よりサービスを開始したツールです。
画像ファイルだけでなくオーディオや動画ファイルなど200を超えるフォーマットの変換が可能です。
1日あたり25ファイルの変換が無料で行えるほか、パッケージやサブスクリプション形式の有料プランも存在します。

まとめ

この記事では、AVIF のフォーマットの特徴から実際の圧縮率まで解説しました。

AVIF は PNG や JPEG と比べて70〜90%程度圧縮できるため、SEO 対策の一つである画像軽量化に適しています。
しかし、AVIF に対応しているブラウザは増えているものの、古いブラウザには対応していないものがあります。
そのため、AVIF を使用する場合は、 AVIF に対応していないブラウザでも代替フォーマットで画像を表示できるように注意する必要があります。

現在使用している画像を AVIF に変換し、ページの表示速度を改善しましょう。

なお、記事中でもご紹介しましたが、当社ではページの表示速度の改善を1クリックで行えるランディングページ高速化ツール FasTest（ファーステスト） を開発・販売しています。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。