WebP よりも軽量化できる AVIF とは？フォーマットの特徴や AVIF に変換できるツールを解説

2023年4月17日 カテゴリ - サイトスピード

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

圧縮率の高い画像フォーマットには WebP（ウェッピー）がありますが、AVIF は WebP と比べても圧縮率が高いです。
そのため、Web サイトの表示速度を改善し、ユーザー体験を向上させることができます。

この記事では、AVIF の概要から変換方法まで解説します。

また、WebP について詳しく知りたい方は以下をご覧ください。
【参考】次世代の画像フォーマット WebP とは？メリットや変換方法を解説
https://fastest.jp/blog/webp

AVIF とは

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

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

この章では、AVIF の概要と特徴、従来の画像フォーマットとの違いについて解説します。

AVIF の概要

AVIF は高画質を保ちつつファイルサイズを小さくすることができます。
JPEG と比べて約50%、AVIF と同じく軽量化に使用される WebP よりも30%軽量化できるといわれています。

AVIF の特徴

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

・圧縮率が高い
・透過処理が可能
・可逆圧縮と非可逆圧縮に対応
・アニメーションに対応
・HDRに対応
・対応しているブラウザが少ない

圧縮率が高い

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

圧縮率が高いことは画像の軽量化につながり、 SEO 対策で重要なサイトの表示速度の改善に役立ちます。
そのため、AVIF を利用することが重要です。

透過処理が可能

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

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

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

AVIF は可逆圧縮と非可逆圧縮の両方に対応しています。

可逆圧縮を選択する場合は、圧縮された画像を元の画像に戻すことができます。
一方で非可逆圧縮を選択する場合は、可逆圧縮よりも軽量化ができますが、画像が少し荒くなってしまいます。

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

アニメーションに対応

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

HDRに対応

HDR（High Dynamic Range）とは映像技術の一つです。
HDR は従来の SDR（Standard Dynamic Range）に比べてより高い明暗差や色域を表現することができます。

AVIF は HDR に対応しているため、鮮明で没入感のある表現が可能です。

対応しているブラウザが少ない

2023年4月時点で WebP と比べると 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 に変換できるツール3選

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

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

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ファイルまで

そのため、様々なファイルを一つのツールで変換したい方におすすめです。
ただし、無料版は制限があるため注意が必要です。

まとめ

本記事では、圧縮率の高い新しい画像フォーマットである AVIF について解説しました。

AVIF は圧縮率が高く、SEO 対策の一つである画像軽量化に適しています。
また、同じ画像軽量化に使用される WebP と比べても圧縮率が高いです。
しかし、AVIF は比較的新しい画像フォーマットであるため、対応しているブラウザは少ないです。
そのため、AVIF を使用する場合は、 AVIF に対応していないブラウザでも代替フォーマットで画像を表示できるように注意する必要があります。

現在サイトで JPEG や PNG などの従来の画像フォーマットを使用しているようでしたら、上記のことに気を付けて AVIF に変換しましょう。

なお、記事中でもご紹介しましたが、当社では、既存のサイト上の画像を1クリックで AVIF に変換できるウェブサイト高速化ツール FasTest を開発・販売しております。
画像の軽量化だけでなく、誰でも簡単にページの表示速度を高速化できます。
無料トライアルも実施しておりますので、ご興味のある方はぜひお気軽にお問い合わせください。