PNGをWebPに変換 — 画質はそのまま、容量はぐっと軽く
PNGからWebPに切り替えると、ロスレス圧縮のままファイルサイズを大幅に削減できます。透過にも対応。処理はブラウザ内だけで行われるため、画像が外部に送られることはありません。
ここに画像をドロップ
PNG
最大ファイルサイズ:100 MB · 複数ファイルに対応
PNGをWebPに変換する方法
PNGファイルをアップロードエリアにドロップするか、クリックしてファイルを選択します。
アイコンセット、UIコンポーネント、スプライトシートなど、PNGアセットをまとめてドロップすることもできます。コンバーターはマルチスレッドのWebAssemblyですべてを同時に処理し、ファイルがサーバーにアップロードされることはありません。
ピクセル単位の精度が必要なUIアセット、ロゴ、文字を含むグラフィックにはロスレスWebPを、写真や複雑な画像には非可逆WebPを選びます。
わずかな画質の違いと引き換えに、ファイルサイズを最も大きく減らせます。お好みの品質レベルを設定すると、確定する前に出力ファイルサイズの目安を確認できます。
最適化されたWebPファイルをすぐにダウンロードできます。
元のPNGに透明な背景があった場合も、アルファチャンネルはWebPの出力に完全に保持されます。白で塗りつぶされることも、画質が損なわれることもありません。バッチ変換の場合は、すべてのWebPファイルがZIPアーカイブにまとめられ、ワンクリックで簡単にダウンロードできます。
PNG と WebP の比較：何が変わるか
PNG と WebP の違いを理解すると、用途に合った形式を選びやすくなります。
| 仕様 | PNG | WebP |
|---|---|---|
| 圧縮 | 可逆 | 非可逆/可逆 |
| 品質 | 優良 | 優良 |
| 透過 | はい | はい |
| アニメーション | いいえ | はい |
| ファイルサイズ | 中〜大 | 小 |
なぜ PNG から変換するのか？
- JPGよりファイルサイズが大きくなります
- 写真にはあまり向いていません
- 高度な機能はブラウザの対応が限られています
なぜ WebP を選ぶのか？
- 優れた圧縮効率
- 非可逆圧縮と可逆圧縮の両方に対応
- 透過とアニメーションに対応
PNG を使うのが適している場面
透過や可逆圧縮の画質が必要なときや、グラフィックやロゴを扱うときに向いています。
WebP を使うのが適している場面
最新のWebパフォーマンスを重視し、古いブラウザ向けの代替手段を用意できるときに向いています。
PNGからWebPへの変換が選ばれる理由
WebPのロスレスモードは、PNGと同じ画質を保ちながらファイルサイズを小さくできます。Webアセットにとって、まさに良いこと尽くしです。
Webアセット向けに最適化
ロスレスWebPはデータを一切失わずに画像をエンコードするため、画質はPNGと同じです。それでいて、ファイルサイズは通常20〜30%小さくなります。ロゴやUIアセットに最適です。
アルファチャンネルを完全サポート
WebPは透過をネイティブにサポートしているため、PNGの透明な背景もそのまま引き継がれます。白で塗りつぶされることも、画質が損なわれることもありません。
エンコードモードを選択可能
ピクセル単位の精度が必要なUIアセットにはロスレスモードを、ファイルサイズを極限まで小さくしたい写真には非可逆モードを選べます。
PNGからWebPへの変換 — よくある質問
PNG画像をWebP形式に変換する際のよくある質問にお答えします。
ロスレスWebPは元のPNGと見た目が同じですか？
はい。ロスレスWebPのエンコードでは、すべてのピクセル値が正確に保持されます。出力は元のPNGと見た目も技術的にも同一です。違いはファイルサイズだけで、通常は20〜30%小さくなります。
透明な背景のPNGを変換しても、透過は保持されますか？
もちろんです。WebPはPNGと同じ8ビットのアルファチャンネルをネイティブにサポートしています。ロスレス・非可逆のどちらのWebPモードでも、透明な部分はそのまま引き継がれます。
PNGをWebPに変換する際、ロスレスではなく非可逆を選ぶのはどんなときですか？
PNGに写真や複雑な画像が含まれていて、ごくわずかなピクセルの違いが気にならない場合は、非可逆WebPがおすすめです。ファイルサイズをぐっと小さくできます。ロゴ、アイコン、UI要素、くっきりした文字を含む画像など、ピクセルの正確さが重要な場合はロスレスを選んでください。
ロスレスWebPのほうが、PNGよりわずかに大きくなることがあるのはなぜですか？
PNGは、特定の種類のコンテンツ、特にべた塗りの広い領域や繰り返しパターンを含む画像に対して高度に最適化されています。そのような場合は、PNGのdeflate圧縮のほうがロスレスWebPより優れることがあります。ただし、非可逆WebPであれば常により小さくなります。
OGP画像やSNSのサムネイルにWebPを使えますか？
FacebookやTwitter/X、LinkedInなど、多くのSNSでは、クローラーがWebPを確実に取得できない場合があるため、og:imageタグにはJPEGやPNGが今でも推奨されています。ページ内に表示するWeb画像ならWebPが最適ですが、SNSでの共有にはJPEGかPNGを使ってください。
元のファイルを失わずにPNGをWebPに変換する方法はありますか？
当ツールが元のファイルを変更することはありません。アップロードされたPNGを読み取り、メモリ上で変換を行い、WebPを別のダウンロードファイルとして提供します。元のPNGはお使いのデバイスにそのまま残ります。
PNGからWebPへの変換を使うのはこんな方
フロントエンドエンジニア
- PNGのスプライトシートやアイコンセットをWebPに変換して、Webアプリの読み込みを高速化します
- 大きなPNGのヒーロー画像をロスレスWebPに置き換えて、初回描画までのデータ量を数キロバイト削減します
- npmパッケージやCDNに公開する前に、デザインシステムのアセットを最適化します
UI/UXデザイナー
- FigmaからエクスポートしたPNGアセットを、開発者に渡す前にWebPへ変換します
- 透過PNGのオーバーレイをWebPに変換して、Webベースのプロトタイプで使います
- WebPを受け付けるプラットフォーム向けに、アプリストア用のスクリーンショット画像をWebPで用意します
CMS・WordPressユーザー
- WordPressのメディアライブラリに追加する前に、アップロードするPNGをWebPに変換します
- 対応環境でWebPを自動配信するShopifyストア向けに、画像を準備します
- プランのストレージ容量に制限があるWebflowやSquarespaceのサイトで、画像のデータ量を減らします