PNG を WebP に変換

このコンバーターについて

この無料の PNG から WebP への変換ツールは、PNG を最新の WebP に変換し、透過をそのまま保ちます。ここでの削減量は JPG の場合よりはるかに大きいのが普通で、60〜80% は珍しくありません。写真を含む PNG なら、それ以上になることもあります。

処理はすべてブラウザー内で行われます。画像がサーバーにアップロードされることはありません。

PNG ファイルが大きくなってしまう理由

PNG は可逆（ロスレス）です。すべてのピクセルがそのまま正確に保存され、何ひとつ捨てられません。これは画像によっては適切な選択ですが、別の画像にとっては非常に高くつく選択です。

PNG は繰り返しを見つけることで圧縮します。同じピクセルの連続や、再び現れるパターンです。これは、6 色のべた塗りで作られたロゴ、フォームのスクリーンショット、きれいな塗りのグラフなどでは見事に機能します。そうした画像は、生のデータのごくわずかな割合にまで圧縮できます。

うまくいかないのが写真です。写真にはまったく同一の繰り返しがほとんどないからです。空のピクセルは 1 つひとつが隣と少しずつ違うため、まとめられるものがなく、PNG は結局、生のピクセルデータに近いものを保存することになります。そのため、PNG で保存した写真は同じ写真の JPG 版より5〜10 倍大きくなるのが普通で、しかも目に見える利点はありません。

ウェブ上にある巨大な PNG の非常に多くは、単に間違った形式で保存された写真です。スクリーンショットツールの既定が PNG なので、写真のスクリーンショットであることがとても多いのです。

WebP には 2 つのモードがあり、それがすべての鍵です

まさにこれが、WebP を PNG の代替として特に優れたものにしています。WebP は両方の仕事ができるのです。

可逆 WebP は PNG と同じようにすべてのピクセルを正確に保ちながら、より効率よく圧縮します。同じ PNG より通常26% 小さくなります。ロゴや画面のスクリーンショットであれば、まったく同一の画像をより小さなファイルで得られ、失うものは何もありません。

非可逆 WebP は JPG と同じようにディテールを捨てますが、それでも透過に対応しています。これは JPG が一度もできなかったことです。WebP 以前には存在しなかった組み合わせがこれです。背景を切り抜いた商品写真は、かつては巨大な PNG を意味しました。写真とアルファチャンネルの両方を保持できる一般的な形式が PNG しかなかったからです。今では、そのごく一部のサイズの非可逆 WebP にできます。

品質の値を高く設定すれば、可逆またはほぼ可逆のふるまいになります。値を下げれば、ディテールと引き換えにサイズを小さくでき、透過はそのまま保たれます。

用途ごとに選ぶべき品質

適切な設定は、その PNG がどんな種類の画像を収めているかで完全に決まります。

• ロゴ、アイコン、フラットなグラフィック — 最高品質を使ってください。輪郭がはっきりしていて色数が少なく、もともとよく圧縮されますし、輪郭まわりのノイズはすぐに目立ちます。
• 文字の入ったスクリーンショット — 高品質、90 以上。文字は非可逆圧縮がもっとも見苦しくなる場所で、字のまわりにうっすらとしたにじみが出ます。
• 透過のある写真 — 80〜85 で十分で、劇的な削減が現れるのはここです。
• グラフや図 — 高品質。細い線や色のくっきりした境目こそ、非可逆圧縮がぼかしてしまうものです。
• 大きな背景画像 — ほかのコンテンツの後ろに来るので、75〜85 でたいてい問題ありません。

その根底にある原則は、輪郭のはっきりしたものと文字には高品質が必要で、連続階調には必要ないということです。

透過は保たれます — ただし 1 点だけ確認を

WebP は PNG と同じく、完全な 8 ビットのアルファチャンネルに対応しています。柔らかな影、ぼかした縁、アンチエイリアスのかかった曲線、部分的な透過はすべて正しく引き継がれます。GIF のような、あるかないかだけの粗い透過ではありません。

低い品質設定で変換したあとに確認しておきたい唯一の点は、切り抜きの縁です。非可逆圧縮は色のデータに対して働くため、半透明の縁のピクセルが、元画像でその後ろにあった色のうっすらとした輪をまとうことがあります。品質 80 以上できれいに切り抜かれていれば、見えることはありません。強い色を背景に細かくぼかした縁を持つ、強く圧縮された画像では見えるかもしれません。公開する前に、境目を等倍で確認してください。

使い方

• PNG をアップロード — アップロード領域をクリックするか、.png ファイルをドラッグ＆ドロップします
• 品質を選ぶ — 高くするとディテールが多く残り、低くするとファイルが小さくなります
• ダウンロード — WebP を保存します

知っておきたいこと

• 削減量が最も大きいのは写真の PNG です。 写真のスクリーンショットは、見た目を変えずに 90% 小さくなることがあります。
• とても小さなアイコンは縮まないことがあります。 数キロバイト未満では形式のオーバーヘッドが支配的になり、WebP が同程度か少し大きくなることもあります。小さいほうを使ってください。
• 変換前にサイズを縮小してください。 3000 ピクセルの PNG を 300 ピクセルで表示すると、どんなコーデックでも取り戻せないほどのバイトを無駄にします。
• ファビコンは PNG か ICO のままに。 WebP のファビコンへの対応はまちまちで、どちらにしてもファイルはごく小さいものです。
• メールソフトはブラウザーより遅れています。 WebP をいまだに表示しないものもあるため、メールのテンプレートには PNG か JPG を使ってください。
• 元の PNG は保管しておいてください。 その画像が、今後も編集するマスター素材である場合です。

よくある質問

WebP は PNG よりどれくらい小さくなりますか？

多くの人が思うよりはるかに小さくなります。可逆 WebP は、ピクセル単位でまったく同じ結果のまま、同じ PNG より平均で約 26% 小さくなります。PNG にはまったくできない非可逆 WebP に切り替えると、通常 60〜80% の削減になり、PNG で保存された写真なら 90% を超えることもあります。写真の要素が多いほど、効果は大きくなります。

透過した背景は保たれますか？

はい。WebP は PNG とまったく同じ完全な 8 ビットのアルファチャンネルに対応しているため、柔らかな影、ぼかした縁、部分的な透過はすべて残ります。これは透過をまったく持たない JPG に対する WebP の大きな利点の 1 つです。品質設定がとても低い場合は、切り抜きの縁にうっすらとした色の輪が出ていないか確認してください。

非可逆と可逆のどちらの WebP を使うべきですか？

ロゴ、アイコン、図、文字の入ったスクリーンショットには可逆です。輪郭がはっきりしたものや文字があるものは圧縮ノイズが目立ちますし、そもそもファイルが小さいからです。写真には非可逆で、透過した背景を持つ写真も含みます。削減量が大きく、品質 80 以上なら損失は見えません。

そもそもなぜ私の PNG はこんなに大きいのですか？

ほぼ間違いなく、写真が入っているからです。PNG はすべてのピクセルを正確に保存し、繰り返しを見つけて圧縮しますが、写真にはまったく同一の繰り返しがほとんどないため、まとめられるものがありません。PNG はフラットなグラフィックや画面のスクリーンショットには適した選択で、写真の内容には適さない選択です。

あとで PNG に戻せますか？

はい、透過も往復して残ります。ただし非可逆 WebP で変換した場合、その段階で捨てられたディテールは永久に失われています。戻しても得られるのは圧縮された画像の PNG であって、元の画像ではありません。再び編集する必要があるなら、PNG のマスターを残しておいてください。

WebP はメールで使えますか？

確実とは言えません。ブラウザーの対応は現在では全面的ですが、メールソフトはかなり遅れており、いくつかは WebP に対して何も表示しません。メールのテンプレートには PNG か JPG を使ってください。同じ注意は、一部のデスクトップソフト、印刷のワークフロー、PNG と JPG しか受け付けないアップロードフォームにも当てはまります。

画像はサーバーに送信されますか？

いいえ。変換は完全にブラウザーの中で行われるため、ファイルがコンピューターから出ることはありません。これは特にスクリーンショットで重要で、氏名、住所、口座番号、社内システムなどが写り込んでいることがよくあります。

関連ツール

• WebP から PNG — 逆方向、透過を保ったまま
• JPG から WebP — 透過のない写真向け
• 画像圧縮 — 形式を変えずに画像を小さくする
• 背景除去 — そもそもの透過を作る