PNGからWebPに変換すると、実際どれくらい小さくなりますか?

画像の内容によって大きく変わります。写真をPNGで保存している場合(よくあるものの本来はJPEGやWebPが向いています)、WebPの非可逆(lossy)モードで60〜80%程度の削減が見込めます。スクリーンショットやロゴ、UIキャプチャなど単色部分が多いグラフィック素材の場合、WebPの可逆(lossless)モードでもPNGより25〜45%程度小さくなることが多く、これはWebPの圧縮アルゴリズム自体がPNGより効率的なためで、画質の劣化は一切ありません。

WebPはPNGのように透過(背景の透明化)に対応していますか?

はい。WebPは非可逆・可逆どちらのモードでもアルファチャンネル(透過情報)に完全対応しています。ロゴやアイコン、背景を透明にした切り抜き画像をPNGからWebPに変換しても、透過部分はそのまま保持されます。透過に対応していないJPEGとは違い、WebPはPNGをほぼそのまま置き換えられる理由の一つです。

PNGのままにしておいた方がいい場合はありますか?

2つのケースがあります。1つは、WebPに対応していない古い画像編集ソフトや印刷ワークフロー、一部の連携ツールで扱う必要がある場合。もう1つは、ドット絵や32px以下の小さなアイコン・favicon(ファビコン)のように、PNGの可逆圧縮とWebPの可逆圧縮でほとんど差が出ない場合です。この場合はメリットが小さいため、互換性のリスクを取ってまで変換する必要はありません。

WebPは今どのくらいのブラウザで表示できますか?

2020年前後以降にリリースされたブラウザ(Chrome、Firefox、Safari、Edgeなど)はすべてWebPを標準でサポートしており、Web表示に関しては互換性の心配はほぼありません。残る懸念はブラウザの外側です。一部の古いデスクトップ画像ビューア、古いバージョンのMicrosoft Office、一部のメールクライアントの画像表示などでは、WebPが正しく扱われないことがあります。

スクリーンショットをWebPに変換すると文字がぼやけますか?

非可逆(lossy)モードで変換した場合のみそうなる可能性があります。WebPの可逆(lossless)モードは、PNGと同様にスクリーンショット内の文字やUI要素を完全に保持したまま、それでもファイルサイズを削減できることが多いです。使うツールが非可逆モードをデフォルトにしている場合は、品質設定を確認するか、文字や細かい要素を含む画像には可逆モードを選んでください。非可逆圧縮を文字の輪郭にかけると、にじみのようなアーティファクトが目立ちます。

PNGをWebPに変換する方法

画像をWebPに変換

このツールを今すぐ試す

ここにファイルをドロップ、または選択してください

上のツールでPNGを変換しましょう。以下の内容を読むと、この画像にとってWebPが本当に適切な選択かどうかを判断しやすくなります。削減幅も注意点も、画像の内容によって大きく変わるためです。

そもそもPNGが向いていないケースが多い

PNGは可逆圧縮を採用しており、単色部分や輪郭がはっきりしたグラフィック素材(スクリーンショット、ロゴ、アイコン、図解)には向いていますが、写真にはあまり向いていません。可逆圧縮では、写真に含まれる細かい色の階調を削ることができないため、写真をPNGで保存すると、同等の見た目の画質のJPEGやWebPと比べて数倍のファイルサイズになることがよくあります。写真をPNGとして保存してしまっている場合、WebPへの変換で得られる削減幅は特に大きくなります。

コンテンツの種類ごとの実際の削減幅

PNGで保存された写真: 非可逆WebPへの変換で60〜80%程度の削減が一般的。JPEGへの変換と同程度の削減幅ですが、WebPの方がグラデーションや細部の処理が効率的なため、同じファイルサイズでもアーティファクトが目立ちにくい傾向があります。
グラフィック素材・UIスクリーンショット・図解: 可逆WebPへの変換で、元のPNGより25〜45%程度の削減が一般的です。画質は一切劣化しないため、純粋に得をする変換です。
ドット絵や極小アイコン: 削減幅はほぼゼロに近くなります。この解像度ではどちらの形式でも圧縮できる冗長なデータがほとんど残っていないためです。この場合、互換性のリスクを取ってまで変換する必要はありません。

透過情報はそのまま引き継がれる

WebPは非可逆・可逆どちらのモードでも完全なアルファチャンネル(透過)に対応しているため、透明または半透明の部分を含むPNG(透明背景のロゴ、UIの切り抜き画像など)も、透過情報を保持したままWebPに変換できます。透過に一切対応していないJPEGとは違い、これがWebPがPNGの代替として広く使える理由の一つです。

互換性がまだ気になる場面

Web表示に関しては、2020年前後以降にリリースされたブラウザであればWebPを標準でサポートしているため、互換性はほぼ気にする必要がありません。残る懸念はブラウザの外側にあります。一部の古いデスクトップ画像編集・閲覧ソフト、古いバージョンのMicrosoft Officeにドキュメント内へ画像を埋め込む場合、一部のメールクライアントでの画像表示などです。その画像がブラウザ以外の特定の環境でも使われる予定がある場合は、事前に確認しておいてください。

非可逆か可逆か、内容に応じて選ぶ

非可逆WebPは最もファイルサイズを削減できますが、輪郭のはっきりした部分や小さな文字はにじみやぼやけが出やすく、これは過圧縮されたJPEGと同じ失敗パターンです。写真であればこのトレードオフはほとんど気になりませんが、スクリーンショットやUIモックアップ、文字を含む画像では、可逆モード(または十分に高い品質設定の非可逆モード)を使い、輪郭や文字をくっきり保つようにしてください。これはグラフィック素材をWebPに変換する際に最もよくある失敗です。

よくある質問

PNGからWebPに変換すると、実際どれくらい小さくなりますか?: 画像の内容によって大きく変わります。写真をPNGで保存している場合(よくあるものの本来はJPEGやWebPが向いています)、WebPの非可逆(lossy)モードで60〜80%程度の削減が見込めます。スクリーンショットやロゴ、UIキャプチャなど単色部分が多いグラフィック素材の場合、WebPの可逆(lossless)モードでもPNGより25〜45%程度小さくなることが多く、これはWebPの圧縮アルゴリズム自体がPNGより効率的なためで、画質の劣化は一切ありません。
WebPはPNGのように透過(背景の透明化)に対応していますか?: はい。WebPは非可逆・可逆どちらのモードでもアルファチャンネル(透過情報)に完全対応しています。ロゴやアイコン、背景を透明にした切り抜き画像をPNGからWebPに変換しても、透過部分はそのまま保持されます。透過に対応していないJPEGとは違い、WebPはPNGをほぼそのまま置き換えられる理由の一つです。
PNGのままにしておいた方がいい場合はありますか?: 2つのケースがあります。1つは、WebPに対応していない古い画像編集ソフトや印刷ワークフロー、一部の連携ツールで扱う必要がある場合。もう1つは、ドット絵や32px以下の小さなアイコン・favicon(ファビコン)のように、PNGの可逆圧縮とWebPの可逆圧縮でほとんど差が出ない場合です。この場合はメリットが小さいため、互換性のリスクを取ってまで変換する必要はありません。
WebPは今どのくらいのブラウザで表示できますか?: 2020年前後以降にリリースされたブラウザ(Chrome、Firefox、Safari、Edgeなど)はすべてWebPを標準でサポートしており、Web表示に関しては互換性の心配はほぼありません。残る懸念はブラウザの外側です。一部の古いデスクトップ画像ビューア、古いバージョンのMicrosoft Office、一部のメールクライアントの画像表示などでは、WebPが正しく扱われないことがあります。
スクリーンショットをWebPに変換すると文字がぼやけますか?: 非可逆(lossy)モードで変換した場合のみそうなる可能性があります。WebPの可逆(lossless)モードは、PNGと同様にスクリーンショット内の文字やUI要素を完全に保持したまま、それでもファイルサイズを削減できることが多いです。使うツールが非可逆モードをデフォルトにしている場合は、品質設定を確認するか、文字や細かい要素を含む画像には可逆モードを選んでください。非可逆圧縮を文字の輪郭にかけると、にじみのようなアーティファクトが目立ちます。