PNGをWebPに変換

PNGファイルが大きい理由

PNGはロスレスです。すべてのピクセルが正確に保存され、それがロゴ、スクリーンショット、インターフェースのグラフィックに最適な理由であると同時に、PNGの写真が同じ画像のJPGの10〜20倍になる理由でもあります。デザインツールがPNG書き出しをデフォルトにするのは安全だからで、効率的だからではありません。その結果、多くのウェブサイトが数百キロバイトで済むはずの画像に数メガバイトのPNGを配信しています。

WebPの違い

WebPはGoogleがウェブ専用に設計しました。2つのモードがあります。ロッシーWebPは動画圧縮に似た予測と変換符号化を使い、同じ見た目の品質のJPGより通常25〜35%小さく、PNGよりはるかに小さいファイルを生成します。ロスレスWebPはPNGと同じくピクセルを正確に保存しますが、より賢い圧縮方式で、通常最適化されたPNGより20〜30%小さくなります。どちらのモードも透明度に対応しており、これがPNGからWebPへの変換が非常に一般的な主な理由です。PNGのサイズの代償を払わずにアルファチャンネルを保てる、初めて広く対応されたフォーマットなのです。

品質設定の選び方

WebPを使う場所

ブラウザが表示先であるところならどこでもWebPを配信してください。ウェブサイト、ウェブアプリ、最近のクライアント向けのメールテンプレート、画像CDNなど。WordPress、Shopify、Webflow、Squarespace、Wixはすべて今日WebPのアップロードを受け付けます。古いビューアーも同時に対応する必要がある場合、標準的なアプローチはHTMLの<picture>要素でWebPソースを先に、PNGまたはJPGのフォールバックを後に置くことです。

印刷入稿、マスターアートワークのアーカイブ、古いバージョンのPhotoshopやIllustratorでファイルを開くクライアントへの送付にはWebPに変換しないでください。PNGマスターを保管し、WebPは配信用フォーマットとして扱ってください。

一括変換

書き出したPNGアセットのフォルダーまるごとを一度にドロップできます。それぞれが同じ品質設定で変換され、結果は元のファイル名に.webp拡張子を付けた1つのZIPでダウンロードされるため、プロジェクトへの差し替えは拡張子の検索置換だけで済みます。