画像ファイルのフォーマットといえば、JPEGやPNGなどが思い浮かびますが、これらはいずれも90年代に生まれたものです。

そこから20年後の2010年にはWebP、2019年にはAVIFという次世代拡張子が登場しました。軽量かつ高画質な拡張子です。Web上に画像をアップする際は、軽量であることに越したことはありません。

というわけで当記事では、画像ファイルを効率的に圧縮できる拡張子「AVIF」についてご紹介いたします。

AVIFとは

AVIFとは、WebPを含む従来のどの画像フォーマットよりも軽量かつ高画質な拡張子です。

AmazonやGoogle、Netflixなどが参加している非営利団体Alliance for Open Mediaによって開発されました。動画フォーマットの開発を目的とした組織で、動画の圧縮技術を画像フォーマットに応用してつくられているようです。

2019年に登場し、全ての主要ブラウザでサポートされています。普及に10年以上かかったWebPと比べると、普及率が早いですね。

メリット

  • 軽量で高画質(JPEGからは約80%、WebPからは約30%も容量を削減可)
  • GIFのようなアニメーションに対応
  • PNGのような透過処理も可能
  • 可逆圧縮と非可逆圧縮の両方に対応
  • HDRカラーに対応(深度や色域の表現が豊か)

従来の拡張子よりも最も軽量かつ高画質という点が最大のメリットですね。しかも他の拡張子でできることがすべて可能です。

    デメリット

    現状のデメリットは、これぐらいでしょうか。

    • エンコード(変換)に時間がかかる
    • Macのプレビューではリサイズ不可
    • 普及途中のため対応していないツールやサービスがある

    体感ですが、従来のJPGなどからWebPに変換するよりも、AVIFに変換する方が遅いです。大量に一括変換するとなると、結構な時間がかかりそうです。

    とはいえ、今すぐ大量の変換が必要なケースはあまりなく、リアルタイムでエンコードが必要な特殊なケース等を除き、致命的なデメリットにはならないでしょう。

    それよりも筆者が検証時に気になったのは、Macでリサイズができない点です。

    JPEGやPNGなどは、プレビューから簡単にリサイズできるのですが、AVIF形式のファイルを編集しようとすると次のように表示されます。

    Macプレビューでリサイズできない画面例

    2024年4月現在最新のmacOS Sonomaでは、AVIFファイルの編集に対応していないようです。上記の通りTIFF形式で複製してリサイズすることは可能ですが、その後に再度AVIF形式に変換することを考えるとデメリットといえますね(後々編集可能になるかも)。

    AVIF形式のファイルのサンプル

    AVIF形式の画像をサンプルとして置いておきます。

    色数の多い写真

    容量はわずか25KBです。同じ画像でもJPEGの場合133KB。

    透過画像(ロゴ)

    こちらも容量はわずか14KB。同じロゴでもPNG形式の場合61KBでした。

    AVIFに変換できる無料ツール

    ダウンロードやアカウント登録などが不要で、ブラウザ上ですぐAVIFに変換できる無料ツールです。

    Squoosh

    Squoosh

    Squoosh

    Squooshは、Googleが開発したWebアプリでブラウザ上ですぐ使えます。画像をドラッグ&ドロップしてすぐに圧縮をスタートできて、圧縮前後のビフォーアフターが確認できる点が便利です。複数画像の一括変換はできません。こちらの記事で詳しく解説しています。

    Convertio

    Convertio

    Convertio

    Convertioも、ブラウザ上で簡単にAVIF形式に変換できます。ファイルをドラッグ&ドロップして、変換形式でAVIFを指定するだけです。また、複数枚の画像の一括変換も可能です。アップしたファイルは24時間で削除され、セキュリティ面も安心できそうです。※無料版では最大100MB/1日までという制限があります。

    このような無料ツールを使って、AVIF形式のファイルをテストしてみてください。

    AVIFをWordPressで使うには?

    WordPress 6.5 からは、AVIF形式のファイルに対応しています。
    >> AVIF形式のファイルに対応|WordPress 6.5「レジーナ」でアップデートされた新機能を解説

    AVIF形式のファイルについて、WordPressで取り扱う2つの方法をご紹介いたします。

    ダッシュボード > メディアからアップロードする

    AVIFに変換した画像ファイルは、従来の拡張子と同様に、メディアライブラリにドラッグ&ドロップでアップロードできます。

    WordPress 6.5 に更新済みにも関わらず、以下のようなエラーが発生する場合は、ブラウザーアップローダーからトライしてみてください。

    アップロードできないエラー

    ブラウザーアップローダーは、ダッシュボードの左側から「新しいメディアファイルを追加」を押して試せます。ここからならAVIFファイルをアップロードできるはずです。

    ブラウザーファイルアップローダー

    WordPress側で対応していてもサーバー側に準拠するようですので、サーバーが未対応の場合は、デフォルトのメディアアップローダーからはアップできないようです。

    AVIFに変換できるプラグインを使う

    すでに運営中のWordPressサイトで、すべての画像をAVIFに変換するのは大変です。そこで便利なのがこちらでご紹介しているプラグイン。

    無料版では枚数に制限がありますが、サイト内の画像をAVIF形式に一括変換可能です。変換前の画像との比較、バックアップ&復元機能もついていて便利です。

    次世代拡張子をチェックしておこう

    軽量で高画質な次世代拡張子AVIFについてご紹介いたしました。

    総合的に大きなデメリットはなく、従来の拡張子のいいとこ取りを実現したようなフォーマットです。WordPressで利用する場合は、サーバーやテーマ、プラグイン側が完全対応してからでも遅くはなさそうです。

    90年代に生まれた従来の拡張子はレガシーとなり、次世代拡張子が主流になるかもしれません。2024年4月現在はAVIFが最新ですが、今後もより優れた技術が登場する可能性は十分あります。常に最新情報をチェックしておくのがいいですね。

    最新情報はこういったアカウントをフォローして収集するのもオススメです。

    画像フォーマット(拡張子)に関連する記事