200 KB の PNG を圧縮ツールに通したら 350 KB になった。ツールが壊れているのではなく、問題は圧縮方式と画像の中身が合っているかにあります。これさえ理解すれば、パラメータを何度も試すのではなく、自分でサイズを制御できるようになります。
まず 2 種類の圧縮を理解する
非可逆圧縮（JPEG、WebP の非可逆モード）は、人の目が鈍い高周波の細部を捨てるので、サイズは 10 分の 1 まで下がることもあります。可逆圧縮（PNG、WebP の可逆モード）は 1 ピクセルも変えず、データの並べ方だけを変えるので、圧縮率は画面の中にどれだけ再利用できる繰り返し模様があるかで決まります。
そこから重要な結論が導けます。可逆圧縮はベタ塗り、大きな色面、規則的な線には非常に効きますが、ノイズやグラデーション、細部が密集した写真にはほとんど効きません。むしろインデックスデータが増えて大きくなることさえあります。
「圧縮すると大きくなる」3 つの典型
1. 写真を PNG で保存する。 写真はピクセルごとに色がわずかに違い、PNG は再利用できる模様を見つけられないので、そのまま正直に保存するしかありません。1920×1080 の写真を PNG にすると 3〜5 MB になることが多く、JPEG（品質 80）なら 300 KB 程度です。
2. スクリーンショットやアイコンを JPEG にする。 逆方向でも失敗します。文字の輪郭やベタ塗りは JPEG の非可逆圧縮で「モスキートノイズ」が出るため、ぼやけを避けようと品質を上げると、今度は元の PNG より大きくなります。文字を含むスクリーンショットは PNG か WebP の可逆のほうが適しています。
3. すでに圧縮済みの画像をさらに圧縮する。 チャットアプリや Web から保存した JPEG はすでに非可逆の結果です。もう一度かけると損失が積み重なるだけで、サイズはほんの少し減り、画質は急速に落ちます。圧縮し直すなら元の素材を探してください。
選び方：中身で判断する
- 写真、人物、風景 → JPEG（品質 75〜85）または WebP 非可逆（同じ画質でさらに 25〜35% 小さい）
- スクリーンショット、グラフ、文字入りの画面 → PNG または WebP 可逆
- アイコン、ロゴ、シンプルなイラスト → SVG（ベクターなので拡大してもぼやけない）
- 背景を透明にしたい → PNG または WebP（JPEG は透明非対応）
- アニメーション → 動画形式か WebP アニメーションを優先。GIF はサイズ効率が最も悪い
形式以外に調整できるもの
最大辺は品質パラメータより効くことが多いです。Web の本文に表示する画像は通常 800〜1200 ピクセル幅で足ります。4000 ピクセルの原図を 1200 に縮めれば、サイズは 1 桁下がり、目ではほとんど違いがわかりません。
品質パラメータ：JPEG は 75〜85 の間に費用対効果の折り返し点があります。それ以上はサイズが急速に増えるわりに、画質の向上はごくわずかです。
メタデータ：カメラの写真は EXIF（撮影地、機材、日時）を含むことが多く、サイズを食ううえプライバシーにも関わります。公開前に削除できます。
ひと言でまとめると
写真は非可逆、スクリーンショットは可逆、まずサイズを縮めてから品質を調整。 これを覚えておけば、「圧縮すると大きくなる」に悩まされることはなくなります。
1 枚の表で形式を決める
まず中身の種類を見て、次に形式を決める。試行錯誤を繰り返さずに済む唯一の順序です。
| 画像の中身 | 第一候補 | パラメータ | 注意 |
|---|---|---|---|
| 写真、人物、風景 | WebP 非可逆 / JPEG | 品質 75〜85 | 透明非対応 |
| 画面のスクリーンショット、文字入り | PNG または WebP 可逆 | 品質調整は不要 | JPEG にしない |
| アイコン、ロゴ、簡単なイラスト | SVG | — | ベクターなので拡大しても崩れない |
| 背景を透明にしたい | PNG / WebP | — | JPEG に透明チャンネルはない |
| 短いアニメーション | WebP アニメ / MP4 | — | GIF はサイズ効率が最悪 |
この表は暗記するものではなく、圧縮の前に「これは写真か、スクリーンショットか」と自問するためのものです。答えが決まれば、後はほとんどパラメータを触る必要がありません。
WebP と AVIF の選び方
WebP はすでに互換性が広く、主要なブラウザがすべて対応しています。同じ画質で JPEG より 25〜35% 小さく、透明とアニメーションにも対応します。現在最も無難な既定の選択です。
AVIF は圧縮率がさらに高く、同じ画質で WebP より 20〜30% 小さくなりますが、2 つの代償を計算に入れる必要があります。エンコードが大幅に遅いこと（バッチ処理では十数倍の時間差になることも）、そして一部の古い端末や古いブラウザではデコード対応がまだ不完全なことです。一般向けのサイトなら、AVIF は「対応していれば使う」強化策であって、唯一の形式にすべきではありません。
実務での堅実な組み合わせは、メイン画像に WebP を出しつつ、JPEG をフォールバックとして残すことです。サイズの利点を保ちながら、少数の環境で真っ白になる事態を避けられます。
透明背景の 3 つの扱い方
- 透明を保つ（PNG / WebP）：アイコン、ステッカー、下地が確定しない要素の上に重ねる場合に向きます。代償はサイズで、とくに広い面積が半透明（影、ぼかしのにじみ）のときは PNG の圧縮率が目に見えて落ちます
- 単色で塗る（JPEG）：最終的に白か濃い色の背景に必ず置かれるなら、その色で背景を塗ってから JPEG で保存すれば、サイズは 3 分の 1 になります。ただし下地がもう変わらないと確信できる場合に限ります
- ベクターにする（SVG）：単色アイコンでは最も理想的な方法です。数 KB のファイルで、いくら拡大しても崩れず、CSS で色も変えられます。複雑なグラデーションやテクスチャはベクター化に向きません
よくある失敗は、透明背景のロゴをそのまま JPEG で保存してしまうことです。透明部分が黒や白の四角になり、濃い色のページに貼ると非常に目立ちます。これは形式の制約で、ソフトの不具合ではありません。
バッチ処理はどの順序で行うか
順序を間違えると画質を無駄に失います。正しい流れは 4 ステップで、順序は入れ替えられません。
- まず切り抜く。不要な領域を除きます。切ってから縮めるほうが、縮めてから切るより細部が残り、計算量も少なくて済みます
- 次に縮小する。目標の表示サイズの 1.5〜2 倍まで縮めます（高解像度ディスプレイ対応）。この工程がサイズへの影響が最も大きく、通常は品質パラメータより効きます
- そのあと圧縮する。形式と品質パラメータを決めて一度で終わらせます。「圧縮して確認、また圧縮して確認」を繰り返さないこと。非可逆圧縮はかけるたびに損失が積み重なる可能性があります
- 最後にメタデータを削る。EXIF の撮影地、機材名、日時を除去します。サイズが減るうえ、プライバシーの漏洩も防げます
逆のよくある失敗は「先に圧縮してから縮小する」です。圧縮段階で失った細部は縮小しても戻らず、損失を一度無駄に捨てることになります。
圧縮後も使えるかをどう判断するか
サムネイルだけで判断しないでください。圧縮前後の 2 枚を 100% 表示で並べ、次の 3 点を見ます。
- 文字の輪郭。非可逆圧縮が最初に破綻する場所で、文字の周囲ににじみや色付きのノイズが出ます
- 大きなグラデーションの空や壁。圧縮しすぎると明瞭な色の帯（バンディング）が出て、滑らかなはずの階調が段状になります
- 細かいテクスチャ。髪、草、布地など。ここが最も潰れやすい部分です
この 3 点が許容範囲なら、実際の表示サイズでは問題になりません。Web 上の画像が原寸 100% で表示されることはほとんどないからです。