PNG→WebP 変換

PNG のスクリーンショットを、透明部分を保ったままずっと軽い WebP にできます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

PNG→WebP 変換でできること

PNG はスクリーンショットの標準形式ですが、重いのが難点です。WebP は文字のシャープさと透明部分を保つため、ドキュメント、ブログ、ウェブアプリで PNG をそのまま置き換えられ、たいてい数分の一のサイズになります。JPG と違って透明な背景は透明なまま残るため、ロゴや角丸のスクリーンショットはどんなページの色の上でも使えます。

「画質」の既定値は 90% です。下げるとさらに小さくなり、文字の多いスクリーンショットでも 80% 程度までならたいていくっきり保たれます。20 枚までの一括変換では、ファイルごとに変換前後のサイズが表示されます。スクリーンショットの縮小もしたい場合は、スクリーンショット圧縮で最大幅を設定できます。

例

ドロップするもの

onboarding-step-1.png
onboarding-step-2.png
onboarding-step-3.png

得られるもの

onboarding-step-1.webp
onboarding-step-2.webp
onboarding-step-3.webp
各行に変換前 → 変換後のサイズと割合が表示されます

PNG の透明なピクセルは、WebP ファイルでも透明なまま残ります。

PNG→WebP 変換の使い方

「ファイルを選択」をクリックするか、PNG を 20 枚までドロップします。
「形式」は WebP のままにして、「画質」を設定します。
「.webp ファイル 3 件をダウンロード」か、各ファイルの「ダウンロード」リンクをクリックします。

知っておきたいこと

これは非可逆の WebP です。デザイン仕様やドット絵など、ピクセル単位で正確なコピーが必要な場合は PNG のままにしてください。
WebP は幅も高さも 16,383 px を超えられません。とても縦長なページ全体のキャプチャは、収まるように縮小されます。
.webp のアップロードを受け付けない CMS やメールツールもまだあります。ライブラリ全体を変換する前に確認してください。

PNG→WebP 変換についてよくある質問

WebP は PNG のように透明に対応していますか？

はい。WebP には完全なアルファチャンネルがあるため、透明なピクセルや、やわらかい影のような半透明のピクセルも保たれます。画像やスクリーンショットで JPG ではなく WebP を選ぶ主な理由はこれです。

ドキュメントのスクリーンショットに WebP を使うべきですか？

ドキュメントのプラットフォームが対応していれば、たいていは使うべきです。80〜90% の WebP は、PNG よりずっと小さいサイズで UI の文字をくっきり保つため、ページの読み込みが速くなります。後で編集する場合に備えて、元の PNG は残しておいてください。

WebP が PNG より大きくなることがあるのはなぜですか？

数色の単色だけのアイコンなど、ごく小さい画像や平坦な画像は、PNG ですでによく圧縮されています。高画質の非可逆 WebP のほうが大きくなることがあります。そうした画像は PNG のままにしてください。