JPG・PNG・WebPの違いは？どの画像形式を使うべきか

3つの形式を並べて比較

それぞれの形式は別の用途のために設計されており、違いは画素の圧縮方法と、持っている追加機能に集約されます。

非可逆と可逆：決定的な違い

非可逆圧縮（JPG、非可逆 WebP）は、目に付きにくい細部を捨てます。色がなだらかに変わる写真には向いていますが、くっきりした輪郭はにじみます。JPG の文字や細い線には、リンギングやモスキートノイズと呼ばれる薄いにじみが出て、低品質では 8×8 画素のブロックが見えることもあります。

可逆圧縮（PNG、可逆 WebP）は、すべての画素を正確に保存します。単色の広い領域を非常によく縮められるため、スクリーンショットは JPG より PNG のほうが小さくなることがあります。一方、写真を PNG で保存すると、良い JPG の 3〜5 倍になることが多く、見た目の利点もありません。

• JPG は編集して保存し直すたびに再圧縮され、細部が少しずつ失われます。何度も編集するなら、可逆形式のマスターを残しましょう。
• JPG を PNG に変換しても、失われた細部は戻りません。すでに圧縮された画素を、それ以上劣化させずに大きなファイルで保存するだけです。
• JPG の品質は 80〜90% 程度が、サイズと目に見えるノイズのバランスが取れた一般的な設定です。

WebP はどれくらい小さくなる？

Google の WebP 圧縮調査では、構造的類似度（SSIM）が等しい条件でファイルを比較しました。非可逆 WebP は JPG より 25〜34% 小さく、可逆 WebP は PNG より約 26% 小さいと Google は報告しています。実際の削減量は画像、エンコーダー、品質設定によって変わります。

例：JPG で 400 KB のメイン写真は、同程度の画質の非可逆 WebP にするとたいてい 265〜300 KB 程度になります。画像が 20 枚あるページなら、その差でモバイル回線での読み込み時間が短くなります。

AVIF の位置づけ

AVIF は、AV1 で圧縮した画像を HEIF 系のコンテナに入れた新しい形式です。写真のファイルサイズでは多くの場合 WebP より小さく、10 ビット・12 ビットカラーと HDR、透過にも対応しています。Chrome はバージョン 85、Firefox は 93、Safari は 16 で対応しました。

弱点は、エンコードが遅いこと、古いデスクトップソフトの対応が弱いこと、ごく低い品質では細かな質感が失われることがある点です。多くのサイトは HTML の <picture> 要素を使い、AVIF を第一候補、WebP を第二候補、JPG を予備として配信しています。

早わかり選び方ガイド

フォームが WebP を受け付けない場合は、写真なら JPG、図版なら PNG にコピーを変換しましょう。非可逆のファイルを可逆形式に変換しても、互換性以外に得るものはありません。