AVIFは常に小さい？JPEG・WebPとの容量比較と互換性

AVIFはWeb掲載用の候補ですが、形式名だけでは容量・画質・開ける環境を決められません。ここでは2種類の人工素材を同じ寸法のまま書き出した結果と、配信先・共有先に合わせた選び方を整理します。

1. AVIFの仕様と、使う環境の対応を分ける

AOMediaのAVIF仕様は、AV1で符号化した画像をHEIFの構造へ格納する形式を定めています。透過や高ビット深度などを扱える仕様ですが、個々のブラウザや編集ソフトがすべての機能を同じように扱うとは限りません。

MDNの基本対応開始版はChrome 85、Edge 121、Firefox 93、Safari 16.1です（2026年10月4日確認）。静止画の基本対応と、アニメーション・HDR・投稿フォームの受け付けは別に確認します。ブラウザで開けても、共有相手のアプリで編集できるとは限りません。

2. 2つの人工素材をJPEG・WebP・AVIFで書き出した結果

2026年10月4日、sharp 0.34.5（libvips 8.17.3、libaom 3.13.1、libwebp 1.6.0）で書き出しました。入力はRGB（40,90,200）の8×8px単色PNGと、色面・明暗段階・文字を含む1200×800px JPEGです。写真一般を代表する素材ではありません。

リサイズなし、qualityは各形式80、JPEG・AVIFのchromaSubsamplingは4:2:0、AVIFのeffortは4です。同じquality値は形式間で同じ視覚品質を保証しません。容量と出力寸法の確認であり、画質・処理速度・サイト表示速度の優劣を測ったものではありません。

小さい単色素材ではAVIFがJPEG・WebPの両方より大きくなり、色面と文字の素材ではAVIFが最小でした。出力寸法は各行で一致しています。「常に半分になる」という割合を、画像を問わず適用できない例です。

入力JPEGは比較に使った色面と文字の素材です。入力は72,190 bytesで、書き出し後のJPEGも別条件で再圧縮したファイルです。元JPEGの容量と、同じ入力から作った3形式の容量を混同しないでください。

sharpで再現する場合、単色入力はcreateのwidth・heightを8、channelsを3、backgroundをr:40／g:90／b:200としてPNGへ出力します。両入力を以下の3設定でそれぞれ書き出し、得られたBuffer.lengthを比較します。バージョン・ビルドの違いで結果が変わる場合があります。

sharp(input).jpeg({ quality: 80, chromaSubsampling: '4:2:0' }).toBuffer()
sharp(input).webp({ quality: 80 }).toBuffer()
sharp(input).avif({ quality: 80, effort: 4, chromaSubsampling: '4:2:0' }).toBuffer()

3. Web配信と、相手へ渡すファイルを選ぶ

サイトに導入するときは、実際に使う画像で表示寸法と許容できる見た目をそろえ、文字・輪郭・グラデーション・透過部分を確認します。そのうえで容量、エンコード条件、配信・管理するファイル数を比べます。

Web配信ではpictureのsourceにAVIF・WebPを指定し、imgにJPEG等を用意すると、ブラウザが対応する候補を選べます。ただし、対応形式のファイルが404になるなどの配信不備まで自動的に救済する保証ではありません。各URLと対象環境での表示を確認します。

メール添付や入稿・申請では相手の指定形式を優先します。AVIFを受け付けない場合、写真はJPEG、透過を保持したい画像はPNGなどへ変換します。形式を変えるだけで色・透過・細部が同じ状態になるとは限らないため、最終ファイルを開いて確認します。

4. 本サイトの変換ツールでできる操作

HEIC・AVIF変換ツールは、ブラウザで読み込める静止画AVIFをJPEG・PNG・WebP・BMPへ変換します。AVIFへの書き出しは行いません。上の容量比較も、このブラウザツールの出力結果ではありません。

アニメーションAVIFは静止画への誤変換を避けるため対象外です。JPEG・BMPは透過を保持できないので、透過画像は背景色やPNG・WebPの選択を確認します。変換元は残し、出力寸法・容量・表示を比べて使うファイルを選びます。