今回の仕上がりと比較条件
元はJS Paintで描いた家の図です。Squooshへ同じPNGを読み込み、MozJPEGの品質75、WebPの品質75・Effort 4でそれぞれ保存しました。683×384pxを保ち、リサイズと減色は使っていません。表示画面のkBではなく、保存先のファイルサイズをバイト単位で比べています。
| 保存形式 | 実容量 | 元との差 |
|---|---|---|
| 元のPNG | 683バイト | 基準 |
| MozJPEG・品質75 | 3,881バイト | 3,198バイト増 |
| WebP・品質75、Effort 4 | 1,562バイト | 879バイト増 |
形式名だけでは、減るかどうかは決まらない
元のPNGはパレット形式で、確認したメタデータは1ビットでした。色数の少ない図が、すでに小さなファイルとして保存されています。一方、今回のJPEGとWebPは損失のある設定です。形式ごとの符号化や付随データの違いもあり、品質を下げた形式へ移しても、小さい元画像を必ず下回るとは限りません。
この結果から「PNGはいつでも最小」「WebPは使わない方がよい」とは言えません。写真、透明な画像、大きな図、品質設定が異なれば結果も変わります。今回は1点の図だけで、画質の客観評価や各形式の最適設定を求める実験ではありません。
保存したファイルを採用する前に確認する
まず元画像を残し、変換後を別名で保存します。保存先で形式・寸法・容量を確認し、実際に使う表示幅で文字、線、輪郭を見比べてください。圧縮ツールの成功表示は、軽量化と見た目の両方に合格したことまでは意味しません。
今回の用途では元PNGを残す判断になります。拡大表示の違いを試したい場合は、SVGとPNGを24pxと192pxで比べた別の実験もあります。寸法を変える話と、同じ寸法で保存形式を変える話は分けて考えます。
話題の調査と、この検証の範囲
Xでは、高橋 色椛様の画像最適化ツールの作者投稿を確認しました。2026年10月12日01:46の投稿で、確認時点は表示11回、いいね・リポスト0件です。これを人気や利用者数の証拠とはしません。紹介されたBe Asset Optimizerのインストールと実操作は行っておらず、本記事で使ったのはSquooshです。
変換の具体的な操作はSquooshの使用ガイドに分けています。公式の説明とソースも確認しました。保存ファイルは別ビューアーで開けましたが、スマホ実機、全ブラウザー、大容量画像、透過、AVIFは未検証です。自作画像と比較用コードはCC0。第三者の画像へ同じ配布条件を適用するものではありません。