使い方
- .avif ファイルをドロップエリアにドロップするか、クリックして選択するか、画像を貼り付けます。
- 「元の形式のまま」にします。通常は AVIF が最も小さく、このツールでは画像を AVIF に再エンコードできません。
- 受け取る側が AVIF を扱えない場合に限り、PNG、JPEG、WebP に変換します。
- picture 要素の source に指定する data URI をコピーするか、Base64 文字列のみ、img タグ、CSS、Markdown のいずれかの出力を使います。
AVIF とは
AVIF（AV1 Image File Format）は、AV1 動画コーデックで圧縮した画像を HEIF コンテナに格納する形式です。Alliance for Open Media が 2019 年に公開し、透過、アニメーション、10 ビット・12 ビットカラー、HDR、広色域に対応しています。MIME タイプは image/avif です。
同じ見た目の品質なら、AVIF ファイルは JPEG より明らかに小さいことが多く、通常は WebP よりも小さくなります。特に低ビットレートでその差が顕著です。Base64 はどのファイルにも同じく 3 分の 1 を上乗せするため、AVIF が小さければ、その分 data URI も短くなります。
ブラウザの対応状況とフォールバック
AVIF は Chrome 85 以降、Firefox 93 以降、Safari 16 以降、Edge 121 以降で表示できます。それより古いブラウザやほとんどのメールクライアントでは表示できません。Web では、data URI をフォールバック付きの <picture> 要素で囲みます。
<picture>
<source type="image/avif" srcset="data:image/avif;base64,...">
<img src="logo.png" alt="Logo" width="120" height="40">
</picture>フォールバックは別ファイルのままにしてください。こちらも data URI にすると、すべての訪問者が HTML の一部として両方のバージョンをダウンロードすることになります。
エンコードと変換のオプション
このツールは AVIF ファイルをそのままエンコードします。変換先は PNG、JPEG、WebP で、AVIF は含まれていません。別の形式から AVIF を作成するには、avifenc、Squoosh、画像編集ソフトなどの専用エンコーダーを使い、その結果をここでエンコードしてください。
AVIF から PNG、JPEG、WebP への変換は、AVIF をデコードできるブラウザで動作し、AVIF を受け付けないシステム向けに役立ちますが、通常は結果が大きくなります。幅広い対応と小さなサイズを両立したい場合は、WebP が最も近い選択肢です。
よくある質問
ここで PNG や JPEG を AVIF に変換できますか？
いいえ。変換先は PNG、JPEG、WebP です。先に別のツールで AVIF ファイルを作成し、それをここにドロップしてエンコードしてください。
data:image/avif の画像を表示できるブラウザはどれですか？
Chrome 85 以降、Firefox 93 以降、Safari 16 以降、Edge 121 以降です。古いブラウザ向けには、picture 要素で PNG または JPEG のフォールバックを用意してください。
AVIF 画像のプレビューが表示されないのはなぜですか？
お使いのブラウザが AVIF をデコードできない可能性があります。Base64 の出力はファイルのバイト列から生成されるため、問題なく正しいものです。プレビューを見るには、最新のブラウザでこのページを開いてください。
AVIF の Base64 は WebP の Base64 より短くなりますか？
同程度の見た目の品質なら、通常は短くなります。Base64 はどちらの形式にも同じく 33% を上乗せするため、元のファイルが小さいほうが必ず短い文字列になります。