FORMAT COMPARISON
PNG vs AVIF
PNGとAVIFはWeb画像で比較されます。透過、画像の種類、対応ブラウザ、変換とフォールバックを分けて確認します。
PNGとAVIF、どちらを選ぶ？
透過を含む図版の広い互換性にはPNG、AVIF対応を確認できるWeb配信ではAVIFを実画像で比較して選びます。
PNG向き
透過画像・スクリーンショット
- ロゴ
- 図版
- 透過が必要な画像
AVIF向き
Web画像
- 配信サイズを抑えたい写真や画像
- AVIFを扱える配信・閲覧環境
基本情報を比較
PNGとAVIFの主な違いを確認できます。
| 項目 | PNG | AVIF |
|---|---|---|
| 拡張子 | .png | .avif |
| MIME Type | image/png | image/avif |
| 主な用途 | 透過画像・スクリーンショット | Web画像 |
| 圧縮 | 可逆圧縮 | 非可逆／可逆 |
| ベクター | 非対応 | 非対応 |
| 開く方法 | 標準ビューア、ブラウザ、画像編集ソフトで開けます。 | 対応するWebブラウザではページ内画像として表示できます。ローカルファイルは、利用中のOSビューアや画像編集ソフトがAVIFに対応しているかを確認して開きます。 |
| 書き出し・変換 | PNGをJPEGへ変換すると透過を保持できず、背景色や合成結果を決める必要があります。JPEGとして書き出す場合は非可逆圧縮になります。WebPへ変換する場合も、透過を保つ必要と可逆・非可逆の設定を先に決めます。 | JPEGやPNGからAVIFへ変換する場合は、元画像を残し、画質設定と透過の有無を確認します。AVIFを別形式へ変換すると、出力形式にない機能やメタデータは保持されないことがあります。 |
用途別の選び方
作りたいものや使う場面から選べます。
ロゴ
透過画像・スクリーンショット
PNG向き図版
透過画像・スクリーンショット
PNG向き配信サイズを抑えたい写真や画像
Web画像
AVIF向きAVIFを扱える配信・閲覧環境
Web画像
AVIF向き確認ポイント 1
PNGは静止画・透過で広く使われる
使い分け確認ポイント 2
AVIFは新しい画像配信の選択肢
使い分け選ぶ理由を詳しく
- ブラウザ対応とフォールバックが選定を左右する