PNGをWebPに変換する
サイトの画像を軽くしたいときに。透過を保ったまま、端末内だけでPNGをWebPにします。
ここにファイルをドロップ
またはクリックして端末から選択対応形式: PNG
1回あたり3ファイルまで1ファイル20 MBまで1日5回までProで制限を解除✓ オフラインでも利用可能
ファイルは端末の外に出ません
このツールはブラウザ内だけで動作します。アップロードも保存も行わないため、処理を始める前にインターネット接続を切っても問題ありません。
使用例
例：和菓子店のホームページ、ロゴ・営業日カレンダー・商品写真のPNGをWebPに
小さな和菓子店のホームページが、スマートフォンだと表示に時間がかかります。トップの画像3つがPNGです：logo.png（600×240ピクセル、背景透過）、calendar.png（営業日カレンダーのスクリーンショット、1080×1080）、daifuku.png（いちご大福の写真をPNGで書き出したもの、2000×1500）。
- まずcalendar.pngとdaifuku.pngを入れ、画質0.9（初期値）のまま「WebPに変換」。いちばん大きく減るのは、写真をPNGで保存していたdaifukuです。
- ロゴは文字のふちをくっきり残したいので、2回目に画質を1にして変換します。可逆WebPになり、透過もそのまま残ります。
- ファイル名は拡張子だけが変わり、logo.webp、calendar.webp、daifuku.webpになります。ピクセル数は変わりません。
- 無料プランは1回3ファイル、1日5回まで。この作業で2回分を使います。
| 画像 | 画質 | 仕上がり |
|---|---|---|
| daifuku.png（写真） | 0.9 | 非可逆。見た目はほぼ同じで、大きく軽くなる |
| calendar.png（スクリーンショット） | 0.9 | 非可逆。細かい文字がにじむなら0.95〜1に |
| logo.png（透過ロゴ） | 1 | 可逆。PNGとピクセル単位で同じ、透過も保持 |
3つのWebPをサーバーに上げ、HTMLの画像のパスを.pngから.webpに書きかえれば差し替え完了です。元のPNGは手元に残るので、うまく表示されなければすぐ戻せます。
使い方
- .pngファイルをボックスにドロップするか、端末から選択します。サイト用の素材をまとめて変換できます。
- WebPの画質を設定します。UI素材やスクリーンショットなら0.8〜0.9が最適です。ピクセルを完全に保ちたい場合は1にすると可逆WebPになります。
- 「WebPに変換」を押します。エンコードはブラウザに内蔵されたWebPエンコーダーで行われます。
- 1枚ずつまたはZIPでダウンロードし、プロジェクト内のPNGと差し替えます。
よくある質問
- PNGをWebPにする利点は何ですか？
- 同じ画像であればWebPはPNGより25〜35%程度小さく、PNGで保存されたスクリーンショットや写真ではさらに大幅に小さくなります。画像が軽くなるとページの表示が速くなり、Core Web Vitalsの評価も改善します。Safari 14以降を含む現行ブラウザはすべてWebPを表示できます。
- 画像はアップロードされますか？
- いいえ。PNGのデコードもWebPのエンコードもブラウザ内で完結します。サーバーには何も送信されず、オフラインでも動作します。
- 透過は保持されますか？
- はい。WebPはアルファチャンネルに対応しているため、PNGの透過背景はそのまま透過として残ります。
- 変換は無劣化ですか？
- 画質を1にするとブラウザは可逆WebPを生成し、PNGのピクセルと完全に一致します。1未満では非可逆となり、ファイルは大幅に小さくなります。Web用途なら非可逆で十分です。
- どのブラウザでWebPを作成できますか？
- Chrome、Edge、FirefoxはWebPを作成できます。SafariはWebPを表示できますが、バージョンによっては作成できません。作成できないブラウザでは、PNGを代わりに渡すのではなく、エラーを表示します。
- 画質の設定はファイルごとに変えられますか？
- 1回の変換では、入れたファイルすべてに同じ画質を使います。ロゴは1（可逆）、写真は0.8〜0.9のように分けたいときは、2回に分けて変換してください。
- 無料プランの制限を教えてください。
- 無料プランでは1回に3ファイル、1ファイル20 MBまで、1日5回までです。Proではこれらの制限がなくなります。