WebP・PNG・JPGの違い：画像形式の正しい選び方
JPGはどこでも開ける必要がある写真に、PNGはピクセルを正確に残したいときに向いています。WebPはWeb上でその両方を、より小さなファイルでこなします。
画像形式選びは、3つの問いに集約されます。エンコーダーが細部を捨ててもよいか、透明な部分が必要か、そしてファイルをどこで開くのか、です。JPG、PNG、WebPはそれぞれ違う答えを持っています。Webサイトの画像にはたいていWebPが最適ですが、PNGやJPGが勝る場面もまだあります。それを知っておけば、ぼやけたロゴ、切り抜き画像の周りの白い枠、ファイルを受け付けないアップロードフォームといったトラブルを避けられます。
3つの形式の比較表
| JPG（JPEG） | PNG | WebP | |
|---|---|---|---|
| 圧縮方式 | 非可逆 | 可逆 | 非可逆と可逆の両方 |
| 透過 | なし | あり、完全なアルファチャンネル | あり、どちらのモードでも |
| アニメーション | なし | APNGで対応 | あり |
| 色深度 | 実質1チャンネルあたり8ビット | 1チャンネルあたり最大16ビット | 1チャンネルあたり8ビット |
| 最大サイズ | 65,535 × 65,535ピクセル | 1辺あたり20億ピクセル超 | 16,383 × 16,383ピクセル |
| 開ける環境 | ほぼすべて | ほぼすべて | 現行の主要ブラウザーすべて。ただしすべてのアプリやアップロードフォームではない |
| 最適な用途 | どこでも使える必要がある写真 | スクリーンショット、UI、輪郭のくっきりしたグラフィック | Webサイトの画像の大半 |
非可逆と可逆：本当の違い
非可逆圧縮は、目で気づきにくい細部を捨てます。どれだけ捨てるかは品質設定で決まります。ノイズやグラデーションが小さな変化を隠してくれる写真には向いていますが、文字、細い線、単色の平坦な部分は苦手で、輪郭がにじんだり、うっすらとしたムラが出たりします。保存し直すたびに少しずつ劣化するので、以前のJPGからではなく、必ず元画像から変換してください。
可逆圧縮は、すべてのピクセルを正確に保ちます。スクリーンショット、図表、ドット絵、あとで再編集するものには可逆圧縮が正解です。ただし写真に使うとファイルがかなり大きくなります。カメラのノイズを正確に保存するのはコストが高いからです。
JPGは非可逆のみ、PNGは可逆のみです。WebPは1つの形式に両方のモードを持っており、これが実用上の最大の利点です。写真もスクリーンショットもWebPにでき、それぞれ適した方法で圧縮できます。
WebPはどれくらい小さくなるのか
この形式を開発したGoogleは、次の比較を公表しています。可逆WebPはPNGより26%小さく、非可逆WebPは同等のSSIM品質で同等のJPEGより25～34%小さいというものです。これはGoogleのテスト画像での平均値であり、すべてのファイルに当てはまる保証ではありません。
実際の結果は、これより良いことも悪いこともあります。GoogleのWebP FAQによると、WebPが元のファイルより大きくなる場合があり、典型的なのは、色数の少ないPNGを非可逆WebPに変換したときや、すでに非可逆圧縮された画像を可逆WebPで保存したときです。また非可逆WebPは常に4:2:0のクロマサブサンプリングを使い、色の情報を明るさの縦横半分の解像度で保存します。そのため、グラフィックの鮮やかな赤や青の輪郭が、PNGならくっきりしているところでわずかににじんで見えることがあります。確実なのは、変換して比べることです。画像変換ツールはファイルごとに元のサイズと変換後のサイズを表示するので、採用する前に実際の削減量を確認できます。
透過とアニメーション
JPGにはアルファチャンネルがありません。透過ロゴをJPGに変換すると、透明な部分は単色で塗りつぶされます。このサイトの変換ツールでは白になります。PNGは完全なアルファを可逆で保存するため、商品の切り抜き写真のような透過付きの写真は重くなりがちです。WebPは非可逆モードでもアルファに対応しているので、切り抜き写真の柔らかな輪郭を保ったまま、PNGのほんの一部のサイズにできます。PNGをWebPに変換で最も容量を削減できるのがこのケースです。
アニメーションについては、JPGは非対応、PNGはAPNG拡張で対応、WebPは標準でアニメーションを備えています。Googleによると、アニメーションWebPは同じアニメーションのGIFやAPNGより小さくなることがあります。長い、あるいは複雑な動画であれば、どの画像形式よりも音声なしのMP4やWebM動画のほうが軽いのが普通です。
どの形式を使うべきか
| 画像 | 使う形式 | 理由 |
|---|---|---|
| Webサイトの写真 | WebP（非可逆） | 広く対応している中で最も小さい |
| メール、印刷、アップロードフォーム用の写真 | JPG | どのソフトでも開け、どのフォームも通る |
| 文字入りのスクリーンショット、UIモックアップ | PNGまたは可逆WebP | 文字がくっきりし、にじまない |
| ロゴとアイコン | ベクターがあればSVG、なければPNGかWebP | くっきりした輪郭と透過を保てる |
| 背景が透明な商品写真 | WebP（非可逆＋アルファ） | 柔らかな輪郭をPNGのほんの一部のサイズで |
| 短いアニメーション | アニメーションWebP、長めの動画ならMP4/WebM | GIFよりはるかに軽い |
| あとで再編集する元データ | PNG、またはカメラの元ファイル | 世代劣化がない |
既存の画像の移行は簡単です。写真にはJPGをWebPに変換、グラフィックや切り抜きにはPNGをWebPに変換を使います。古いソフトでWebPが開けないときはWebPをJPGに変換で解決でき、誤ってPNGで保存した写真はPNGをJPGに変換で小さくできます。
ブラウザー対応とpictureによるフォールバック
Chrome、Edge、Firefox、Safariの現行バージョンはすべてWebPを表示できるので、ほとんどのサイトでは通常の<img>にWebPを指定するだけで十分です。古いブラウザーにも対応する必要がある場合や、新しい形式を優先して配信したい場合は、<picture>要素を使います。ブラウザーは対応している種類の最初の<source>を選び、どれにも対応していなければ<img>にフォールバックします。この<img>がalt属性のテキストと寸法も受け持ちます。
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Harbour at sunset" width="1600" height="900">
</picture>サーバーやCDNでも、マークアップを追加せずに同じことができます。画像リクエストのAcceptヘッダーを見て、WebPが含まれていればWebPを返す方法です。この場合はVary: Acceptを送り、キャッシュがバージョンを区別して保持できるようにしてください。
AVIFの位置づけ
AVIFはAV1動画コーデックをベースにした形式で、Chrome、Edge、Firefox、Safariの現行バージョンが対応しています。同程度の見た目の品質ならWebPより小さなファイルになることが多い一方、エンコードが遅く、対応しているツール、編集ソフト、アップロードフォームはまだ少なめです。上の例のように、AVIFを最優先、次にWebP、最後にJPGという構成がよく使われます。このサイトの変換ツールは、ブラウザーがデコードできればAVIFファイルを読み込めますが、書き出せるのはWebP、PNG、JPG、ICOで、AVIFには対応していません。
ブラウザーでの変換：Safariの注意点
ブラウザーで動く変換ツールは、画像をcanvasに描画し、ブラウザーにエンコードを依頼します。Chrome、Edge、Firefoxはこの方法でWebPをエンコードできます。SafariはWebPを表示できますが、canvasからWebPをエンコードできず、何も言わずにPNGを返します。そのため、このサイトの変換ツールは、拡張子だけ.webpのPNGを保存するのではなく、メッセージを表示して処理を止めます。MacではChrome、Edge、FirefoxでWebPに変換してください。iPhoneやiPadでは他のブラウザーも基本的にSafariのエンジンを使っているため、パソコンで変換するか、PNGかJPGを選んでください。
ほかにも知っておきたい点が2つあります。Chromeでは品質100で可逆WebPが、それより低い値で非可逆WebPが生成されます。これはエンコードされたファイルを調べて確認しました。また、canvasでのエンコードではメタデータがコピーされないため、カメラの機種やGPSの位置情報などのEXIFデータは変換後のファイルに含まれません。