PNGからWebPへの変換ガイド：画像を圧縮し、ファイルサイズを削減する方法

Last updated: June 27, 2026

PNGはシャープなグラフィックと透明度に適したフォーマットですが、ファイルサイズが大きくなりがちです。特に写真のようなコンテンツの場合に顕著です。PNGをWebPに変換することで、シャープさとアルファチャンネルを維持しつつ、バイト数を劇的に削減できます。ただし、最適なモード（losslessかlossyか）を選択することが重要であり、適切なモードは画像の内容によって異なります。本ガイドでは、実際の測定サイズを交えながら、その両方について解説します。

Quick answer: should you convert PNG to WebP?

ウェブ用の画像であればWebPに変換すべきです。WebPはPNGの透明度とシャープさを維持しつつ、ファイルサイズを大幅に削減できます。コンテンツに応じてモードを選択してください：

単一の画像にはImage Converterを使用し、バッチ処理にはcwebpを使用します。このフォーマット決定の背景についてはimage formats explainedを参照してください。

How much does PNG to WebP save?

これは選択するWebPモードに完全に依存します。なぜならPNGはlosslessであり、比較がリンゴとリンゴではないからです。

この数値から得られる2つの重要な学びがあります。第一に、写真のlossless WebPは依然として大きい（568 KB）ということです。なぜなら、losslessエンコーディングでは写真に含まれるノイズを捨てることができないからです。コンテンツが写真である場合は、lossy WebPを使用すべきであり、losslessではありません。第二に、lossless WebPはフラットなグラフィックで真価を発揮します: スクリーンショットやUIアートの場合、ピクセルが同一であればPNGよりも通常20–30%小さくなります。モードをコンテンツに合わせることが重要です。

すべてのフォーマットにおける同じソース画像は、PNGが代替手段に対してどこに位置するかを示しています：

Which images should stay PNG?

変換すべきでない画像もあります。画像がSVGで代替できるロゴやアイコンである場合、または特定のPNGを要求するシステム（一部の印刷パイプライン、レガシーなエディタ、およびほとんどのデザインツール交換）に納品する場合など、PNGを保持すべきです。非常に小さなアイコン（〜3 KB未満）の場合、変換による利益はパイプラインの複雑さに見合わないため、PNGのままにしておくのが良いでしょう。判断ルールはimage formats explainedと同じです：バイト数が重要で宛先がウェブブラウザの場合はPNGをWebPに変換し、互換性やベクター代替案の方がより重要な場合はPNGを保持します。

Method 1: Browser converter

単一の画像にはImagic AI Image Converterを使用します。PNGをアップロードし、WebPを選択し、グラフィックの場合はlossless、写真の場合は品質〜80を選択してダウンロードします。Squooshは、コミットする前にlosslessとlossyを並べて比較するのに適しています。

Method 2: cwebp command line

## Lossless WebP (best for graphics, screenshots, sharp text, transparent UI)
cwebp -lossless input.png -o output.webp

## Lossy WebP (best if the PNG is actually a photo)
cwebp -q 80 input.png -o output.webp

## A folder of PNGs, lossless, in parallel
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-losslessが重要なフラグです。これがない場合、cwebpはデフォルトでlossyとなり、細いエッジをぼかします。グラフィックやスクリーンショットには必ず-losslessを指定してください。

Method 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless for sharp graphics; switch to lossless=False for photographic PNGs
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

lossless=Trueの場合、quality値は無視されます。lossyの場合は、写真用に〜80に設定します。

Does WebP keep PNG's transparency?

はい。WebPはlossyモードとlosslessモードの両方で完全なアルファチャンネルをサポートしているため、透明なPNGは追加作業なしで透明なWebPになります。これがUIアセットや製品の切り抜きを変換する主な理由です。透明度を維持しつつ、バイト数をほとんど削減できるからです。透明度の詳細についてはhow to make transparent imagesを参照してください。

How do you serve WebP with a PNG fallback?

WebPのサポート率は〜98%ですが、古いクライアントやメールのためにPNGフォールバックを保持することが推奨されます：

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

ブラウザはサポートする最初のタイプを選択し、PNGの<img>が最終的なフォールバックとなります。シャープなグラフィックの場合、レイアウトシフトを防ぐためにwidth/heightを予約してください。WebP converter guideでは、AVIFを含む完全なフォールバックパターンを参照できます。

When is PNG to WebP the wrong move?

• Email. 多くのメールクライアントはWebPを無視します。メール用にはPNG（またはJPEG）を保持してください。
• When you need a JPEG instead. PNGがマーケットプレイス向けの写真であり、JPEGのみを受け入れる場合は、WebPではなくJPEGに変換してください。WebP to JPGを参照してください。
• Old embedded browsers without WebP support — ただし、<picture>フォールバックで対応可能です。
• When the PNG is already tiny. 2KBのアイコンは、変換による利益が少なく、パイプラインコストに見合いません。

Common mistakes

• Using lossy WebP for sharp graphics. Lossyは細いエッジやテキストをぼかします。スクリーンショットやUIには-losslessを使用してください。
• Using lossless WebP for photos. 写真の場合、losslessではノイズが除去できないためサイズが大きく保たれます。lossyを使用してください。
• Dropping the PNG fallback. 古いブラウザやメールにはPNGの<img>が必要です。
• Forgetting to resize first. 4000pxのWebPも、フォーマットに関わらず4000pxのダウンロードサイズです。
• Treating PNG as a photo format. 画像が写真である場合、元々はJPEG/RAWだった可能性が高いため、適切なソースから変換してください。

Frequently asked questions

How much does converting PNG to WebP save?

写真コンテンツの場合、同等の品質で25〜35%小さくなります。透明度を持つフラットなグラフィックの場合は、さらに削減されることがよくあります。WebPはlossyモードとlosslessモードに加えアルファチャンネルをサポートしているため、PNGが行うことをより小さいサイズでカバーできます。

Should every PNG become WebP?

ウェブ配信の場合、非常に古いブラウザのためにPNGフォールバックを用意すればはいです。再編集する可能性がある場合は、PNGマスターを保持してください。なぜならWebPのlossyは圧縮の世代を経るからです。<picture>要素とPNGフォールバックを使ってWebPを提供してください。

Does WebP support transparency?

はい — WebPは完全なアルファチャンネルをサポートしているため、透明なPNGもきれいに変換されます。これがグラフィックで透明度がある場合にJPEGよりもWebPを優先する主な理由です。transparent images guideを参照してください。

What is the command-line conversion?

cwebp -q 80 input.png -o output.webp。-qフラグは品質を設定します（80がウェブのデフォルト）。losslessの場合は、-losslessを使用します。バッチ処理にはシェルループまたはImageMagickを使用してください。WebP converter guideを参照してください。

Does WebP support animation?

はい — WebPはアニメーション画像をサポートしており、同等のAnimated GIFよりも小さいです。短いループの場合、アニメーションWebPはGIFのモダンな代替手段となります。より長いアニメーションの場合は、動画（MP4）の方がまだ小さく優れています。

Should I convert PNG to WebP lossy or lossless?

写真にはLossy（はるかに小さく、品質80では目に見えない損失）、グラフィック、テキスト、およびピクセルが正確でなければならないマスターにはlosslessを使用します。WebPは両方をサポートしています。よくある間違いは、ロゴをlossyに変換することです。これはシャープなエッジにアーティファクトを追加してしまうため—グラフィックはlosslessに保ち、写真はlossyに変換してください。

What is the cwebp quality flag?

-qフラグは0から100のスケールでlossy品質を設定します（80がウェブのデフォルトであり、品質100の約4分の1のバイト数で目に見えない損失です）。グラフィックですべてのピクセルが正確でなければならない場合は、代わりに-losslessを使用してください。高い品質は、視覚的なリターンが減少するにつれてファイルサイズを大きくします。写真のウェブ配信における実用的なスイートスポットは80です。

Does converting PNG to WebP speed up my site?

はい、測定可能なほど速くなります — 同じコンテンツに対してWebPはPNGより25〜35%小さいため、グラフィックが多いページは読み込みが速くなり、LCPが改善します。この節約効果は、数十のアイコンやグラフィックがあるページ全体で積み重なります。古いブラウザでも画像が表示されるようにPNGフォールバック付きでWebPを提供し、互換性を失うことなくスピードを得ることができます。

Image credits

• PNG-to-WebP comparison and size bar chart — generated by the author from an ecommerce-style photograph (Pexels #16675632, photo by Mikael Blomkvist) to show real measured PNG-to-WebP savings.