アセット // 記事

Web画像圧縮の基本

Webサイトで使う画像を軽くするときに確認したい、画質、容量、形式、出力前チェックの基本です。

Web画像の圧縮は、単にファイルサイズを小さくする作業ではありません。ページの表示速度、通信量、管理しやすさを整えながら、必要な見た目を保つための調整です。

軽くする理由を決める

画像を圧縮する目的は、表示を速くすること、アップロード容量を抑えること、配布用ファイルを扱いやすくすることなどです。目的が決まっていると、どこまで画質を保つべきか、どの形式を残すべきかを判断しやすくなります。

元の形式を保つか、形式を変えるか

画像圧縮には、元の拡張子を保ったまま軽くする方法と、WebPなど別形式へ変換する方法があります。既存サイトの素材整理や納品前の軽量化では、まず元の形式を保つ方が扱いやすいことがあります。HTMLやCMS側の参照パスを変えずに済むためです。

圧縮後に見るポイント

  • 圧縮後の容量が本当に小さくなっているか
  • 写真のグラデーションや暗部が荒れていないか
  • ロゴや図版の輪郭がにじんでいないか
  • 透過PNGの透明部分が壊れていないか
  • ファイル名やフォルダ階層が変わっていないか

大きくなる場合は元ファイルを使う

すべての画像が圧縮で小さくなるわけではありません。すでに十分最適化されている画像を再エンコードすると、逆に容量が増えることがあります。その場合は圧縮後のファイルを採用せず、元ファイルを残す方が自然です。

まとめて処理するときの注意

フォルダごと画像を軽くする場合、画像以外のファイルが混ざっていることがあります。削除してよいファイルか判断できない場合は、そのまま残して出力する方が安全です。TOOLPOOLの画像一括圧縮では、画像をブラウザ内で処理し、対象外のファイルも同じ階層のままZIPに含めます。