開発者向け画像圧縮と WebP

ドキュメントサイト、README のスクリーンショット、ブログアセットは、大きな PNG や JPEG のまま配布されることが多いです。サードパーティの圧縮サービスにソースをアップロードせず、コミットやデプロイ前にローカルで縮小できます。

WebP が役立つとき

WebP は、同等の視覚品質で写真風画像や UI スクリーンショットにおいて、通常 JPEG や PNG より優れます。CDN や静的ホストがモダン形式を配信する ウェブ配信 では強力なデフォルトです。

メールやレガシーパイプラインで最大互換性が必要なときは JPEG を使う。ロスレスなエッジや透明度が必要なときは PNG を維持する。

実践的なローカルワークフロー

1. 最適化したい画像を集める（docs フォルダ、public/、Figma からのエクスポート）。
2. ブラウザで Image Compressor を開く。
3. 複数ファイルをドロップし、WebP または JPEG を選び、品質は 0.80–0.85 あたりを起点にする。
4. フル解像度のスクリーンショットが不要なら max width（例: 1280）を設定する。
5. Compress all をクリックし、前後のサイズを比較して zip をダウンロードする。

処理はマシン上で完結します。

開発者が見落としがちな点

メタデータ — ブラウザの canvas エクスポートは EXIF と ICC プロファイルを除去します。ウェブアセットでは通常問題ありませんが、写真アーカイブには向きません。

透明 PNG → JPEG — 透明度は単色背景になります。白またはサイト背景色を意図的に選んでください。

PNG の「圧縮」 — ブラウザでの PNG 出力は実質ロスレスです。WebP/JPEG に切り替えない限り、大きな削減は期待できません。

バッチ制限 — 非常に大きな画像や数十ファイルはモバイルブラウザのメモリを使い果たすことがあります。スマートフォンでは小さなバッチで圧縮してください。

関連ツール

先に正確なクロップが必要？ Image Cropper を使う。App Store アセットの準備？ App Market Image Resizer を使う。ストアサイズはサイト圧縮とは別問題です。