コンテンツへスキップ
LocalMedia Tools

PNG・JPG・WebP——どの画像形式を使うべき？

LocalMedia Tools ·

Web上のほぼすべての画像は、この3つの形式のいずれかであり、それぞれが異なる何かを引き換えにしています。JPGは人の目がまず気づかないディテールを切り捨てることで写真を積極的に圧縮し、PNGはすべてのピクセルを完全にそのまま保持したうえで透過を追加し、WebPはGoogleが開発したより新しい形式で、非可逆・可逆の両方に透過も加えた両方の役割を、従来の形式より小さいファイルサイズでこなそうとします。間違った形式を選んでも致命的になることはめったにありませんが、ページの読み込みが重くなったり、画像が目に見えてぼやけたりブロックノイズが出たりする原因にはなります。本ガイドでは、それぞれの形式が内部で実際に何をしているのか、iPhoneが写真を保存する形式であるHEICがどこに位置づけられるのか、そしてこれらをどこにもアップロードせずに変換・圧縮する方法を解説します。

JPGとは何で、いつ使うべきか？

JPG（JPEGとも表記されます）は非可逆圧縮を使います。画像をブロック単位で解析し、人の目が気づきにくい細かいディテールや色の変化を切り捨て、デコード時に近似値を再構成する仕組みです。このトレードオフこそが、JPGが小さくなる理由です。非圧縮なら数メガバイトになる写真も、多くの人が元画像と区別できない画質設定で、数百キロバイトまで圧縮できることがよくあります。JPGには透過チャンネルがないため、常に不透明な背景の上に描画され、鮮明な輪郭の周りにソフトなぼやけが目立ってしまうスクリーンショット、線画、テキストには向いていません。ファイルサイズが重要で、背景があることが前提となる商品写真、ポートレート、風景写真といった写真・写真的な画像にはJPGを使いましょう。

PNGとは何で、いつ使うべきか？

PNGは可逆圧縮を使います。保存したピクセルは近似なしでそのまま復元されます。そのため、非可逆による輪郭周りのぼやけやブロックノイズがすぐに目立ってしまう、スクリーンショット、UIモックアップ、ロゴ、図表、鮮明なテキストや硬い輪郭を含む画像にはPNGが適切な選択です。PNGはまた完全なアルファ（透過）チャンネルにも対応しているため、ロゴやアイコンの背景を、白や色付きの箱で囲むのではなく、本当に透けさせることができます。代償はサイズです。PNGはディテールを捨てられない性質上、写真をPNGとして保存すると、同じ写真をJPGで保存した場合に比べて何倍も大きくなるのが一般的で、写真的な被写体では見た目の画質向上はほとんどありません。

WebPとは何で、JPGやPNGとどう違うのか？

WebPは、古い2つの形式を一度に置き換えるために作られた新しい形式です。PNGと同様に完全な透過チャンネルを備えつつ、非可逆圧縮と可逆圧縮の両方を同じファイル形式でサポートします。つまり圧縮された写真、可逆圧縮のスクリーンショット、透過ロゴを1つの形式だけで扱えるということです。実際には、WebPファイルは同等の画質のJPGより25〜35%小さくなるのが一般的で、可逆圧縮のWebPも同じ画像をPNGで保存した場合より通常は小さくなります。ブラウザの対応状況は2020年代初頭からほぼ普遍的になっており（主要ブラウザはすべてネイティブに描画できます）、WebP採用への従来の主な反対理由はなくなりました。残る注意点はブラウザ以外での互換性です。古い画像編集ソフト、レガシーなCMSプラグイン、印刷やデザインのワークフローの一部は、いまだにWebPを直接開けないことがあるため、どこでも標準として使う前に自分の使うツールチェーンを確認しておく価値があります。

HEICはどこに位置づけられ、変換すべきか？

HEICはiOS 11以降、iPhoneが写真を保存する際のデフォルト形式です。同程度の画質でJPGより効率よく圧縮できるため、端末上の使用容量が少なくて済みます。問題は画質ではなく互換性です。多くのWindowsソフト、古いAndroidアプリ、Webフォーム、メールクライアントは、.heicファイルをまったく開けなかったり、扱いがぎこちなかったりします。HEICに対応していない可能性がある場所へ写真を共有する場合——Webサイトへのアップロード、相手の端末が分からない状態でのメール送信、古いソフトへの投稿など——はまずJPGに変換するのが最も互換性が高くなります。可逆画質や透過が特に必要な場合（カメラ写真では稀なケースです）に限り、PNGに変換してください。LocalMediaのHEICからJPGへの変換ツールは、この変換をすべてブラウザ内で行います。写真は端末から読み込まれ、変換され、どこにもアップロードされることなく端末に保存し直されます。

用途別に、実際にはどの形式を選ぶべきか？

決め手は通常、画像に何が写っているか、そしてそれをどこに使うかです。Web向けの写真や写真的な画像には、プラットフォームが対応しているならWebPを、そうでなければJPGを使いましょう。スクリーンショット、スキャンした書類、図表、テキストを含む画像には、輪郭を鮮明に保つためPNG（または可逆圧縮のWebP）を使いましょう。透過背景が必要なロゴ、アイコン、グラフィックにはPNGかWebPを使い、透過をまったく表現できないJPGは避けましょう。古いソフト、メールクライアント、印刷ワークフローとの最大限の互換性が必要な場合は、WebPのモダンブラウザ以外での対応がまだ一貫していないため、JPGとPNGが最も安全な普遍的選択肢であり続けます。

JPGを何度も保存し直すとなぜ画質が悪化するのか？

JPGの圧縮は非可逆であるため、JPGを開いて編集し、再びJPGとして保存するたびに、最初の保存時にすでに切り捨てられたディテールの上から、さらに解析と切り捨てが繰り返されます。数回にわたって編集と再保存を行うと、蓄積された劣化が、輪郭周りのソフトなぼやけ、色のバンディング、ブロックノイズとして目に見えるようになります。これはよく世代劣化と呼ばれる問題です。PNGでは、可逆圧縮であるため何度保存し直してもディテールが切り捨てられることがなく、この問題は起こりません。写真を何度も編集する必要がある場合は、編集中はPNGなど可逆形式のマスターコピーを保持し、最終的な納品時に一度だけJPGへ書き出すようにしましょう。

アップロードせずに画像を変換・圧縮するにはどうすればいいか？

JPG、PNG、WebP、HEICの相互変換や、大きすぎるファイルの縮小は、画像をサーバーへ送る必要が一切ありません。ブラウザだけで、ほとんどの一般的な画像形式をデコードし再エンコードできるからです。LocalMediaの画像形式変換ツールは、ブラウザタブ内で直接JPG・PNG・WebPを切り替え、画像圧縮ツールは画質や寸法を調整してファイルサイズを縮小します。どちらもファイルが端末を離れることは一切ありません。これは自分でも確認できます。ブラウザの開発者ツール（F12）を開いて「ネットワーク」タブに移動し、ファイルを変換・圧縮している間にアップロードのリクエストが発生していないか見てみてください。本当にローカルで動くツールは何も送信しません。

関連ツール

よくある質問

PNGとJPGはどちらが優れていますか？
どちらも普遍的に優れているわけではなく、それぞれ異なるコンテンツ向けに作られています。JPGの非可逆圧縮は写真をはるかに小さくできる一方、PNGの可逆圧縮はスクリーンショットやテキスト、グラフィックをぼやけさせず、JPGにはまったくない透過対応も備えています。写真にはJPGを、鮮明な輪郭やテキスト、透過背景が必要なものにはPNGを使いましょう。
WebPはJPGより優れていますか？
ファイルサイズと画質については、概ねそうです。WebPは同等画質のJPGより通常25〜35%小さいファイルになり、JPGがまったくできない透過や可逆圧縮にも対応しています。それでもJPGを選ぶ唯一の理由は、WebPファイルを開けない古いソフトやワークフローとの互換性です。
WebPは透過に対応していますか？
対応しています。WebPは非可逆・可逆どちらのモードでも完全なアルファ透過チャンネルを備えているため、通常より小さいファイルサイズを保ちながら、透過ロゴやアイコン用にPNGを置き換えることができます。
HEICはJPGとPNGのどちらに変換すべきですか？
ほとんどの場合はJPGに変換してください。より小さく、普遍的に互換性があり、カメラ写真が必要とする条件に合っています。可逆画質や透過背景が特に必要な場合（通常の写真では稀です）に限り、PNGに変換してください。
最もファイルサイズが小さくなる形式はどれですか？
写真の場合、通常は非可逆のWebPが最も小さく、次にJPG、PNGはそれよりかなり大きくなります。スクリーンショット、テキスト、線画の場合は、可逆のWebPが通常最も小さく、次にPNGが続きます。JPGの非可逆圧縮はファイルサイズに関わらず鮮明な輪郭には向いていないためです。
PNG、JPG、WebPの間で画質を落とさずに変換できますか？
可逆形式（PNG）から別の可逆設定への変換は、画質を完全に保持します。非可逆形式（JPG、非可逆WebP）への変換、あるいは非可逆形式同士の変換は常に画像を再圧縮するため、変換のたびに多少の画質が失われます。画像を2回以上変換・編集する予定がある場合は、可逆形式のマスターコピーを保持しておきましょう。