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でレイアウトのずれを防ぎます。
まとめ
画像を軽くする作業は、圧縮率だけを調整すれば終わりではありません。
- 表示サイズに合わせてリサイズする
- 内容に適した形式を選ぶ
- 圧縮後の画質を実画面で確認する
- 端末に合った画像を配信する
この順番なら、見た目を維持しながら通信量を減らせます。画像圧縮を公開前のチェック項目にすると、画像が増えても表示速度を管理しやすくなります。