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

可逆と非可逆——これだけ押さえればいい

形式選びはすべて1つの問いに行き着きます。圧縮は非可逆か、可逆か。非可逆圧縮（JPEG、およびWebP/AVIFの非可逆モード）は、人の目が気づきにくい細部を恒久的に捨てる代わりに、ファイルを大幅に小さくします。圧縮を強めるほどファイルは小さく、劣化は目に見えやすくなり、元には戻せません。可逆圧縮（PNG、GIF、WebP/AVIFの可逆モード）は何も捨てずにデータをより効率的に詰めるため、画像はピクセル単位で完全に再現されますが、その分ファイルは大きくなります。

だからこそ、写真は非可逆形式、フラットなグラフィックは可逆形式が向いています。写真には微妙に異なる無数の色調があり、少し細部を落としても膨大な容量を節約でき、ほとんど見分けがつきません。一方ロゴやスクショ、文字は硬いエッジと広い平坦部を持ち、非可逆圧縮ではエッジが滲んでノイズになりますが、可逆圧縮なら鮮明さを保ちつつ十分に圧縮できます。

形式比較表

どれを選ぶべきかを決める性質について、主要な形式を比較します。

JPEG：写真の定番

JPEGは何十年も写真の標準形式であり続けてきました。理由は明快で、フルカラー写真を生データのごく一部のサイズまで、多くの人が気づかない程度の劣化で圧縮できるからです。透過もアニメもなく、再保存のたびに再圧縮されるため、編集と保存を繰り返すと少しずつ劣化します。実用的には、原本を残したうえで、品質80%前後でJPEG書き出しするのがコツです。一般的な写真ではファイルが小さく、それでいてノイズが目立たない最適点です。

PNG：透過と鮮明なエッジ

PNGは可逆で完全なアルファチャンネルに対応するため、ロゴ・アイコン・UI要素・スクショ、そして鮮明な文字や透過背景を持つものに最適です。欠点はサイズです。細部を一切捨てないため、写真をPNGにすると、見た目の利点なしにJPEGの何倍にもなることがあります。PNGはエッジを鮮明に保ちたいときや透過が必要なときに使い、汎用の写真形式としては使わないようにしましょう。

WebPとAVIF：現代の選択肢

WebPとAVIFは両方の役割をこなすために作られた新しい形式です。どちらも非可逆・可逆モード、透過、アニメに対応し、同じ見た目の画質ならJPEGやPNGより小さいファイルになります——WebPはJPEG比でおおむね25〜35%、AVIFはさらに小さくなることが多いです。WebPは現行の全ブラウザが対応し、AVIFの対応も広いものの、やや新しめです。Webでは通常これらが最適で、まれな古い環境向けにJPEGかWebPのフォールバックを添えます。

選び方のシンプルなルール

Web用の写真ならWebP（またはAVIF）を使い、JPEGをフォールバックに。透過・鮮明な文字・平坦なグラフィック部があるならPNG、容量を抑えたいなら可逆WebPを。短く単純なアニメなら、現代のサイトではGIFよりアニメWebPの方が適します。そしてJPEGを渡されたとき、画質改善を期待してPNGに変換してはいけません。細部はすでに失われており、ファイルが大きくなるだけです。

よくある質問