JPEG・PNG・WebP の違いと使い分け完全ガイド
Web上で扱う画像形式は、JPEG・PNG・WebP の3つを押さえておけばほぼ十分です。 この記事では、3つの形式の特徴・ファイルサイズ・ブラウザ対応・使い分けの基準を、現場で役立つ視点でまとめました。
結論：用途別の選び方
- 写真：JPEG（互換性最優先）または WebP（軽さ最優先）
- ロゴ・アイコン・図表：PNG（透過対応・劣化なし）または WebP
- SNS投稿用：JPEG（プラットフォーム互換性が高い）
- Webサイト掲載用：WebP（軽量化と表示速度を重視）
JPEG（.jpg / .jpeg）
1992年に登場した、もっとも普及している画像形式です。写真のような連続的なグラデーションが多い画像に強く、ファイルサイズと画質のバランスに優れています。 非可逆圧縮（保存するたびに少しずつ画質が落ちる）のため、繰り返し編集には向きません。
JPEG の特徴
- 得意：写真、グラデーションが多い画像
- 苦手：透過、シャープな線・テキスト、繰り返し編集
- 圧縮：非可逆（品質を選択可能。10〜100%）
- 透過：非対応
- ブラウザ対応：すべて対応
- ファイルサイズ：中〜小
PNG（.png）
1996年に登場した、可逆圧縮の画像形式です。何度保存しても画質が劣化せず、透過（アルファチャンネル）にも対応するため、ロゴ・アイコン・スクリーンショットに最適です。 写真のような複雑な画像ではJPEGよりファイルサイズが大きくなります。
PNG の特徴
- 得意：ロゴ、アイコン、スクリーンショット、テキストを含む画像、透過
- 苦手：写真（ファイルサイズが膨らむ）
- 圧縮：可逆（劣化しない）
- 透過：対応（アルファチャンネル付き）
- ブラウザ対応：すべて対応
- ファイルサイズ：大（写真の場合）
WebP（.webp）
Googleが開発した次世代の画像形式で、2010年に登場しました。可逆・非可逆の両方に対応し、透過・アニメーションも扱えます。 JPEGよりも約25〜35%、PNGよりも約26%ファイルサイズを小さくできるとされており、Webサイトの表示速度改善で広く採用されています。
WebP の特徴
- 得意：写真もロゴも、Web全般
- 苦手：古い環境（IE11以前など）
- 圧縮：可逆・非可逆の両対応
- 透過：対応
- ブラウザ対応：主要モダンブラウザすべて対応（Chrome / Firefox / Safari / Edge）
- ファイルサイズ：小（最も軽量）
ファイルサイズ比較
同じ画像（1920×1080px、写真素材）を3形式で書き出した場合のおおよその目安です。
| 形式・品質 | ファイルサイズ目安 | PNG比 |
|---|---|---|
| PNG（劣化なし） | 3.2 MB | 100% |
| JPEG（品質90%） | 820 KB | 25% |
| JPEG（品質75%） | 410 KB | 13% |
| WebP（品質90%） | 540 KB | 17% |
| WebP（品質75%） | 270 KB | 8% |
※ 画像の内容により変動します。グラフィック・テキストが多い画像ではPNGが有利になることもあります。
用途別の使い分け早見表
| 用途 | 推奨形式 | 理由 |
|---|---|---|
| SNS投稿（写真） | JPEG | プラットフォーム互換性が最も高い |
| SNS投稿（ロゴ・図表） | PNG | テキスト・線が鮮明に保てる |
| Webサイト掲載 | WebP | 表示速度改善・SEO評価UP |
| アイコン・透過必須 | PNG | 透過対応・劣化なし |
| メール添付 | JPEG | メーラー互換性・受信側の環境差を吸収 |
| 印刷用 | PNG | 劣化させずに渡せる |
品質スライダーの目安
JPEG・WebP書き出し時の品質設定は、用途によって最適値が変わります。
ファイルサイズは大きいが、視覚的にほぼ無劣化
ほぼ視認できないレベルの劣化。実用上のスタンダード
サイズと品質のバランスが良いゾーン
やや劣化が見えるが、十分実用的
ブロックノイズが目立ち始める。常用は非推奨
よくある誤解
Q. PNGは常にJPEGより高画質？
いいえ。PNGは『劣化しない』形式であって、『高画質』とは限りません。元画像の解像度が低ければ、PNGで保存しても低画質のままです。JPEGも品質95%以上ならほぼ視認差はありません。
Q. WebPに変換すれば常に軽くなる？
ほとんどの場合は軽くなりますが、すでに高圧縮されたJPEGをWebPに変換しても効果が薄い、あるいは逆に大きくなる場合があります。変換の効果は元画像の状態次第です。
Q. JPEGは何度も保存すると劣化する？
はい。JPEGは保存のたびに圧縮を繰り返すため、徐々に画質が劣化します。編集中はPNGで保管し、最終出力でJPEGに変換するのが基本です。
Q. WebPはまだ対応ブラウザが少ない？
2020年以降、ChromeはもちろんSafari・Firefox・Edgeすべてで対応済みです。シェア95%以上のブラウザで表示可能なため、Webサイトでの採用に問題はほぼありません。
まとめ
画像形式の選択は、用途と環境で決まります。SNS投稿なら互換性重視のJPEG、Webサイトなら軽量なWebP、ロゴ・透過が必要ならPNG──この3パターンを基本に、品質とファイルサイズのバランスを調整していくのが実用的なアプローチです。 SizeKitなら3形式すべてに対応し、品質スライダーで細かい調整も可能です。
SizeKit で形式変換を試す
JPEG / PNG / WebP の3形式に対応。ブラウザだけで形式変換と品質調整ができます。
ツールを使う →こばやん
東京在住のエンジニア・個人開発者。SizeKit 開発者。 Stellars Lab