JPG vs PNG vs WebP：どのフォーマットを選ぶべき？

3つのフォーマット。3つの異なる強み。そして、どれをプロジェクトに使うべきか迷っている。

JPGは1990年代から写真の標準フォーマットです。PNGは透過と無劣化品質を扱えます。WebPは両方の良いところを組み合わせて、さらに軽量です。でも、それぞれに適した場面があります。

このガイドでは、画像の用途に合わせて、いつどのフォーマットを使うべきかを正確に解説します。

JPG、PNG、WebPの主な違いは？

比較表はこちらです：

特徴	JPG	PNG	WebP
圧縮タイプ	非可逆のみ	可逆のみ	非可逆・可逆両方
透過	なし	あり	あり
アニメーション	なし	なし（APNGはあるが稀）	あり
色深度	1670万色	1670万色＋アルファ	1670万色＋アルファ
最適な用途	写真	グラフィック、スクリーンショット	Web配信
ファイルサイズ（写真）	小さい	とても大きい	最小
ファイルサイズ（グラフィック）	中程度	小～中程度	最小
ブラウザ対応	100%	100%	97%以上
メール対応	優秀	優秀	不十分
印刷対応	優秀	良好	不十分

簡単にまとめると：JPGは写真の圧縮が得意ですが透過はできません。PNGは透過と無劣化品質に対応しますが、写真では巨大なファイルになります。WebPはすべてをこなし、最もファイルが小さくなります。ただし、すべての環境で動作するわけではありません。

JPGはいつ使うべき？

JPGは、どこでも表示できる写真が必要なときに最適です。

メール用の写真。 メールで画像を送る場合はJPGです。すべてのメールクライアントがJPGを正しく表示します。WebPの対応は不安定です。PNGは動きますがファイルが大きすぎます。

印刷用の写真。 印刷会社はJPG（またはTIFF）を期待しています。WebPを送らないでください。開けない可能性があります。

カメラ写真の保存。 スマホはJPGで撮影します。カメラもJPGで撮影します。写真の一般的な保存や共有には、JPGが万能フォーマットです。

SNS投稿。 InstagramやFacebookのようなプラットフォームは複数のフォーマットを受け付けます。でもJPGは長年の標準です。結果は予測可能で安定しています。

ファイルサイズが重要で透過が不要なとき。 品質85%のJPGなら、見た目の良い写真がPNGの何分の一かのサイズで得られます。

JPGを避けるべき場面： ロゴ、アイコン、テキストの多い画像、スクリーンショット、透過が必要なもの、繰り返し編集する画像（保存するたびに品質が劣化します）。

PNGはいつ使うべき？

PNGは、品質と透過がファイルサイズより重要なときに最適です。

透過背景の画像。 商品の切り抜き、ロゴ、アイコン、ステッカー、透かし。どんな色の背景にも重ねる必要がある場合、PNGは透過を完璧に処理します。

スクリーンショット。 スクリーンショット内のテキストはPNGで鮮明なままです。JPGはテキストをぼかし、文字の周りに醜いにじみを作ります。チュートリアル、ドキュメント、バグ報告には必ずPNGを使いましょう。

ロゴとアイコン。 シャープなエッジ、フラットな色、きれいな線。PNGはこれらが得意です。PNGのロゴはピクセル単位で完璧に見えます。同じロゴをJPGにすると、エッジがぼやけて色がにじみます。

テキスト入りのグラフィック。 インフォグラフィック、図表、チャート、読めるテキストを含む画像。PNGはテキストを鮮明に保ちます。JPGはぼやけさせます。

編集用のソースファイル。 PNGは無劣化です。100回保存しても何も変わりません。画像を編集するときはPNGを作業フォーマットとして使いましょう。完成したらJPGやWebPにエクスポートしてください。

ファビコンとアプリアイコン。 Webのファビコンやモバイルアプリのアイコンの標準はPNGです。ブラウザやOSがPNGを想定しています。

PNGを避けるべき場面： Webサイト上の写真（大きすぎる）、大量のWeb用画像、ダウンロード速度が重要な場面。

WebPはいつ使うべき？

WebPは、Webサイト上のほぼすべての画像に最適です。

すべてのWebサイト画像。 写真、グラフィック、アイコン、背景。WebPはあらゆる画像タイプを処理し、JPGとPNGの両方より小さいファイルを生成します。

Web用の透過画像。 WebPならPNGの透過機能を30～70%小さいファイルサイズで実現できます。透過背景の商品写真は最適な使用例です。

サムネイルと画像ギャラリー。 小さい画像ほど相対的な節約効果が大きくなります。50KBのJPGサムネイルはWebPで30KBになります。100枚のサムネイルのギャラリーなら、2MB節約できます。

Progressive Web Apps。 オフラインで動作するアプリには小さなファイルが必要です。WebPならキャッシュサイズを管理しやすく保てます。

非可逆と可逆の両方が必要なとき。 WebPは両方のモードをサポートしています。写真には非可逆、グラフィックには可逆を使いましょう。1つのフォーマットで2つのモードが使えます。

WebPを避けるべき場面： メール添付、印刷物、古いソフトウェアを使う人と共有するファイル、互換性が必須のアーカイブ保存。

ファイルサイズは実際にどう違う？

同じ画像を各フォーマットで保存した実数値です：

画像の内容	JPG (85%)	PNG	WebP (85%)
写真 4000x3000	1.5 MB	15 MB	1.0 MB
写真 1920x1080	500 KB	5 MB	340 KB
スクリーンショット 1920x1080	250 KB	400 KB	150 KB
ロゴ 500x200	35 KB	25 KB	15 KB
アイコン 64x64	5 KB	3 KB	2 KB
インフォグラフィック 800x2000	200 KB	350 KB	130 KB

写真の場合、PNGは異常に大きくなります。JPGの10倍、WebPの15倍です。Web上の写真にPNGを使ってはいけません。

フラットな色のグラフィック（ロゴ、アイコン）では、PNGも妥当なサイズです。でもWebPはそれでも30～40%小さくなります。

WebPはすべての行で勝っています。すべての画像タイプで最小のフォーマットです。唯一の欠点は互換性です。Webサイトに最適なフォーマットについての詳しいおすすめは、専用ガイドをご覧ください。

1つのサイトで3つのフォーマットすべてを使える？

はい。多くのサイトが実際にそうしています。実用的なアプローチを紹介します：

WebPに対応するブラウザにはWebPを配信。 それは訪問者の97%です。最小で最速の画像が届きます。

残りの3%には写真のフォールバックとしてJPG、透過画像にはPNGを使います。HTMLの<picture>要素を使いましょう。

ファビコンにはPNGを使います。ブラウザがPNG形式を期待する特殊なファイルにも同様です。

プロジェクトファイルではオリジナルをJPGかPNGで保持。 ビルドプロセスでWebPバージョンを生成するか、自動変換するCDNを使いましょう。

さらに上を目指すなら、AVIFも検討してください。AVIFフォーマット比較で、WebPとの違いを解説しています。

すべての画像フォーマットの詳しい比較については、画像フォーマット完全ガイドをご覧ください。

これらのフォーマット間で変換するには？

ConvertIMGは3つのフォーマットすべてに対応しています。Web配信のためにJPGをWebPに変換。PNGをWebPに変換して透過画像を軽量化。メール互換性のためにWebPをJPGに変換。画像の圧縮でさらにファイルサイズを削減することもできます。ファイルをアップロードして、フォーマットを選んで、ダウンロード。無料で、プライバシーも守られ、すべてブラウザ上で完結します。