画像ファイルのフォーマットといえば、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形式のファイルを編集しようとすると次のように表示されます。
2024年4月現在最新のmacOS Sonomaでは、AVIFファイルの編集に対応していないようです。上記の通りTIFF形式で複製してリサイズすることは可能ですが、その後に再度AVIF形式に変換することを考えるとデメリットといえますね(後々編集可能になるかも)。
AVIF形式のファイルのサンプル
AVIF形式の画像をサンプルとして置いておきます。
色数の多い写真
容量はわずか25KBです。同じ画像でもJPEGの場合133KB。
透過画像(ロゴ)
こちらも容量はわずか14KB。同じロゴでもPNG形式の場合61KBでした。
AVIFに変換できる無料ツール
ダウンロードやアカウント登録などが不要で、ブラウザ上ですぐAVIFに変換できる無料ツールです。
Squoosh
Squooshは、Googleが開発したWebアプリでブラウザ上ですぐ使えます。画像をドラッグ&ドロップしてすぐに圧縮をスタートできて、圧縮前後のビフォーアフターが確認できる点が便利です。複数画像の一括変換はできません。こちらの記事で詳しく解説しています。
WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。 当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介して...
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に変換するのは大変です。そこで便利なのがこちらでご紹介しているプラグイン。
サイト軽量化の鍵となる画像のフォーマット(拡張子)。 JPGやPNGのほか、WebPなどの軽量なものも登場していますが、最新かつ最も軽量な「AVIF」というフォーマットがあります。 そこで今回は、WordPressサイトの画像をAVIFに変換するプラグイン「ShortPixel Imag...
無料版では枚数に制限がありますが、サイト内の画像をAVIF形式に一括変換可能です。変換前の画像との比較、バックアップ&復元機能もついていて便利です。
次世代拡張子をチェックしておこう
軽量で高画質な次世代拡張子AVIFについてご紹介いたしました。
総合的に大きなデメリットはなく、従来の拡張子のいいとこ取りを実現したようなフォーマットです。WordPressで利用する場合は、サーバーやテーマ、プラグイン側が完全対応してからでも遅くはなさそうです。
90年代に生まれた従来の拡張子はレガシーとなり、次世代拡張子が主流になるかもしれません。2024年4月現在はAVIFが最新ですが、今後もより優れた技術が登場する可能性は十分あります。常に最新情報をチェックしておくのがいいですね。
最新情報はこういったアカウントをフォローして収集するのもオススメです。
SEOに精通した方のTwitter(X)アカウントが数多くあるにも関わらず、海外に限定したSEOアカウントのまとめ記事がほとんどないので、記事にしてみました。 SEO界隈の最新情報や動向は、基本的に英語で発信されています。海外Twitter(X)アカウント・ WEBサイトは英語がわからなくても...
画像フォーマット(拡張子)に関連する記事
WEBで使う画像ファイルには、複数の種類があります。 同じ画像ファイルでも、複数のファイル形式があり、「.jpeg」などの拡張子と呼ばれる文字列で判別できるようになっています。 当記事では、そんな画像ファイルの拡張子について、種類別の違いや特性をご紹介いたします。 拡張子とは ...
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
コメント