PNG vs WebP

WebP はほぼ常に軽く、PNG は何も考えずに送れるファイルです。

PNGが向いている場面

相手がどんなソフトを使っているか分からないなら PNG。何十年も、どこでも開いてきた形式です。

WebPが向いている場面

自分のウェブサイトなら WebP。透明も含めて PNG と同じ仕事をして、容量はかなり小さくなります。

見落とされがちなところ

最近のブラウザーはどれも WebP を理解しますが、画像ビューアーがすべてそうとは限らず、古いソフトとなればなおさらです。メールで送るファイルが何で開かれるかは、送る側には分かりません。

PNGからWebPに乗り換えるとき

失われるもの

PNG は 1 チャンネルあたり 16 ビットまで扱え、WebP に残るのは 8 ビットです。この余裕こそが、思い切った補正をかけてもトーンジャンプを出さずに耐えるぶんです。ですから変換は編集のあとに行ってください。先ではありません。

残るもの

失われるものはありません。PNG も WebP も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。PNG も WebP もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

EXIF データ、XMP データ、ICC プロファイルは引き継げます。PNG にも WebP にも、それを収める場所があります。

変換先の形式が追加で扱えるもの

WebP はアニメーションを持てますが、PNG ファイル は 1 フレームしかありません。出てくるのは絵 1 枚のファイルで、それがもっと多くを扱えたはずの形式に入っている、という状態です。

結果を開く

Adobe PhotoshopとGIMPは PNG と WebP のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

PNG は PNG Development Group の形式です（1996 年に登場）。 記録は 1 チャンネルあたり 16 ビットです。

WebP は Google の形式で、2010 年から使われています。規定は RFC 9649 です。Adobe Photoshop、GIMP、Squooshがこの形式を読めます。

WebPからPNGに戻すとき

失われるもの

PNG が持てるのは静止した 1 フレームだけです。動く WebP ファイル からは最初のフレームだけが残り、あとは落ちます。この変換はそこから 1 枚の絵を取り出すもので、動きを運ぶものではありません。

残るもの

失われるものはありません。WebP も PNG も中身を劣化なしに保持します。この変換が変えるのは包み方であって品質ではないので、劣化が積み重なる心配をせずに何度でも繰り返せます。

透明は保たれます。WebP も PNG もアルファチャンネルを扱えるので、切り抜いた部分は切り抜かれたままで、その後ろに何かが塗られることはありません。

EXIF データ、XMP データ、ICC プロファイルは引き継げます。WebP にも PNG にも、それを収める場所があります。

結果を開く

Adobe PhotoshopとGIMPは WebP と PNG のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

どちらの形式が何のためのものか

WebP は Google の形式です（2010 年に登場）。 記録は 1 チャンネルあたり 8 ビットです。

PNG は PNG Development Group の形式で、1996 年から使われています。規定は ISO/IEC 15948 です。Adobe Photoshop、GIMP、Paint.NETがこの形式を読めます。

PNGからWebPへの変換で実際に起きること

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG.

PNG139 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP.

WebP14 KB9.7 分の 1

なだらかな階調、やわらかい輪郭、粒状感のある写真です。WebPが想定している、あるいは想定していない典型例で、数値がどちらなのかを示します。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG.

PNG7 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as WebP.

WebP4 KB38% 小さい

背景が透明で、図形にグラデーションがかかっています。WebPは両方を保持するか、片方だけ保持するか、透明部分を単色で塗りつぶすかのいずれかです。ここが見落とされがちな差です。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG.

PNG3 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP.

WebP11 KB4.2 倍

インターフェース、グラフ、ロゴのような、平坦な色と硬い輪郭です。上の写真とは挙動がまったく違い、答えが「ファイルの中身による」になる理由でもあります。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。

並べて比べる

PNGとWebPを項目ごとに比較 — 何を保持し、その代償は何か。
PNGWebP
Full namePortable Network GraphicsWebP Image
拡張子.png.webp
メディアタイプimage/pngimage/webp
圧縮方式可逆 — 何も捨てない設定によってどちらにもなる
当サイトで書き出せるかはいはい

決まりましたか。ここで変換できます

これらのフォーマットについて

この数値の出典

このページがPNG and WebPについて述べていることは検証できます。根拠となる資料は次のとおりです。