PNG、JPG、WebP、AVIFの違いと選び方

画像形式は、どれが一番優れているかではなく、どの用途に合っているかで選びます。ロゴ、スクリーンショット、商品写真、ブログ画像、SNS用画像では、必要な条件がまったく違います。

形式を間違えると、ロゴの輪郭が汚くなったり、写真のファイルサイズが大きくなりすぎたり、透過背景が失われたり、古い環境で開けなかったりします。

ここでは、PNG、JPG、WebP、AVIFを実際の用途に合わせて選ぶための考え方を整理します。

> まずは早見表

簡単に言うと、透過とシャープさならPNG、写真と互換性ならJPG、現代的なWeb配信ならWebP、さらに軽くしたいならAVIFです。

PNGは可逆圧縮の形式です。保存してもJPGのような圧縮ノイズが出にくいため、エッジや文字をきれいに保てます。

PNGが向いているもの：

一方で、写真をPNGにするとファイルサイズが大きくなりがちです。細かいグラデーションや自然な質感をそのまま保持しようとするため、Web配信には重すぎることがあります。

線、文字、透明背景、平坦な色面が重要な画像にはPNGが向いています。写真が中心なら、JPG、WebP、AVIFを検討しましょう。

JPGは非可逆圧縮の形式です。細部を少し削る代わりに、写真を大きく軽量化できます。

JPGが向いているもの：

JPGが苦手なもの：

JPGの強みは互換性です。古いCMS、メールクライアント、オフィスソフト、SNSなどでも扱いやすく、相手に渡す画像形式としては今でも安定しています。

WebPは、写真の圧縮にも、透過画像にも、アニメーションにも対応しています。Webサイトでは、JPGやPNGより軽くできることが多く、現在のブラウザ対応もかなり良好です。

WebPが向いているもの：

注意点は、ブラウザ以外の環境です。デザインツール、古いCMS、メールクライアント、アップロードフォームでは、まだJPGやPNGの方が安全なことがあります。

公開Webサイトなら、WebPをメインにしつつ、必要に応じてJPGやPNGをフォールバックとして用意する方法が実用的です。

AVIFは非常に圧縮効率が高い形式です。特に大きな写真や画像の多いページでは、表示品質を保ちながらファイルサイズを小さくしやすいです。

AVIFが向いているもの：

慎重に使いたい場面：

AVIFはWeb配信の最適化には有力ですが、汎用の受け渡し形式としてはまだJPGやPNGほど気軽ではありません。

SVGはPNG、JPG、WebP、AVIFのようなビットマップ形式ではなく、ベクター形式です。ロゴ、アイコン、シンプルな図形は、可能ならSVGのまま使う方が拡大縮小に強く、編集もしやすいです。

SVGをPNGに変換する場面：

SVGをJPGにするのは、背景色が固定されていて透過が不要な場合に限るのが無難です。Web用に軽くしたい場合はWebPも候補になります。

Webサイトのロゴ： ヘッダーではSVGを使い、SNSや資料用にはPNGを書き出す。JPGは透過できないので避けます。

ドキュメント用スクリーンショット： 文字やUIの線があるならPNG。Web表示用に軽くしたい場合だけWebPを検討します。

商品写真： Web表示はWebPが扱いやすく、互換用にはJPGを残します。速度を強く意識するならAVIFも追加します。

アイコンセット： SVGソースを保管し、必要なサイズのPNGを複数書き出します。1つの大きなPNGをすべての場面で縮小・拡大するのは避けます。

透過イラスト： Webだけで使うならWebP、資料や他のソフトでも使うならPNGが安全です。

おすすめは次の流れです。

svg2img.ccでSVGを変換する場合も、習慣で形式を選ぶのではなく、用途から決めてください。透過ロゴやアイコンならPNG、背景固定のプレビューならJPG、Web配信用で軽さを重視するならWebPが候補になります。

良い画像形式とは、見た目、ファイルサイズ、互換性のバランスが、その用途に合っている形式です。