結論から言うと、理論上はAVIFが最も軽いとされていますが、今回の検証では6枚すべてWebPが最も軽い結果になりました。
どうもこんにちは！！プロカメラマンであり、このブログを運営してるひげおです！
最近はAIとの距離感に悩んでいます。
ひげおは20年以上、広告写真をメインに撮影する業界で働いてきました。
このシリーズは写真を始めてみたい！写真に興味を持ち始めた！撮影からレタッチまでやってみたい！そんな初心者さん向け、または写真に馴染みはないけどブログ運営で必要！と言う方に、ひげおが働きながら獲得した知識を紹介しています。
今日は次世代の話題頑張ってみます！！先日の『WebPとは何か？JPG・PNGとの違いと画像拡張子の基礎』の続きで次世代フォーマット「AVIF」についてです。
次世代の画像形式「AVIF」とは何か？
え〜〜読み方は正式には「エーブイアイエフ」だそうですが「エイビフ」と読んだり「アヴィフ」と読んだりまだ日本語ではちゃんと定まってない様子です。Aをエイって読むのはどうせアメリカだよね。ジェミニかジェミナイかみたいなものか・・・・
AVIFはAV1 Image File Formatの略です。
名前だけ聞くと何やら難しそうですが、「新しい画像ファイルの形式」です。2019年2月に正式リリースされました。かなり最近。
もともとAV1という動画の圧縮技術があって、その静止画版として生まれたのがAVIFです。動画技術が静止画に応用されたという珍しい出自の画像フォーマットです。
開発したのはAOM（Alliance for Open Media）という非営利団体。2015年に設立されて、Amazon・Cisco・Google・Intel・Microsoft・Mozilla・Netflixが最初から参加しています。現在はAppleやSamsung、Meta、Nvidiaなども加わっておりIT業界の主要企業がほぼ揃ってるという状況です。
そしてロイヤリティフリー（特許使用料が無料）のオープン規格なので、誰でも無償で使えます。これがブラウザや開発者に広く採用されてる理由の一つです。
前回の記事でWebPはGoogleが開発したとお伝えしましたが、AVIFはGoogleを含む業界横断の団体が開発したフォーマットです。より多くの企業が動いてるぶん、普及のスピードも速い印象です。
JPG・WebP・AVIFの違い比較表
前回の記事で紹介したWebPのおさらいも兼ねて、3つのフォーマットを並べてみます。
| JPG | WebP | AVIF | |
|---|---|---|---|
| 登場年 | 1992年 | 2010年 | 2019年 |
| 圧縮率（JPG比） | 基準 | 約25〜35%減 | 約50〜70%減 |
| 透過（アルファチャンネル） | ❌ | ✅ | ✅ |
| アニメーション | ❌ | ✅ | ✅ |
| HDR対応 | ❌ | ❌ | ✅ |
| 可逆圧縮（ロスレス） | ❌ | ✅ | ✅ |
| 主要ブラウザ対応 | 全対応 | 全対応 | 全対応（2024年〜） |
| エンコード速度 | 速い | 普通 | 遅め |
こう並べて見るとAVIFの圧縮率の高さが際立ちます。
JPGと比べて同じ画質で最大70%軽くなる可能性があるということ。これはWebPがJPGより軽くなった時と同じくらいのインパクト、いやそれ以上かも。
AVIFのメリット
とにかく軽い
AVIFの一番の武器はこれ。ブログは軽さが正義ですからね。
JPGと比べて同じ画質で条件によっては最大50〜70%のファイルサイズが軽くなるとされています。
WebPでも「こんなに軽くなるの！？」と感動しましたが、AVIFはその上をいきます。
前回の記事でWebPの165KBの作例を紹介しましたが、AVIFだとそれがさらに軽くなる可能性があります。
WebPと同じく透過・アニメーション対応
透過（背景を透明にできる）もアニメーションも対応。
JPGでは不可能だったこの2つがWebPで使えるようになり、AVIFでも引き続き使えます。
WebPからAVIFに乗り換えても機能面で後退はありません。
まるでPNGキラー、GIFキラー。
HDR対応
WebPには対応していなかったHDR（ハイダイナミックレンジ）にも対応。
AVIFはWebPより新しいぶん、スペックが一段上になっています。
今のところブログで直接活かせる機能ではありませんが、今後の可能性という意味では大きいです。
表示速度が上がるとSEOで優位になる？
画像が軽くなるとページの表示速度が上がります。
Googleはページの表示速度をSEOの評価基準のひとつにしているので、軽くするだけで検索順位に良い影響が出る可能性があります。
この話は前回のWebPの記事でもしましたね。
2024年8月にGoogleがAVIFを画像検索の対応フォーマットとして正式にサポートしました。
Google画像検索、Google Discover、Google Newsなど、Google検索で画像が使われるところ全てで使えるようになっています。
ただし「AVIFを使ったから検索順位が上がる」という直接的な効果はないとGoogleは言っています。
あくまで表示が速くなった結果としてSEOに好影響が出る、ということです。
AVIFのデメリット・注意点
いいことばかり書いてきましたが次は公平にデメリットも。
エンコードが遅い
AVIFに変換する処理（エンコード）がJPGやWebPと比べてかなり遅いです。
体感ではJPGやPNGをAVIFに変換する時間はWebPの2倍以上かかる感じです。
とは言え他のが0.5秒だったのが1秒になるとかそんなレベルです。
ブログ用に1枚ずつ書き出す分には気になるレベルではないけど、大量の画像を一括変換するような場面ではストレスになるかも。
PCで普通に開けないことがある
AVIFファイルをダウンロードしてPC上でダブルクリックしても、標準の画像ビューアでは開けないことがあります。
ブラウザ（Chrome、Firefox、Edge）では表示できるので、ブラウザにドラッグして開くか、対応したビューアを別途用意する必要があります。
ひげおも2023年にWebPで苦労した記憶があるけど、AVIFはそれ以上に対応が遅れている印象です。
古い環境では表示できない
MicrosoftのEdgeは2024年1月のアップデートでAVIF対応になり、主要ブラウザは全て対応済みになりました。
ただし古いバージョンのブラウザや古いOSでは表示できない場合があります。
読者に極端に古い環境の人が多いブログでは注意が必要です。
とはいえ現実問題として2025年時点でかなり気にしなくて良いレベルにはなってきています。
WordPressやサーバー環境に依存する
WordPress 6.5からAVIFのアップロードに対応しています。ただ実際に使えるかどうかはサーバー側の環境にも依存します。
使えない場合はプラグインや別の対応が必要になることがあります。
今回の検証で使っているのはPhotoshopです。AVIF書き出しは最新版で対応しているので、これから始めるならここは必須です。
PhotoshopでAVIFで保存する方法
実はPhotoshopのAVIF対応はつい最近の話です。
2025年6月リリースのバージョン26.8で、AVIFファイルを開く・編集・保存する ことができるようになりました。以前はプラグインを別途インストールする必要があって、それなりに面倒で触ったことはありませんでした。でもようやくネイティブ対応になりました。
保存の手順は「ファイル＞別名保存」からAVIFを選択して保存する形になります。
「書き出し形式」や「Web用に保存（従来）」からはAVIFは選べません。
①リサイズをする、レイヤーが残ってたらレイヤーを統合しておく←オススメ
レタッチが完了した画像を開きます。開いたらレイヤーが残ってる場合はレイヤー統合（おすすめなだけ。必須ではないです。）画像を任意のサイズにリサイズします。
透明画像を作らない場合、統合しておいた方がトラブルは減ります。
詳しくは「ブログ画像のサイズと容量、結局どうすればいい？最適解をPhotoshopで解説」
②別名保存でAVIFを選択
「ファイル＞別名保存」からプルダウンメニューでAVIFを選択します。
③AVIFオプションで画質とサイズを調整
②で「保存」をクリックするとAVIFオプションが出ます。ここで圧縮率を決めます。今回はとりあえず80にしてあります。
ちなみに以前のバージョンのPhotoshopを使っている場合はAVIFの保存はできません。
Photoshopで書き出したJPG・WebP・AVIFを比較してみた
理論上はAVIFが一番軽いはずなので、実際にPhotoshopから書き出して比較してみました。同じPSDから品質80で3つのフォーマットに書き出しています。
6種類の写真で検証した結果がこちらです。
・同一PSDから書き出し
・品質80で統一
・横幅1500pxで統一
| 写真 | JPG | AVIF | WebP |
|---|---|---|---|
| 星空夜景 | 109KB | 44KB | 30KB |
| 夕暮れ雪山 | 127KB | 53KB | 40KB |
| 日の出 | 161KB | 99KB | 69KB |
| オペラ座内部 | 362KB | 348KB | 227KB |
| 雪山登山 | 194KB | 168KB | 115KB |
| 富士山×バイク | 140KB | 92KB | 60KB |
結果は6枚全てWebPが最も軽いという結果になりました。
AVIFはJPGよりは軽いのですが、WebPには全て負けています。ちょっと期待はずれ・・・・
特にオペラ座の写真は情報量が多いにもかかわらず、AVIFとJPGがほぼ同サイズという予想外の結果でした。
肝心の画質ですが、1番軽いWebPがダントツで劣化していると言うこともなく、プロの仕事モードのガチ目線で見れば画質の違いは分かるのですが、モニター越しで見ればほとんど同じです。
ブログなのでいろんな人がいろんなモニターで見てると思いますが、そのモニター差よりもAVIFとWebPの差は小さいと思います。
感覚の話でもあります。
あくまでPhotoshopからの書き出しに限った話ではありますし、ツールや書き出し設定によっては結果が変わる可能性もあります。ただ少なくとも今回の結果では今のところWebPの方が軽いです。
ブログでAVIFは使うべきか
WordPress 6.5からAVIFのアップロードに対応しています。ただし「WordPressが対応した＝使える」とはならないのがちょっと厄介なところ。
実際に使えるかどうかはサーバー側の環境に依存します。サーバーの画像処理ライブラリがAVIFに対応していないと、アップロードしてもエラーになったり、サムネイルが生成されなかったりします。
自分のサーバーがAVIFに対応しているかどうかは、WordPressの管理画面「ツール＞サイトヘルス＞情報タブ＞メディア処理」で確認できます。ひげおのブログはConoHa Wingで運営していますが、現時点で対応状況を確認中です。
そして先ほどの比較結果を見ると、仮に使えたとしても今のところPhotoshopからの書き出しではWebPの方が軽いという結果が出ています。理論上の圧縮率と実際の書き出し結果が必ずしも一致しないのが現状です。
ひげおの結論としては「今すぐAVIFに乗り換える理由はない」です。WebPで十分軽くて綺麗なので、このブログでは引き続きWebPをメインで使っていきます。ただ技術は日々進歩するので、ツールや環境が整ってきたら再検証するつもりです。
まとめ
今回はJPG・WebP・AVIFの違いとAVIFの実力を検証しました。最後におさらいします。
「次世代フォーマット」と聞くとすぐ飛びつきたくなるのがひげおの性格ですが、今回は一回立ち止まれました。理論と実際は違うというのが正直な感想です。
ただ技術の進歩は早いので、ツールが成熟してきたら状況は変わると思います。その時はまた検証します。
