PNG を WEBP に変換

PNG は汎用の圧縮方式(DEFLATE、.zip ファイルと同系統)を使い、写真かアイコンかを区別せず、単に繰り返すバイトを圧縮するだけです。WEBP は動画符号化から借りた予測技術に頼るため、圧縮前に隣り合うピクセルの関係をモデル化し、同じ画像でも目に見えて小さいファイルになります。

違いは実際のページで最も早く現れます。1200×800 の製品スクリーンショットを PNG で書き出すとしばしば約 420 KB になりますが、同じ画像を可逆 WEBP で保存すると約 300 KB まで下がり、品質 80 の非可逆 WEBP なら 60〜90 KB まで下がって、通常の表示サイズでは見た目の違いはありません。こうした画像を 20 枚載せたページなら、その差は瞬時に開くページと待たされるページの差になります。

WEBP は珍しく、一つの形式で両方のモードを提供します。可逆 WEBP は PNG のピクセルを正確に再現し、同じ内容の PNG よりたいてい 25〜35% 小さくなります。ロゴやアイコン、1 ピクセルの違いが問題になる画像に向きます。非可逆 WEBP は JPG に近く、目にほとんど気づかれない細部を捨てる代わりにずっと小さいファイルになり、品質 75〜85 では写真調のスクリーンショットが元とほぼ見分けがつかないまま、容量は 5 分の 1 で済みます。

このページのスライダーで画像ごとにその曲線上の位置を選べるので、単色のインターフェースアイコンは可逆のまま、写真入りのバナーは非可逆にする、といった使い分けがツールを変えずにできます。

アルファ透明はそのまま通ります。背景が透明な PNG ロゴは、可逆・非可逆どちらのモードでも WEBP でまったく同じ透明さを保ちます。これは JPG にはできないことです。ブラウザの対応もすでに実質的な問題ではなくなっています。現行版の Chrome・Firefox・Safari・Edge はすべて WEBP をネイティブに描画し、それも何年も前からのことです。

残る差はブラウザの外にあります。一部の古いデスクトップビューアー、専用プラグインのないデザインツール、いくつかのアップロードフォームは今も PNG や JPG を前提にしています。あなたの WEBP が Web サイト向けなら、この差はほとんど問題になりません。古いプログラムで開く必要があるなら、PNG を作業用ファイルとして残し、実際に Web に配信するページだけ WEBP を書き出してください。

PNG はあなたのブラウザ内でローカルにデコードされ WEBP に再エンコードされるので、何もアップロードされず、ページを離れた後にコピーも残りません。まだ公開していないデザインや、第三者サービスに渡したくない顧客のスクリーンショットにとってこれは大事な点で、アップロードの待ち行列で遅くなることもありません。100 枚のスクリーンショットが入ったフォルダも、あなたの端末が処理できる速さで変換されます。まとめて追加し、品質を一度設定して、結果を個別に、または ZIP でダウンロードしてください。