【画像圧縮】ブログが重いのは画像のせい。表示速度を上げる圧縮とWebP化

「ブログがなんとなく重い」と感じたとき、まず疑うべきはCSSでもサーバーでもなく画像です。実際、私のブログでも圧縮前はトップページだけで画像合計が約8MBあり、何もせずとも読み込みに5秒近くかかっていました。画像を正しく圧縮・最適化しただけで、読み込みは1.5秒前後にまで改善しました。この記事ではその具体策をまとめます。

この記事で分かること：

• 画像がどれほど表示速度に響くか
• 圧縮（サイズ・品質・形式）の実践手順
• 貼る前にしておきたい基準とチェック方法

なぜ画像がブログを重くするのか

ホームページの転送量の大半は画像です。スマホで撮った写真はそのまま数MB、カメラのRAWはさらに大きくなります。これを縮小もせずアップロードすると、閲覧者の通信量とレンダリング時間の両方を食いつぶします。

速度を測る基準「LCP」

検索エンジンは「主要コンテンツが最初に表示されるまでの時間（LCP）」を評価します。このLCPの引き金になるのは、ページ上部にある大きな画像（ヒーロー画像やアイキャッチ）です。私は自サイトで計測して、LCPが遅いページの約半数が、記事内の大きな画像が原因だったことを確認しました。

圧縮の手順（1枚の画像あたり）

ステップ1：表示に使う寸法に縮小する

まず「画面上で実際に表示する最大幅」に合わせます。ブログ本文は幅800px前後が多いので、記事内画像は幅1200pxあれば十分です。元が4000pxあっても貼り付けると画質の違いは気にならず、下記のようにファイルサイズが激減します。

• 4000px横幅（約4MB）→ 1200pxに縮小（約600KB）
• さらに圧縮 → 約150KB

ステップ2：WebPかAVIFへ変換する

圧縮形式では、JPEGよりWebPの方が同じ画質で2〜3割軽くなり、さらにAVIFなら小サイズに。私の場合はWebPへ一括変換するだけで全体の画像容量が半分以下になりました。SharpやTinyPNG、Squooshなどを用途で使い分けています。

ステップ3：画質設定と確認

• 品質は70〜80%を起点に、目視で破綻しなければ下げる
• 圧縮後に必ず「表示の実寸」で見た目を一度確認する
• 透過が要る画像(ロゴなど)はPNGのまま、写真はWebPで

サイト全体を一括最適化するときの流れ

ツールで一括変換

私が200本超の記事を一括処理したときは、画像フォルダ内のPNG/JPEGを一括WebPへ変換し、旧画像を置き換えました。手作業だと1記事あたり10分ほどかかりますが、まとめてやると作業自体は1時間で終わります。

変換後は必ず表示確認（差し替えミス防止）

変換したすべてのページを再確認し、画像が壊れていないか、代替テキストが消えていないかをチェックします。ファイル名がそのまま残るので、WordPressで使ってる場合はプラグインの「画像を置換」機能を活用します。

続けるコツ：貼る前に一回立ち止まる

一番簡単なのは「もうネイティブに画像を貼らない」こと。私の運用では、アップロード前に必ず幅1200pxと圧縮を確認するようにしました。最初は面倒ですが、慣れると記事1本あたり脇目ふらず30秒で済みます。

まとめ

• ブログの重さの主因は画像転送量、特にページ上部の大きな画像
• まず表示寸法に縮小し、WebP化でさらに2〜3割軽くする
• 品質70〜80%を起点に、目視チェックで落としどころを決める
• サイト全体は一括変換ツールで、変換後は表示確認を必ずする
• 運用ルール「アップロード前に1200px＋圧縮」を作ると継続しやすい