PNG・JPEG・WebPの違いと使い分け｜画像フォーマット比較
PNG・JPEG・WebPの特徴と違いを比較し、用途別に最適なフォーマットの選び方を解説します。
3大フォーマット比較表
Webで使われる画像フォーマットの中で、特に利用頻度が高いのがJPEG・PNG・WebPの3つです。それぞれの特徴を一覧で比較します。
| 比較項目 | JPEG | PNG | WebP |
|---|---|---|---|
| 策定年 | 1992年 | 1996年 | 2010年 |
| 圧縮方式 | 非可逆（ロッシー） | 可逆（ロスレス） | 可逆・非可逆 両対応 |
| 透過（透明） | 非対応 | 対応（アルファチャンネル） | 対応（アルファチャンネル） |
| アニメーション | 非対応 | 非対応（APNGは対応） | 対応 |
| ファイルサイズ | 小さい | 大きめ | 最も小さい |
| 色数 | 約1,677万色 | 約1,677万色（PNG-24） | 約1,677万色 |
| ブラウザ対応 | すべて | すべて | ほぼすべて（IE除く） |
| 主な用途 | 写真・画像全般 | イラスト・スクリーンショット | Web全般 |
JPEG（ジェイペグ）の特徴
JPEGは1992年にJoint Photographic Experts Groupによって策定された画像フォーマットで、写真や自然画像の保存に最も広く使われています。
非可逆圧縮（ロッシー圧縮）
JPEGは人間の目では気付きにくい情報を削ることでファイルサイズを小さくする「非可逆圧縮」を採用しています。圧縮後に元の画像を完全に復元することはできません。品質は0〜100で設定でき、品質を下げるほどファイルサイズは小さくなりますが、画質は劣化します。
一般的な目安：品質80前後がファイルサイズと画質のバランスが良い
JPEGのメリット・デメリット
- メリット：ファイルサイズが小さい、ほぼすべての環境で表示可能
- メリット：写真のような色数が多い画像に適している
- デメリット：透過（透明）に非対応
- デメリット：保存するたびに画質が劣化する（再圧縮問題）
- デメリット：テキストやロゴなどエッジがシャープな画像には不向き
PNG（ピング）の特徴
PNGは1996年にGIFの代替として策定されたフォーマットで、イラスト・スクリーンショット・ロゴなど、くっきりした画像の保存に適しています。
可逆圧縮（ロスレス圧縮）
PNGは「可逆圧縮」を採用しており、圧縮後も元の画像を完全に復元できます。何度保存し直しても画質が劣化しないため、編集途中の画像の保存にも適しています。
透過対応（アルファチャンネル）
PNG-24はアルファチャンネルによる半透明を含む透過に対応しています。背景が透明なロゴやアイコンの作成に最適です。GIFの透過は1色のみ（完全な透明 or 不透明）ですが、PNGでは0〜255段階の半透明を表現できます。
PNGのメリット・デメリット
- メリット：可逆圧縮で画質劣化なし
- メリット：透過（アルファチャンネル）に対応
- メリット：テキストやロゴなどエッジがシャープな画像に最適
- デメリット：写真の場合、JPEGやWebPよりファイルサイズが大きい
- デメリット：アニメーションは非対応（APNGは主要ブラウザで対応、IE除く）
WebP（ウェッピー）の特徴
WebPは2010年にGoogleが開発した次世代画像フォーマットで、JPEGとPNGの長所を併せ持つ万能なフォーマットです。
可逆・非可逆 両対応
WebPは非可逆圧縮と可逆圧縮の両方に対応しています。非可逆圧縮モードではJPEGより25〜35%小さいファイルサイズで同等の画質を実現し、可逆圧縮モードではPNGより約26%小さいファイルサイズになるとされています。
Googleの公表値：非可逆WebPはJPEGより25〜35%、可逆WebPはPNGより約26%小さい
透過・アニメーション対応
WebPはPNGと同様にアルファチャンネルによる透過に対応しているほか、GIFのようなアニメーションにも対応しています。つまり、JPEG・PNG・GIFの役割をWebP一つでカバーできます。
ブラウザ対応状況
2024年時点で、Chrome・Firefox・Safari・Edgeなど主要ブラウザはすべてWebPに対応しています。Internet Explorerは非対応ですが、2022年6月にサポートが終了しているため、実質的にほぼすべてのブラウザで利用可能です。
WebPのメリット・デメリット
- メリット：ファイルサイズが最も小さい（ページ表示速度の向上に直結）
- メリット：透過・アニメーション対応
- メリット：可逆・非可逆の両方に対応
- デメリット：一部の画像編集ソフトが未対応
- デメリット：印刷業界ではまだ普及していない
- デメリット：Internet Explorerでは表示できない
用途別おすすめフォーマット
「どのフォーマットを選べばいいかわからない」という方は、以下の表を参考にしてください。
| 用途 | おすすめフォーマット | 理由 |
|---|---|---|
| 写真（Web掲載） | WebP / JPEG | ファイルサイズが小さく表示速度が速い |
| 写真（印刷用） | PNG / TIFF | 非可逆圧縮による劣化を避けるため |
| ロゴ・アイコン | PNG / SVG / WebP | 透過対応が必要、エッジがシャープ |
| スクリーンショット | PNG | テキストや細かい線がくっきり保存される |
| イラスト・図解 | PNG / WebP | 色の境界がはっきりした画像に適している |
| Web全般（最適化） | WebP | ファイルサイズが最小でページ表示速度向上 |
| アニメーション | WebP / GIF | 動きのある画像に対応 |
| メール添付 | JPEG / PNG | 受信側の互換性を重視 |
迷った場合はWebPを選ぶのがおすすめです。ファイルサイズが最も小さく、透過にも対応しているため、Webで使うほとんどの場面に対応できます。ただし、印刷用途やメール添付など互換性を重視する場面ではJPEGやPNGが安全です。
その他の画像フォーマット
JPEG・PNG・WebP以外にも、用途に応じたさまざまな画像フォーマットがあります。
| フォーマット | 特徴 | 主な用途 |
|---|---|---|
| GIF | 256色まで。アニメーション対応。透過対応（1色のみ） | 簡単なアニメーション・絵文字 |
| SVG | ベクター形式。拡大しても劣化なし。テキストベース（XML） | ロゴ・アイコン・図形 |
| AVIF | AV1ベースの次世代フォーマット。WebPより高圧縮 | Web画像（対応ブラウザ拡大中） |
| TIFF | 非圧縮または可逆圧縮。高品質だがファイルサイズ大 | 印刷・医療画像・アーカイブ |
| BMP | 非圧縮。Windows標準の画像フォーマット | レガシーシステムとの互換用途 |
注目の次世代フォーマット：AVIF
AVIFは動画コーデックAV1をベースにした次世代画像フォーマットで、WebPよりもさらに高い圧縮率を実現します。Chrome・Firefox・Safariで対応が進んでおり、今後WebPに代わる標準フォーマットになる可能性があります。ただし、エンコード速度がやや遅い点やツールの対応状況にはまだ課題があります。
SVGの使いどころ
SVGはベクター形式のため、どれだけ拡大しても画質が劣化しません。ロゴ・アイコン・図形・グラフなど、形がシンプルで拡大縮小が必要な画像に最適です。ただし、写真のような複雑な画像には向いていません。
よくある質問
- Q. WebPはすべてのブラウザで使えますか？
- 2024年時点で、Chrome・Firefox・Safari・Edgeなど主要なブラウザはすべてWebPに対応しています。Internet Explorerのみ非対応ですが、2022年6月にサポートが終了しているため、実質的にほぼすべてのブラウザで利用可能です。
- Q. 透過画像を作るにはどのフォーマットがよいですか？
- 透過（透明な背景）が必要な場合は、PNGまたはWebPを使います。どちらもアルファチャンネルによる半透明の表現に対応しています。JPEGは透過に対応していないため、透明な背景が必要な場合は使えません。Web向けならファイルサイズが小さいWebPがおすすめです。
- Q. 印刷用にはどのフォーマットが最適ですか？
- 印刷用にはPNGまたはTIFFが適しています。PNGは可逆圧縮のため画質劣化がなく、多くの印刷業者が対応しています。より高品質を求める場合はTIFF（非圧縮）が最適です。JPEGは非可逆圧縮のため繰り返し保存すると画質が劣化するので、印刷用には避けるのが無難です。
- Q. JPEGとJPGの違いは何ですか？
- JPEGとJPGに違いはありません。どちらも同じフォーマットです。かつてのWindowsではファイル拡張子が3文字に制限されていたため「.jpg」が使われ、Mac/Unixでは「.jpeg」が使われていました。現在はどちらの拡張子でも同じように扱われます。