PNG、JPEG、WebPの違い：どの画像形式を使うべき？

画像形式の選び方は、ほとんどの場合2つの質問で決まります。画像に透明な部分が必要か。少しの画質劣化が目に見えるか。この2つに答えれば、形式はほぼ自然に決まります。3つ目の質問、つまりファイルをどこで使うかによって、新しい形式がそもそも使えるかどうかが決まります。マーケットプレイスや多くのアプリは、今でもJPEGとPNGしか受け付けないからです。

このガイドでは、Webの写真やグラフィックでよく出会う4つの形式、JPEG、PNG、WebP、AVIFを比較します。最後に、よくある用途ごとの選び方をまとめました。ロゴ、商品写真、普通の写真、背景を透過した切り抜きです。

比較表

形式の詳細はMDNの画像ファイル形式ガイドによるものです。ブラウザに関しては、対応状況の行は以前ほど重要ではありません。現行の主要ブラウザはすべてWebPを表示でき、AVIFもすべての最近のバージョンで対応しています。今も重要なのはそれ以外の場所、たとえばアップロードフォーム、マーケットプレイス、メールソフト、古いデスクトップソフトです。

非可逆と可逆をわかりやすく

可逆圧縮は、ピクセルを1つも変えずにファイルを小さくします。PNGをデコードすれば、保存したものがそのまま戻ってきます。そのため、文字、ロゴ、線画、UI、スクリーンショットなど、くっきりした輪郭と平坦な色のあるものに最適です。こうした画像では、少しのぼやけや色のにじみもすぐに目につきます。

非可逆圧縮は、目が気づきにくい細部を捨てます。写真はノイズやなだらかな階調に満ちているので、これによく耐えます。JPEGはこの方式で、適切な画質設定なら、見た目を変えずに写真をPNGのごく一部のサイズまで小さくできます。

ここから実用的なルールが2つ導かれます。

• 非可逆で保存するたびに、少しずつ劣化します。可逆のマスター（カメラの元データ、PNG、編集ソフト独自のファイル）を残し、そこから非可逆のコピーを書き出しましょう。同じJPEGを編集して上書き保存するのは避けます。
• 非可逆圧縮はくっきりした輪郭が一番苦手です。JPEGで保存したロゴは文字の周りに「モスキートノイズ」と呼ばれるにじみが出て、スクリーンショットは文字がぼやけます。

透過：切り抜きを決める機能

JPEGにはアルファチャンネルがありません。JPEGには「このピクセルは透けている」という情報を保存する方法がないため、背景を削除してJPEGで保存すると、空いた部分は単色、たいていは白か黒で塗りつぶされます。切り抜きをほかのコンテンツの上に重ねたいなら、PNG、WebP、AVIFが必要です。

PNGは完全なアルファチャンネルを保存します。各ピクセルは完全な不透明から完全な透明まで、どの値にもなれます。これが、髪、毛、影のような柔らかい輪郭を自然に見せる仕組みです。PNGには、パレットの1色を透明にするだけのシンプルなモードもあり、平坦なグラフィックなら問題ありませんが、写真では輪郭がギザギザになります。詳しくはアルファチャンネルとはをお読みください。

WebPは可逆と非可逆の両方のモードで透過に対応しています。GoogleのWebPのドキュメントによると、可逆WebPは約22%のデータ増で透過を追加でき、透過付きの非可逆WebPは同等のPNGより一般に約3分の1のサイズです。つまり自社サイトで透過した商品写真を配信するなら、非可逆WebPが最も効率的です。

ファイルサイズ

同じ画像なら、大きい順におおよそPNG、JPEG、WebP、AVIFです。ただし大きな注意点があります。PNGが「大きい」のは写真の場合だけです。色数の少ない平坦なグラフィックなら、PNGはJPEGより小さいことも多く、常によりくっきりしています。

Googleが公表しているWebPの数値は、よい目安になります。

• 可逆WebPのファイルは、PNGより26%小さくなります。
• 非可逆WebPのファイルは、同じSSIM画質スコアのJPEGより25から34%小さくなります。

Web上のラスター画像についてMDNは、一般にPNG、JPEG、GIFより圧縮率の高いWebPかAVIFを優先するよう勧めています。AVIFは10ビットと12ビットの色にも対応しており、なめらかなグラデーションに役立ちます。弱点はブラウザ以外での対応で、多くのアプリやアップロードフォームはまだ受け付けません。

ファイルサイズが最も重要になるのは、多くの訪問者に多くの画像を配信するときです。どのみちすべてを再圧縮するマーケットプレイスに1枚アップロードするだけなら、節約できるバイト数より、そのマーケットプレイスが受け付ける形式のほうが大切です。

各形式が使える場所

ブラウザは簡単です。形式が拒否されるのは、マーケットプレイスやアプリです。以下は各プラットフォームのドキュメントに基づく対応形式で、2026年10月に確認しました。

2つのことが目立ちます。1つ目に、WebPとAVIFはAmazon、Walmart、Metaのカタログでは使えないので、マーケットプレイスへのアップロードにはJPEGかPNGを使いましょう。2つ目に、Etsyは透過PNGに対応しておらず透明部分が黒く表示されることがあるとしているので、アップロード前に切り抜きを色の上に統合しましょう。プラットフォームごとの正確なピクセルサイズは、商品写真のサイズ一覧をご覧ください。

よくある用途ごとの形式

ロゴ

ベクターの元データがあればSVGを使います。MDNはロゴやアイコンにSVGを推奨しています。ラスターファイルが必要なら、背景を透過したPNGか、自社サイトなら可逆WebPを使います。JPEGは絶対に使わないでください。輪郭がにじみ、透過もできません。

商品写真

マーケットプレイスのメイン画像には、純白の背景のJPEGを使います。Amazonのセラー向けブログはJPEGを推奨形式としており、上の表のどのマーケットプレイスでも使えます。可逆のマスターから、高い画質設定（ほとんどのツールで85から92程度）で書き出しましょう。

自社ストアでは、高画質のJPEGかPNGをアップロードして、変換はプラットフォームに任せます。たとえばShopifyは、画像配信サービスが各訪問者のブラウザが対応する最適な形式を自動で配信するとしています。

普通の写真

共有やアップロードにはJPEGが無難な標準です。自分で管理するWebサイトなら、JPEGを代替に用意したWebPかAVIFで、同じ見た目をより少ないバイト数で配信できます。スマートフォンがHEICで保存する場合は、HEICに対応していない場所にアップロードする前にJPEGに変換しましょう。

切り抜きと透過画像

スライド、文書、デザインツール、ほとんどのアップロードフォームなど、どこでも使える必要があるならPNGを使います。自社のWebページに画像を置いて小さくしたいならWebPです。JPEGは、マーケットプレイス用の白など、意図的に背景を単色で塗りつぶした場合だけ使います。

スクリーンショットと図

PNGか可逆WebPです。非可逆形式では文字がぼやけます。

代替付きで新しい形式を配信する

自分のサイトを運営しているなら、形式を1つに決める必要はありません。HTMLのpicture要素を使えば、ブラウザが理解できる最初の形式を選んでくれます。

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

AVIFに対応したブラウザは最初のsourceを使い、ほかのブラウザはWebPに、それより古いものはPNGに切り替わります。多くのホスティングサービスや画像CDNは、ブラウザのAcceptヘッダーに基づいてこの変換を代わりに行ってくれます。すべての形式を自分で作るより簡単なことが多いでしょう。

想定外を避ける形式の変換

• PNGやWebPからJPEGへ： 透明な部分が統合されます。ツールによっては黒が既定なので、ツール任せにせず塗りつぶす色（たいていは白）を自分で選びましょう。
• JPEGからPNGへ： ファイルは大きくなりますが、画質はよくなりません。JPEGで失われた画質は戻りません。
• 任意の形式からWebPやAVIFへ： 透過が残っているか、色が正しく見えるかを確認します。Webで表示する画像なら、先にsRGBのカラープロファイルに変換しましょう。
• JPEGの再保存： 低い画質で保存するたびに劣化が重なります。マスターから一度だけ書き出しましょう。

切り抜きをもっと速く

背景をまとめて削除するなら、removebackground.devは切り抜きを透過PNGかWebP、または任意の単色背景のJPGで書き出せます。同じアップロードから、マーケットプレイス用の白背景JPEGと自社サイト用の透過PNGの両方を作れます。