ブラウザで AVIF 圧縮が動かないかもしれない理由——そして背後で起きていること

AVIF は JPEG より 50% 小さく品質の良いファイルを約束する次世代画像フォーマットです。しかし AVIF を出力フォーマットに選ぶとファイルが小さくなるどころか大きくなる場合——あなたのブラウザは AVIF エンコードを実際にはサポートしていません。

AVIF とは？

AVIF（AV1 Image File Format）は、AV1 動画コーデックに基づくモダンな画像フォーマットです。Open Media 連盟（AOMedia）により開発され、本当に印象的な圧縮能力を提供します：

• 同等の視覚品質で JPEG より50% 小さい
• 同等の品質で WebP より20% 小さい
• HDR（ハイダイナミックレンジ）コンテンツをサポート
• 透過（アルファチャネル）をサポート
• アニメーションをサポート（GIF の代替）
• ロイヤリティフリーでオープンソース

あらゆる点で AVIF はウェブ画像の未来です。しかしデコード（表示）とエンコード（作成）の間には重要な区別があります。

デコード vs エンコード：決定的な違い

ほとんどのモダンブラウザは AVIF 画像を問題なく表示できます。Chrome、Firefox、Safari、Edge はすべて AVIF デコードをサポートしており、ウェブページ上で AVIF 画像を表示できます。

しかしエンコード——ゼロから実際に AVIF ファイルを作成すること——は全く別の話です。これはブラウザが Canvas API に AVIF エンコードを実装する必要があり、計算コストが高く、デコードよりはるかに実装が困難です。

ブラウザの AVIF エンコードサポート（2026 年 3 月時点）

ブラウザ	AVIF デコード	AVIF エンコード（canvas.toBlob）
Chrome 121+	✅ はい	✅ はい
Firefox	✅ はい	❌ いいえ
Safari	✅ はい	❌ いいえ
Edge	✅ はい	✅ はい（Chromium ベース）
モバイル Chrome	✅ はい	✅ はい
モバイル Safari	✅ はい	❌ いいえ

ブラウザが AVIF エンコードをサポートしない時に実際に起きること

ここが面白く——そして混乱しやすいところです。AVIF を出力フォーマットに選んでもブラウザが AVIF をエンコードできない場合、こうなります：

サイレントフォールバック

Canvas API の canvas.toBlob(callback, 'image/avif', quality) メソッドは、AVIF エンコードがサポートされていない時にエラーを投げません。代わりにこっそりこうします：

1. PNG フォーマットにサイレントにフォールバックします
2. 結果の blob の MIME タイプが image/avif ではなく image/png になります
3. ファイルは .avif 拡張子で保存されますが、実際の内容は PNG です

つまりあなたの「AVIF」ファイルは実は変装した PNG です——そして PNG は可逆フォーマットで、通常は元の JPEG より 3-5 倍大きいファイルを生成します。だから画像が 5 倍に膨れ上がったように見えるのです！

現実世界の影響

こんなシナリオを想像してください：500KB の JPEG 写真をアップロードし、出力フォーマットに AVIF を選び、約 250KB のファイルを期待します。しかし結果は：

• ブラウザがサイレントに PNG を出力 → ファイルは 2.5MB に
• 拡張子は .avif と言うが内容は PNG
• 他のツールが拡張子と内容の不一致で開けない可能性
• AVIF がひどいフォーマットだと思うかも——実はブラウザが対応していないだけ

Img Zip が AVIF サポートを検出する方法

Img Zip はブラウザが AVIF エンコードをサポートするかを事前に検出します。1×1 ピクセルの小さなキャンバスを作り、AVIF としてエンコードを試みます：

canvas.toBlob(blob => {
  if (blob !== null && blob.type === 'image/avif') {
    // AVIF エンコードがサポートされています！
  } else {
    // サポートされていません — 警告を表示
  }
}, 'image/avif');

ブラウザが異なる型（image/png など）の blob や null を返した場合、AVIF エンコードが利用不可と判断し、フォーマットセレクターに「ブラウザがサポートしていません」という警告を明確に表示します。

ICO フォーマットはどうですか？

ICO（アイコン）ファイルにも似た問題があります。Canvas API は ICO エンコードを全くサポートしていません——実装しているブラウザはありません。ICO を出力に選ぶと、ブラウザは PNG にフォールバックし、.ico 拡張子だが内容は PNG のファイルになります。

ファビコン用途では、モダンブラウザは .ico 拡張子の PNG を受け入れるので、この回避策は機能することが多いです。しかしそれは真の ICO ファイルではありません。

ブラウザが AVIF をサポートしない場合、どうすれば？

オプション 1：代わりに WebP を使う

WebP はすべてのモダンブラウザでデコードもエンコードもサポートされています。JPEG より 25-35% 良い圧縮を提供します——AVIF の 50% には及びませんが、それでも優秀で普遍的にサポートされています。

オプション 2：Chromium ベースのブラウザに切り替える

AVIF エンコードが重要なら、Chrome 121+ と Edge（Chromium ベース）が現在最高のサポートを提供します。どちらも Canvas API 経由で AVIF をエンコードできます。

オプション 3：デスクトップソフトウェアを使う

プロの AVIF エンコードには、squoosh（Google 謹製のツール）、libavif、AVIF プラグイン付き Photoshop などの専用デスクトップツールが、ブラウザサポートに関わらず信頼できるエンコードを提供します。

AVIF ブラウザサポートの未来

良いニュースは、AVIF エンコードサポートが拡大していることです。AV1 コーデックが（動画ストリーミング採用に後押しされて）より普及するにつれ、ブラウザベンダーはエンコードサポートの投入を強化しています。Firefox と Safari が将来のアップデートで AVIF Canvas エンコードを追加すると予想しています。

すべての主要ブラウザが AVIF エンコードをサポートすれば、Img Zip のようなブラウザベースのツールは誰にでも AVIF 圧縮を提供できるようになります——ソフトウェアインストール不要で、絶対的に最高の画像最適化を。

結論

AVIF は素晴らしいフォーマットですが、ブラウザのエンコードサポートはまだ追いついていません。AVIF 選択時に「ブラウザがサポートしていません」警告が出ても心配いりません——バグではなく、現在のブラウザの制限です。信頼できる代替として WebP を使うか、完全な AVIF エンコードサポートのために Chromium ベースのブラウザに切り替えましょう。

Img Zip は常にブラウザの能力を透明に伝えるので、予期しない結果になることはありません。

今すぐ画像圧縮を試す——ブラウザのサポート状況を自動検出します。