JPG vs PNG vs WebP：どの形式を使うべきか
写真にはJPG、図版や透過が必要なものにはPNG、そしてJPGのファイルサイズの小ささとPNGの柔軟さを両取りしたいならWebP — これがウェブにおける最良の既定の選択です。ルールを1つだけ覚えるなら、写真はJPGかWebP寄り、エッジのくっきりした図版やロゴはPNGかロスレスWebP寄り、と覚えてください。
以下では、詳しい選び分けのガイド、手早い一覧比較、そしてブラウザ内でプライベートに形式を変換する方法を紹介します。
3つの形式をひと目で
各形式はそれぞれ異なる用途のために作られており、違いは2点に集約されます。容量を節約するためにデータを捨てるかどうか、そして透過に対応しているかどうかです。
- JPG（JPEG） — 非可逆。 目には気づきにくいディテールを捨てることで、小さなファイルを生み出します。写真や、色調がなだらかに変化する画像に最適です。透過には対応していません。
- PNG — 可逆。 すべてのピクセルを元のまま正確に保つため、ファイルは大きくなりますが、画質は完璧で透過にも対応します。図版、ロゴ、スクリーンショット、線画にぴったりです。
- WebP — 現代的で柔軟。 非可逆と可逆の両方の圧縮ができ、透過にも対応します。同程度の見た目の画質なら、WebPのファイルは通常JPGより約25〜35%小さく、現在使われているブラウザの約96%で対応しています。
手早い比較
| JPG | PNG | WebP | |
|---|---|---|---|
| 圧縮 | 非可逆 | 可逆 | 非可逆および可逆 |
| 透過 | 非対応 | 対応 | 対応 |
| 最適な用途 | 写真 | 図版・ロゴ・スクリーンショット・線画 | ウェブ上のほぼあらゆるもの |
| ファイルサイズ | 小 | 大 | 同程度の画質で最小 |
| ブラウザ対応 | 全対応 | 全対応 | 約96%のブラウザ |
JPGを使うべきとき
写真 — 人物、風景、食べ物、商品撮影 — があり、その画像を透過背景なしで表示するなら、JPGを選びましょう。
写真には、なめらかに色味を変える空、柔らかな影、繊細な肌の色合いなど、膨大な量の細かくなだらかなディテールが含まれます。JPGの非可逆圧縮は、まさにこの種の内容に合わせて調整されています。人間の視覚があまり気づかない情報を取り除くので、見た目は元のままなのにファイルは劇的に小さくなります。
画像がどうしてもあらゆる場所 — あらゆるブラウザ、あらゆる端末、どんな古いソフトウェアでも — で開く必要があるなら、JPGが最も安全な万能の選択です。JPGは何十年もそのすべてで対応されてきました。トレードオフは次のとおりです。
- 透過なし。 JPGは常に長方形の不透明な背景を持つので、色付きのページに載せる必要のあるロゴには不向きです。
- くっきりしたエッジには避ける。 テキスト、スクリーンショット、線画では、非可逆圧縮がシャープな境界をにじませ、かすかなハロ（縁取り）を残します。それらはPNGかロスレスWebPに任せましょう。
PNGを使うべきとき
完璧でロスレスな画質、または透過が必要なときはPNGを選びましょう。これは日常的な図版作業の多くをカバーします。
- どんな背景にもきれいに載るべきロゴやアイコン。
- くっきりしたテキストやUIのエッジが重要なスクリーンショット。
- 平坦な色面と硬いエッジを持つ線画、図、イラスト。
- 繰り返し編集・再保存・再書き出しする画像 — ロスレスなら、保存を重ねても画質が劣化しないからです。
その忠実さの代償はサイズです。写真をPNGで保存すると、同じ写真のJPGより数倍大きくなることがあり、しかも目に見える利点はありません。だからPNGは図版に適したツールであり、写真には不向きなツールなのです。
透過はどうする？
多くのケースで、透過が決め手になります。画像の一部を透けさせる必要があるなら — ロゴの周囲、切り抜いた商品、オーバーレイなど — JPGは即座に選択肢から外れます。残るはPNGかロスレスWebPです。PNGが最も幅広く互換性があり、WebPは最新ブラウザ対応で十分なら同じ透過をより小さなファイルで実現します。
WebPを使うべきとき
WebPは現代の万能選手で、ウェブサイトでは通常これが最良の既定です。非可逆と可逆の両方の圧縮を扱え、透過にも対応するため、JPGの代わりにもPNGの代わりにもなり、しかもより小さなファイルを生み出します。
実用上の利点は次のとおりです。
- ページが速くなる。 JPGと同程度の画質で、WebPのファイルは通常25〜35%小さくなります。画像だらけのページ全体では、読み込みが速くなり帯域も節約できます。
- 1つの形式で2役。 JPGを使っていた場面では非可逆WebPを、PNGを使っていた場面では透過も含めてロスレスWebPを使えます。
- 幅広い対応。 ブラウザの約96%がWebPを扱えるので、大半の公開ウェブサイトにとって安全な選択です。
WebPを使わない主な理由はリーチ（到達範囲）です。画像が古いソフトウェアや、自分で制御できない環境で開く必要があるなら、JPGやPNGの普遍的な互換性は保っておく価値があります。最新ブラウザ向けのものすべてにおいては、WebPは打ち負かしにくい選択です。
シンプルな選び分けガイド
順番に答えていけば、ほぼ毎回正しい形式にたどり着きます。
- 写真か？ → JPG（最大の互換性）またはWebP（より小さく、ウェブ向け）。
- 透過が必要か？ → PNG、またはより小さなファイルにするならロスレスWebP。
- 図版・ロゴ・スクリーンショット・線画か？ → PNG、またはロスレスWebP。
- ウェブサイト向けで、訪問者の大半が最新ブラウザを使うか？ → 内容を問わず、速度のためWebPを優先。
- 絶対にどこでも開く必要があるか？ → 写真はJPG、図版はPNG。
プライベートに変換する方法
正しい形式を選ぶということは、すでに手元にある画像を変換することを意味する場合がよくあります — JPGにすべきPNGの写真や、サイト用にもっと小さなWebPにしたいJPGなどです。これらはすべて、何もアップロードせずに画像変換ツールを使ってブラウザ内で行えます。
ほとんどのオンライン変換ツールは、作業のためにファイルをリモートサーバーに送ります。これは遅いうえ、あなたの写真やスクリーンショットを、何も知らないかもしれない会社に渡すことを意味します。Andevのツールは違う仕組みで動きます。変換はブラウザ組み込みの HTML Canvas を使い、お使いの端末上だけで完結します。
- 何もアップロードしない。 画像は端末から一切出ません。
- 何も保存しない。 タブを閉じれば消え去ります。
- 即時。 サーバーとの往復がありません。
典型的なワークフローは次のとおりです。
- 画像変換ツールを開いてファイルをドロップします。
- 上記の選び分けガイドに基づいて変換先の形式を選びます。
- もっと小さくも必要？画像圧縮ツールで画質を調整しましょう。
- 固定サイズで表示する？まずリサイズを — ピクセルが少なければ、形式を問わずファイルは小さくなります。
重要なポイント
- JPG は非可逆で写真に最適ですが、透過がなく、くっきりしたエッジをにじませます。
- PNG は透過付きの可逆形式で、ロゴ・図版・スクリーンショット・線画に適していますが、ファイルが大きくなる代償があります。
- WebP は非可逆と可逆に加えて透過にも対応し、同程度の画質で通常JPGより25〜35%小さく、約96%のブラウザで対応しています。
- ウェブにはWebPを優先 して速度を確保。どこでも開く必要のある画像にはJPGかPNGを残しましょう。
- プライベートに変換。 Canvasベースのブラウザ内ツールは、アップロードなし・保存なし・制限なしで形式を変えます。
形式を切り替える準備はできましたか？まずは無料でプライベートな画像変換ツールから — アップロードなし、登録なし、制限なし — あるいはブラウザ内画像ツールの全ラインナップをご覧ください。