PNGをWebPに変換
PNG画像をWebPに変換して、Web用に軽くします。透過もそのままで、画像はアップロードしません。
PNGをWebPにオンラインで変換
PNGは多くのデザインツールやスクリーンショットの標準の書き出し形式です。そのため、必要以上に重いPNGファイルを配信しているWebサイトが少なくありません。WebPは同じ見た目を保ち、透過にも対応し、たいていずっと小さくなります。つまりページが速くなり、Core Web Vitalsも改善します。
このページは、WebPを選択した状態で画像変換ツールを開きます。変換はブラウザー内で行われ、画像がアップロードされることはありません。
WebPの効果が最も大きい画像
- メインビジュアルやバナー：デザインツールからPNGで書き出したもの。
- 透過背景の商品画像：PNGでは保存効率が悪い画像です。
- ドキュメントやブログ記事のスクリーンショット。
- ファーストビューに表示されるもの全般：ファイルが軽いほどLargest Contentful Paintが改善します。
品質の選び方
品質100未満では、変換ツールはアルファチャンネル付きの非可逆WebPを書き出します。100にすると、ChromeとEdgeでは代わりに可逆WebPが書き出され、正確ですがずっと大きくなります。写真やイラストなら、75から85でたいていPNGと見分けがつきません。小さな文字や細い線を含むスクリーンショットは、90で試して比べてください。結果の行に両方のサイズが表示されるので、納得できる最も低い設定は数秒で見つかります。
ブラウザーの対応状況とSafariの注意点
主要ブラウザーの現行版はすべてWebPを表示できるので、今日のWebで安心して使えます。一方、canvasからWebPを作成できるかは別の話です。Chrome、Edge、Firefoxはできますが、Safariはできません。その場合、変換ツールは誤ったラベルのファイルを保存する代わりに、その旨を知らせます。Macでは、Chrome、Edge、Firefoxで変換してください。iPhoneやiPadのブラウザーはすべてSafariのエンジンを使っているため、どのブラウザーでもWebPを作成できません。パソコンかAndroidスマートフォンを使うか、写真ならJPGを選んでください。
フォールバック付きでWebPを配信する
ごく古いブラウザーもサポートしているなら、画像をpicture要素で囲み、WebPをsourceに、PNGをimgに指定します。ブラウザーは理解できる最初の形式を使います。JPGの写真にはJPGをWebPに変換が同じ役割を果たし、編集ソフトで再びPNGが必要になったらWebPをPNGに変換で元に戻せます。