JPG・PNG・WebPの違いとは？写真・ロゴ・Web用途別の使い分け早見表

JPG（JPEG）・PNG・WebPのいちばん大きな違いは圧縮方式です。JPGは画質を少し落として容量を小さくする「非可逆圧縮」、PNGは画質をまったく落とさない「可逆圧縮」、WebPはこの2つのどちらでも保存できます。基本の使い分けは、写真ならJPG、文字や線がくっきりしたスクリーンショットやロゴならPNG、Webサイトに載せる画像ならWebPです。

ほかにも、背景を透明にできるか（透過）、動く画像を作れるか（アニメーション）、相手の機器やアプリで開けるか（対応状況）が形式によって違います。

この記事では、まずそれぞれの仕組みを説明します。そのうえで用途別の早見表を示し、形式を変換したときに起きる劣化や「透明だった部分が白や黒になる」トラブルの原因と対処法までまとめます。

JPG・PNG・WebPの違いを一覧表で比較

まず全体像です。細かい仕組みは次の章から説明します。

迷ったときは、「写真か、文字や図か」「透明な部分が必要か」「受け取る人の環境で開けるか」の3点を確かめれば、ほとんどの場合は形式を決められます。

非可逆圧縮と可逆圧縮の違い｜画質が落ちる理由

JPGは目立ちにくい情報を捨てて小さくする

JPGは画像を8×8画素の小さなブロックに分け、人の目が気づきにくい細かな色の変化を間引いて容量を減らします。いったん捨てたデータは元に戻せないので「非可逆圧縮」と呼ばれます。

写真のように色がなめらかに変わる画像では、間引いても違いがほとんど分かりません。一方で、白地に黒い文字があるような境目のはっきりした画像では、文字のまわりにもやもやしたノイズ（モスキートノイズ）や、四角いブロック状の模様（ブロックノイズ）が出やすくなります。

多くのソフトでは、保存するときに「画質（品質）」を0〜100くらいの数値で指定できます。数値を下げるほど小さくなりますが、劣化も目立ってきます。同じ数値でもソフトによって仕上がりが違うため、80〜90あたりで保存してみて、見た目を確かめながら調整するのが現実的です。

PNGは元のデータを完全に復元できる

PNGは、隣の画素との差を取ったうえで、繰り返し出てくるパターンをまとめて記録する方式（Deflate）で圧縮します。保存しても1画素も変わらない「可逆圧縮」です。単色の背景や文字が多い画像はよく縮みますが、色が細かく変わる写真はあまり縮みません。

なお、PNGでも専用のツールで色の数を減らせば容量を小さくできます。ただしこの場合は情報を減らしているので、実質的には画質が落ちます。仕様の詳細はW3CのPNG仕様で公開されています。

WebPは両方の方式を選べる

WebPはGoogleが開発した形式で、非可逆と可逆のどちらでも保存できます。Googleの公式ページでは、可逆のWebPはPNGより約26%小さく、非可逆のWebPは同じくらいの画質のJPGより25〜34%小さいと説明されています。これはGoogle自身による比較なので、実際にどれだけ小さくなるかは画像の内容や設定で変わります。

注意したいのは、非可逆のWebPもJPGと同じくブロック単位で圧縮する方式だという点です。さらに、色合いの情報を明るさの情報より粗く、縦横半分の細かさで記録します（クロマサブサンプリングと呼びます）。そのため、文字や細い線、赤や青の境目がくっきりした部分は、JPGと同じようにふちがにじんだり、色がずれて見えたりしやすくなります。

スクリーンショットや図、ロゴをWebPにするなら、可逆を選んでください。また、WebPで扱える画像の大きさは縦横とも16383画素までです。パノラマ写真のような非常に横長・縦長の画像は、この上限を超えることがあります。

ファイルサイズはどれくらい違うのか（例示）

まず、圧縮しないときの大きさを計算してみます。1画素の色はRGB（赤・緑・青）が各1バイトなので、3バイトです。

• 4000×3000画素の写真：4,000×3,000＝12,000,000画素。×3バイト＝36,000,000バイトで、約36MB
• 1920×1080画素のスクリーンショット：1,920×1,080＝2,073,600画素。×3バイト＝6,220,800バイトで、約6.2MB

これを各形式で保存したときのイメージが次の表です。数値はあくまで一例です。実際の容量は、写っているもの、画質の設定、使うソフトによって大きく変わります。

写真ではPNGがかなり不利です。一方スクリーンショットでは、JPGにしてもPNGと比べて容量があまり減らないことがあり、そのうえ文字のふちがにじみやすいため、JPGの弱さが目立ちます。

透過とアニメーションに対応しているのはどれか

透過に対応しているのはPNGとWebP（JPGは非対応）

透過とは、画像の一部を透明にして、下にある背景が見えるようにする機能です。PNGとWebPは、色の情報とは別に「どれくらい透けるか」を1画素ずつ記録できます（アルファチャンネルと呼びます）。そのため、完全な透明だけでなく半透明も表現できます。

JPGにはこの仕組みがありません。背景を透明にしたロゴやイラストをJPGで保存すると、透明だった部分は必ず何かの色で塗りつぶされます。

アニメーションに対応しているのはWebP・APNG・GIF

動く画像を作るなら、アニメーションWebPか、PNGを拡張したAPNG（アニメーションPNG）が使えます。どちらも今の主要ブラウザで再生できます。昔から使われているGIFも動かせますが、使える色が256色までなので、写真のような画像には向きません。

ただし、SNSやチャットアプリに投稿すると、アニメーションが別の形式に変換されたり、最初の1コマしか表示されなかったりすることがあります。どうなるかはサービスによって違います。

WebPが開けない・アップロードできないときの対処

今の主要なWebブラウザは、いずれもWebPを表示できます。ただし、古いOSや古いバージョンの画像編集ソフト・オフィスソフト、一部のWebサービスのアップロード画面、印刷サービスの入稿画面などでは、WebPを受け付けないことがあります。

よくあるのが、Webサイトから画像を保存したら拡張子が「.webp」になっていて、ほかのアプリで開けないケースです。このとき、ファイル名の「.webp」を「.jpg」に書き換えても中身は変わりません。アプリによっては中身を判別して開いてくれますが、エラーになるアプリもあります。

確実なのは、本当にJPGやPNGへ変換することです。無料の画像の拡張子変換ツールを使えば、PNG・JPG・WebPの形式をまとめて変換できます。

用途別の使い分け早見表

印刷については、色の扱いにも注意が必要です。PNGは画面用のRGB（またはグレースケール）でしか色を記録できず、JPGも多くはRGBで保存されています。RGBの画像は印刷時に印刷用の色（CMYK）に変換されるため（印刷所が行う場合と、入稿前に自分で変換するよう求められる場合があります）、画面で見た色と印刷の色が少し変わることがあります。解像度や色の扱いは入稿のルールで決められていることが多いので、注文先の案内を必ず確認してください。

写真をたくさんPDFにまとめて送る場合は、PDFの容量も問題になりがちです。そのときはPDFの容量を小さくする方法も参考になります。

形式を変換すると何が劣化するのか

JPGをPNGに変えても画質は戻らない

JPGで保存したときに捨てたデータは、PNGに変換しても戻りません。にじみやノイズもそのまま残り、容量だけが大きくなります。PNGに変換する意味があるのは、そのあと透過を加えたり、何度も編集したりする場合です。

PNGからJPGにすると、文字のにじみと透過の消失が起きる

PNGからJPGへの変換では、2つのことが起きます。文字や線のふちにノイズが出ることと、透過の情報がなくなることです。資料のスクリーンショットや透過ロゴをJPGにするときは、特に注意してください。PNGから非可逆のWebPに変換する場合も、文字や線のにじみについては同じ注意が必要です。

JPGの上書き保存を繰り返すと劣化が積み重なる

JPGは保存するたびに圧縮し直されます。同じ画質の数値で保存しても、編集して上書き保存を繰り返すと少しずつ劣化が積み重なります。非可逆のWebPをJPGに変換するのも、2回続けて非可逆圧縮をかけることになります。

対策は、元の画像を残しておき、編集は元画像から行って、最後に1回だけ書き出すことです。

劣化を抑えて変換する手順

1. 元のファイルを複製して、別の場所に残しておく
2. 早見表を見て、使う場面に合う形式を決める
3. 透明な部分がある画像なら、JPGにするときの背景色を決めておく（次の章を参照）
4. JPGや非可逆のWebPで保存するなら、画質80〜90あたりから試す
5. 変換したら100%表示にして、文字のふちやグラデーションに乱れがないか確かめる
6. まだ容量が大きいときは、画質を下げる前に縦横のサイズ（画素数）を小さくできないか考える。縦横は画像サイズ変更ツールでpxや%を指定して縮小できる

手順6が先なのは、画素数を減らすほうが劣化が目立ちにくいことが多いからです。たとえば4000×3000画素の写真を横2000画素に縮めると、2,000×1,500＝3,000,000画素となり、画素数は12,000,000画素の4分の1になります。スマートフォンやパソコンの画面で見るだけなら、この程度に縮めても見た目の差は分かりにくい場合がほとんどです。

透過部分が白や黒になる原因と対処法

原因：JPGは透明を記録できないので、何かの色で塗りつぶされる

透過PNGをJPGに変換すると、透明だった部分は何かの色で埋められます。白で埋めるソフトもあれば、黒で埋めるソフトもあります。

黒くなるのには理由があります。透明な画素にも、見えないだけで色の値は入っています。その値が黒（R＝0、G＝0、B＝0）になっていることがあり、変換時に透け具合の情報だけを捨てたり、黒を背景として合成したりすると、黒が表に出てきます。透明な画素にどんな色の値が入っているかは、画像を保存したソフトによって違います。

半透明のふちに白や黒の線が出る

ロゴのふちは、なめらかに見せるために半透明になっていることがよくあります。JPGに変換すると、この半透明の部分は塗りつぶしの色と混ざって固定されます。白で埋めた画像を濃い色の背景に置くと、ふちに白い線が見えてしまうのはこのためです。

対処法

• 透明のまま使いたいなら、JPGにせずPNGかWebPのままにする
• JPGにする必要があるなら、背景色を指定できるツールを使い、載せる先の背景と同じ色で塗りつぶす
• 黒や白で埋まってしまった画像には、もう透明の情報が残っていない。元のPNGから変換し直す
• 黒い文字の透過ロゴは、ダークモードの画面や黒い背景の上では見えなくなる。濃い背景に置くなら、白いバージョンを別に用意する

形式を選ぶ前のチェックリスト

• 写真が中心か、文字・線・図が中心か（写真ならJPGか非可逆WebP、文字や図ならPNGか可逆WebP）
• 透明な部分が必要か（必要ならJPGは使えない）
• 動きが必要か（必要ならWebPかGIF、またはAPNG）
• 受け取る人の環境やアップロード先でWebPが使えるか（不安ならJPGかPNG）
• WebPにする画像が縦横16383画素を超えていないか
• 印刷に使うか（使うなら印刷所の指定とRGB・CMYKの扱いを確認する）
• 元のファイルを残してあるか（JPGの上書き保存を繰り返していないか）
• 拡張子を書き換えただけになっていないか（変換ツールで本当に変換したか）
• 変換後に100%表示で、文字のふちと透明だった部分を確かめたか

よくある質問

JPGとJPEGは違う形式ですか？

同じ形式です。拡張子が「.jpg」でも「.jpeg」でも中身は変わりません。昔のWindowsなどで拡張子を3文字までにする慣習があったため、「.jpg」が広く使われるようになりました。

iPhoneで撮った写真のHEICとは何ですか？JPGとどう違いますか？

HEIC（HEIF）は、JPGより小さな容量で同じくらいの画質を保ちやすい画像形式です。iPhoneのカメラ設定で「高効率」を選んでいると、この形式で保存されます。一方、Windowsでは拡張機能を追加しないと開けない場合があり、一部のWebサービスでも受け付けないことがあります。送る相手が困りそうなときは、JPGに変換するか、カメラの設定を「互換性優先」に切り替えてください。

GIFはもう使わないほうがいいですか？

GIFは使える色が256色までなので、写真や色の多いアニメーションには向きません。一方で、ほとんどの環境でそのまま動くという強みがあります。色数の少ない簡単なアニメーションや、古い環境でも確実に表示したい場面では、今でも選択肢になります。

PNGの画質を落とさずに容量を小さくする方法はありますか？

圧縮の設定を見直す、撮影情報などの付加データを削除する、といった方法なら画質を変えずに容量を減らせます。ただし、減らせる量はそれほど大きくありません。大きく減らしたいときは、縦横のサイズを小さくする、色の数を減らす、可逆のWebPに変換する、といった方法を検討してください。なお、色の数を減らす方法は見た目が少し変わることがあります。

AVIFという形式も見かけますが、WebPとどちらを使えばよいですか？

AVIFはWebPより新しい形式で、写真をさらに小さく保存しやすいとされています。ただし、対応している閲覧環境や編集ソフトは、WebPよりも限られる場合があります。Webサイトで使うなら、WebPかJPGを予備として用意しておくと安心です。使う予定の環境で表示できるかを確かめてから選んでください。