ページの表示が遅いとき、原因の多くは画像です。文章やコードに比べて画像は桁違いに重く、 1枚数MBの写真をそのまま貼るだけで表示は目に見えて遅くなります。 ここでは、見た目をほとんど変えずに容量だけを落とす手順を、実務の順番どおりに説明します。

1. まず「形式」を選ぶ

圧縮の前に、形式選びで結果の大半が決まります。迷ったら次の基準で十分です。

  • 写真・グラデーションのある画像 … JPG。色数が多い画像を小さくするのが得意です。
  • ロゴ・図版・文字入り・透過が必要 … PNG。輪郭がくっきりしたものを劣化なく保存できます。
  • とにかく軽くしたい・対応環境が今どき … WebP。多くの場合、同じ見た目でJPGより2〜3割軽くなります。

写真をPNGで保存すると、必要のない情報まで丁寧に残すため容量が跳ね上がります。 「写真なのにPNG」は、重さの原因として非常によくあるパターンです。

2. 品質は「見た目が変わる直前」まで下げる

JPGやWebPには品質（クオリティ）の設定があります。100に近いほど綺麗ですが容量も増えます。 実務では 75〜85 あたりが目安です。この範囲なら、並べて見比べても違いに気づく人はほとんどいません。 逆に60を下回ると、空や肌のなだらかな部分にノイズやムラが出はじめます。

コツは、いきなり数値を決めないことです。品質を少しずつ下げていき、 劣化が見えた一歩手前で止めるのが、いちばん無駄のない設定になります。

3. 「容量の上限」を決めて自動で合わせる

とはいえ1枚ずつ品質を探るのは現実的ではありません。 そこで有効なのが、品質ではなく容量から逆算するやり方です。 「1枚200KB以内」のように上限を決めておけば、あとはその範囲に収まる品質を自動で探してくれます。

この方式なら、明るい写真も暗い写真も、複雑な絵も単純な絵も、 すべて同じ「重さの基準」に揃います。ページ全体の表示速度を見積もりやすくなるのも利点です。

4. フォルダ丸ごと一括で処理する

サイト制作では、画像は数十枚〜数百枚まとめて扱うのが普通です。 1枚ずつ処理していては終わりません。フォルダごと投げ込んで一括変換し、 フォルダ階層を保ったまま書き出せる方式にしておくと、 差し替えのときにパスが崩れず安全です。

5. やってはいけないこと

  • 元画像を上書きしない … 圧縮は元に戻せません。原本は必ず別に残します。
  • 圧縮済みを再圧縮しない … 劣化が累積します。やり直すときは原本から。
  • 表示サイズより大きい画像を使わない … 幅600pxで表示するのに4000pxの画像を読むのは無駄です。先にリサイズしてから圧縮します。

まとめ

形式を選び、容量の上限を決めて、フォルダごと一括で処理する。 この3つだけで、ほとんどのページは体感できるほど軽くなります。 特別な知識は要りません。まずは手元の重い画像を1枚、上限200KBで試してみてください。