ほとんどのプロジェクトは、PNGをWebPに変換するために大掛かりなビルドパイプラインを必要としません。必要なのは、ロッシーかロスレスかの明確な判断、ファイルを第三者にアップロードしないツール、そして変換後に何も壊れていないかをすばやく確認する手段だけです。本ガイドはまさにそれをカバーします。

ステップ1 — ロッシー/ロスレスを決める

WebPは同じコンテナで両モードに対応します。コンテンツによって正解が変わります:

写真、グラデーション、カメラ撮影系 → 品質75〜85のロッシー。ピクセル単位で見比べる人以外には差は見えず、元のPNGよりファイルが30〜45%小さくなります。
スクリーンショット、UIモックアップ、チャート、文字付きロゴ → ロスレス。この種のコンテンツではWebPのロスレスコーダーが本当にPNGのDEFLATEより優秀で、すべてのピクセルが保存されます。20〜30%小さくなることが多いです。
混在コンテンツ（写真が埋め込まれたUIスクリーンショット等）→ まず品質90のロッシーで試す。文字や細線がぼやけたらロスレスへ。

ステップ2 — 変換ツールを選ぶ

単発の変換ならブラウザ系ツールが最速です。サーバー側変換は遅延が増え、多くは監査できない第三者サーバーに画像を上げます。私たちのPNG → WebP 変換ツールは、エンコーダーをブラウザ内の WebAssemblyで完結させます — ファイルは端末から出ません。

ビルドパイプライン向けには、Googleが提供する標準エンコーダ cwebp が定番です。 macOSではHomebrewで libwebp の一部として入ります:

brew install webp

そして:

ロッシーは cwebp -q 80 input.png -o output.webp、ロスレスは cwebp -lossless input.png -o output.webp。

写真は品質80がスイートスポット。60を切ると平坦領域にブロックノイズが見え始めます。90を超えると視覚的改善のないままファイルが急速に大きくなります。具体的な目安:

PNGにアルファチャネルがある場合、変換で2つのことがうまくいかないことがあります:

プリマルチプライドアルファ。一部のエンコーダはRGBにアルファを掛ける形を既定にしており、部分透過ピクセルの色を静かに変えます。別の背景に合成するとハロや色のズレが現れます。cwebp に -exact を渡すか、元のRGBを保持する変換ツールを使ってください。
ロッシーWebPのアルファ量子化。既定では、ロッシーWebPはアルファチャネルを量子化してバイトを節約します。エッジを綺麗に保ちたいUIアセットでは -alpha_q 100 を渡すか、ロスレスを使ってください。

WebPをコミットする前に3つチェック:

視覚的に差分を見る。両ファイルを既定ビューアで開き、すばやく切り替えます。 1秒切り替える間に差が分かるなら品質が低すぎです。
ファイルサイズを確認。WebPは元のPNGより小さくなるべきです。大きいなら、ロスレスが向く平坦画像にロッシーを当ててしまったか、元のPNGがすでに（例: oxipng で）大きく最適化されている可能性があります。
本番想定の環境でレンダー。Webサイト向けならステージングに入れてクリックを試す。デスクトップアプリ向けならアプリで開く。最大の落とし穴は、下流ツールが静かにフォーマットをサポートしていないことです。

PNGのフォルダなら、cwebp を回すシェルループで十分:

for f in *.png; do cwebp -q 80 "$f" -o "$${f%.png}.webp"; done

UIアセットはロスレス、写真はロッシー、と混在するフォルダはスクリプトよりWebの一括ツールが速いです。私たちの変換ツールは一度に最大20ファイルまで受け取り並列処理します。

ほとんどの素材で全体のフローはこう: 変換ツールを開き、PNGをドロップし、品質を80のまま、結果をダウンロード。上記の合併症は実在しますが稀です。当たった時の修正も小さい — 品質を上げるかロスレスへ。30〜40%のサイズ削減はすべてのページビューで効き、変換は数秒で終わります。