Webサイトやブログに画像を追加したあと、ページの表示が急に遅くなった経験はないでしょうか。

原因の一つは、表示領域より大きな画像をそのまま配信していることです。CSSで小さく表示しても、ブラウザは元のファイルをダウンロードするため、通信量は減りません。

私もスマートフォンで撮影した写真をそのまま掲載し、1枚で数MBの通信が発生していることに後から気づきました。

そこで今回は、画質をできるだけ保ちながらファイルを軽くするために、画像圧縮の前後で確認したい項目と、HTML側の設定を整理します。

なぜ画像ファイルは大きくなるのか

主な原因は次のとおりです。

表示領域よりピクセル数が大きい
写真をPNGで保存している
書き出し品質が必要以上に高い
PCとスマートフォンへ同じ画像を配信している

横幅800pxで表示する写真に、5000pxの元画像は不要です。圧縮率を上げる前にリサイズすると、画質を保ちやすくなります。

形式を選んでから圧縮する

形式	向いている画像
JPEG	写真、人物、風景
PNG	透過画像、ロゴ、文字を含む図
WebP	写真と図の両方、Web配信用

形式選択も画像圧縮の一部です。写真はJPEGやWebPで小さくなる場合がありますが、画面キャプチャは強く圧縮すると文字がぼやけます。

オンラインツールで試す

少数の公開用画像なら、ImageCompress のようなブラウザ型ツールも利用できます。

基本的な流れはシンプルです。

元画像を別に保存する
画像を選択して処理する
容量と画質を比較する
Web用ファイルとして保存する

オンライン処理では保存・削除方針を確認します。契約書や社内資料などの機密画像は、ローカルで処理するほうが安全です。

公開前に画質を確認する

画像圧縮後は、容量だけでなく次の部分を確認します。

人物や商品の輪郭
小さな文字とアイコン
グラデーションと透過部分
QRコードの読み取り

記事内で使う大きさとスマートフォン表示の両方で確認します。

HTML側でも無駄な通信を減らす

複数サイズがある場合は、srcsetで候補を伝えます。

<img
  src="photo-960.webp"
  srcset="photo-480.webp 480w, photo-960.webp 960w"
  sizes="(max-width: 600px) 100vw, 960px"
  width="960" height="640"
  alt="写真の内容"
>

画面外の画像には loading="lazy" を利用できます。ただし、最初に表示するメイン画像は不必要に遅延させません。

各候補も圧縮し、widthとheightでレイアウトのずれを防ぎます。

まとめ

画像を軽くする作業は、圧縮率だけを調整すれば終わりではありません。

表示サイズに合わせてリサイズする
内容に適した形式を選ぶ
圧縮後の画質を実画面で確認する
端末に合った画像を配信する

この順番なら、見た目を維持しながら通信量を減らせます。画像圧縮を公開前のチェック項目にすると、画像が増えても表示速度を管理しやすくなります。