PitaTools Guide
WebP・AVIF・JPEG・PNGの使い分け：画質・透過・対応環境で選ぶ
Web画像形式を容量だけで決めず、写真、図版、透過、アニメーション、ブラウザ対応から選ぶ方法を解説します。
画像内容に合わせて候補を絞る
JPEGは写真のように色が連続して変化する画像へ向きますが、透明部分を保持できません。PNGは透過や輪郭の明確な図版を劣化なく保存しやすい一方、写真では容量が大きくなりがちです。
WebPとAVIFは写真と透過の両方に対応し、元画像や品質設定によって従来形式より小さくできる可能性があります。ただし、形式名だけで常に小さくなるわけではありません。
同じ条件で比較する
比較するときは同じ元画像、同じ寸法、近い見た目になる品質設定を使います。容量だけを見ると、強く圧縮して細部が失われたファイルが有利になります。顔、文字、グラデーション、細い線を同じ倍率で確認してください。
画像のデコード時間、生成環境、CMSの対応、SNSが再変換するかも運用上の判断材料です。
- 写真: JPEG、WebP、AVIFを比較
- 透過ロゴ・図版: PNG、WebP、AVIFを比較
- 単純なアイコン: SVGも候補
- 対応が不安な場合: picture要素で代替画像を用意
寸法最適化を先に行う
表示幅800pxの場所へ4000pxの画像を配信すると、形式を変えても不要な画素が残ります。先に必要寸法へリサイズし、その後に形式と品質を比較すると効果を判断しやすくなります。
実際のページではwidthとheightを指定してレイアウトのずれを防ぎ、適切なsrcsetと遅延読み込みも組み合わせます。