JPG・PNG・WebP、どの形式を使うべき？

ひとことで言えば、写真はJPGかWebP、図版や透過はPNGかWebPです。WebPに切り替える前に、アップロード先が対応しているか確認してください。

JPG（JPEGとも表記）は、目ではほとんど気づかない細部を捨てることで、写真をコンパクトに保存します。ほぼすべてのウェブサイト、アプリ、メールサービス、マーケットプレイスが対応しているので、迷ったときにいちばん無難な選択です。

弱点は、くっきりした輪郭とベタ塗りの色です。文字や線画、スクリーンショットにはぼやけたにじみが出ますし、JPGは透過に対応していません。また、JPGは編集して保存し直すたびに少しずつ劣化するので、元の画像を残しておき、そこから書き出すようにしましょう。

形式を変えずにJPGを小さくするなら画像圧縮ツールを、WebPを試すならJPGをWebPに変換をお使いください。

PNGは可逆形式で、すべてのピクセルがそのまま保たれます。そのため、ロゴ、アイコン、画面のスクリーンショット、文字を含むあらゆる画像に適しています。柔らかい縁や影も含め、透過にも完全に対応しています。

その代わり、ファイルが大きくなります。写真をPNGで保存すると、たいていは画質の良いJPGの何倍もの大きさになります。HTTP Archiveの「2024 Web Almanac」では、ウェブ上のPNGの中央値はピクセルあたり3.8ビットで、JPGは2.0、WebPは1.3でした。

PNGの中身が写真なら、形式を変換しましょう。図版ならPNGのまま圧縮するか、透過を保てるPNGをWebPに変換を試してください。

WebPはGoogleがウェブ向けに開発した形式で、JPGのような非可逆圧縮と、PNGのような可逆圧縮の両方に対応し、どちらでも透過を扱えます。Googleによると、可逆WebPはPNGより26%小さく、非可逆WebPは同等のJPGより25〜34%小さくなります。

現在の主要ブラウザはすべてWebPを表示でき、これは使われているブラウザの約97%にあたります。Safariもバージョン14から対応しています。問題はブラウザの外にあります。WebPのアップロードを受け付けないプラットフォームがまだあり、たとえばAmazon、Etsy、MailchimpはJPGとPNGを挙げていますが、WebPは挙げていません。

変換すれば必ず得をするわけでもありません。シンプルなロゴや色数の少ないスクリーンショットは、PNGのほうが小さいことがあります。変換したら両方のファイルを比べて、小さいほうを残しましょう。

1. 01透過が必要ですか？PNGを使います。受け付けられる場所ならWebPでも構いません。
2. 02写真や写実的な画像ですか？JPGを使います。自分のサイトならWebPも使えます。
3. 03スクリーンショット、グラフ、ロゴ、文字ですか？PNGを使い、WebPも試してファイルを比べます。
4. 04どこにアップロードしますか？プラットフォームがその形式に対応しているか確認し、対応していなければJPGかPNGのままにします。
5. 05形式が何であれ、最終的なファイルを圧縮します。

各プラットフォームのサイズや上限については、メールとネットショップの画像サイズ要件をご覧ください。

AVIFはさらに小さくできることもある新しい形式ですが、作成に時間がかかり、対応するツールやプラットフォームも多くありません。ウェブではまだ珍しく、「2025 Web Almanac」ではLCP画像に占める割合がAVIFは0.7%で、WebPは11%、PNGは26%、JPGは57%でした。現在のほとんどのサイトでは、JPG、PNG、WebPがあれば十分です。

• 画質のために写真をPNGで保存する。 PNGはもともとある細部を保てても、細部を増やすことはできず、ファイルは何倍にも大きくなります。
• ぼやけた輪郭を直そうとJPGをPNGに変換する。 劣化はすでにJPGの中で起きています。代わりに元の画像に戻りましょう。
• 確認せずにすべてをWebPに切り替える。 自分のサイトでは問題なくても、ネットショップのプラットフォームやメール配信ツールでは受け付けられないことがあります。
• 形式を選んだところで終わりにする。 形式は出発点にすぎません。仕上げは、最終的なファイルの圧縮です。

次はこちら：ステップごとに解説したウェブサイトの画像を圧縮する方法。