PNG・JPEG・WebP の違いと使い分け

Web で画像を扱うとき、PNG・JPEG・WebP のどれで保存すべきか迷うことがあります。これらは圧縮方式や透過対応が異なり、写真向き・イラスト向きといった得意分野があります。この記事で、それぞれの特徴と選び方を整理します。

PNG:可逆圧縮・透過対応

PNG は可逆圧縮で、保存しても画質が劣化しません。透過(アルファチャンネル)に対応し、背景を透かした画像を作れます。ロゴ、アイコン、図やスクリーンショット、文字がくっきり見えるべき画像に向いています。反面、写真のような複雑な画像ではファイルサイズが大きくなりがちです。

JPEG:写真向きの非可逆圧縮

JPEG は非可逆圧縮で、人が気づきにくい情報を間引いてファイルを小さくします。色数の多い写真で効果的にサイズを削減できますが、保存のたびに劣化が蓄積し、文字やくっきりした境界はにじみやすい欠点があります。透過はできません。写真の掲載に最適な定番形式です。

WebP:両方に対応する新しめの形式

WebP は非可逆・可逆の両方に対応し、透過も扱えます。同等画質で JPEG や PNG よりファイルを小さくできることが多く、Web の表示高速化に有利です。主要ブラウザで広く対応しており、多くの用途で第一候補になり得ます。ただし、古い環境や一部のアプリでは扱えないこともあるため、配布先の対応状況には配慮しましょう。

どれを選ぶ？(目安)

• 写真 → JPEG または WebP(サイズ重視なら WebP)
• ロゴ・アイコン・図・スクリーンショット・透過が必要 → PNG(サイズ重視なら可逆 WebP も可)
• Web 表示の高速化を優先し、配布先が対応している → WebP
• 互換性を最優先(古い環境も想定) → 写真は JPEG、透過は PNG

形式の変換は画像形式変換ツールで、サイズ削減は画像圧縮ツールで行えます。いずれもブラウザ内で処理し、画像はアップロードされません。切り抜きやリサイズも組み合わせると、用途に最適な 1 枚に仕上げられます。