FORMAT COMPARISON
APNG vs WebP
APNGとWebPはいずれもアニメーションと透過を扱えます。APNGはPNG系の可逆アニメーション、WebPはWeb配信用画像形式として使われます。
APNGとWebP、どちらを選ぶ？
PNG系の制作工程で可逆アニメーションを扱うならAPNG、Web配信の容量最適化を検討するならWebPを候補にします。対象環境で比較します。
APNG向き
透過を含む短いアニメーション画像
- PNG系の可逆圧縮と透過を保ちたいアニメーション
WebP向き
Web画像
- Web配信
- 写真
- 透過画像
基本情報を比較
APNGとWebPの主な違いを確認できます。
| 項目 | APNG | WebP |
|---|---|---|
| 拡張子 | .apng、.png | .webp |
| MIME Type | image/apng | image/webp |
| 主な用途 | 透過を含む短いアニメーション画像 | Web画像 |
| 圧縮 | 可逆圧縮 | 非可逆／可逆 |
| 開く方法 | 対応ブラウザや画像ビューアで開けます。アニメーションとして使う前に、対象ブラウザと表示速度を確認します。 | 対応ブラウザや画像ビューア、編集ソフトで開けます。 |
| 書き出し・変換 | 静止画として配布するならPNG、Web配信の別候補としてWebPを検討します。変換後は透過とアニメーションを確認します。 | WebPからJPEGへ書き出すと透過を保持できず、非可逆圧縮になります。PNGへ書き出す場合は、静止画として出力するのか、アニメーションを別の方法で扱うのかを確認します。JPEGやPNGからWebPへ変換する場合も、可逆・非可逆、透過、アニメーションの要件を先に決めます。 |
用途別の選び方
作りたいものや使う場面から選べます。
PNG系の可逆圧縮と透過を保ちたいアニメーション
透過を含む短いアニメーション画像
APNG向きWeb配信
Web画像
WebP向き写真
Web画像
WebP向き確認ポイント 1
APNGはPNGを拡張した形式
使い分け確認ポイント 2
WebPは可逆・非可逆圧縮を扱える
使い分け選ぶ理由を詳しく
- 最適な容量と画質は素材とエンコード設定で変わる