「ページを開くのが遅い」という問題の原因として、最も多いのが画像ファイルのサイズが大きすぎることです。スマートフォンで撮影した写真はそのままだと数メガバイトになることも珍しくなく、何枚も貼ればサイトは一気に重くなります。この記事では、画像を軽くして表示速度を改善するための方法を、無料ツールやWordPressプラグインとあわせて解説します。
画像がサイトを重くする理由
Web サイトは、ページを開くときにサーバーからHTMLやCSS、画像などのファイルを一括ダウンロードします。画像ファイルが大きいと、それだけダウンロードに時間がかかり、表示が遅くなります。
特に影響が大きいのはメインビジュアル（トップのスライダー画像など）とサービス・商品ページに並ぶ画像です。ここを最適化するだけで、体感速度が大きく改善することがよくあります。
参考: サイトの表示が遅いときに確認したいこと 参考: WordPressサイトを速くする設定まとめ
画像最適化の4つの対策
1. 適切なサイズにリサイズする
「画像サイズ」にはピクセル数（幅×高さ）とファイルサイズ（KB・MB）の2種類があります。まずピクセル数を適切に調整することが重要です。
Webサイトで幅800px程度で表示する画像に、3000px幅の画像を使っても意味がありません。あらかじめ表示サイズに合わせてリサイズしてから使いましょう。
- トップのスライダー画像: 幅1,920px程度（高解像度ディスプレイ対応）
- 本文中の画像: 幅800〜1,200px程度
- サムネイル: 幅400〜600px程度
2. 圧縮してファイルサイズを小さくする
リサイズ後もファイルサイズが大きい場合は、画像を圧縮します。圧縮とは、画質をほとんど落とさずにファイルサイズを小さくする処理です。
無料の圧縮ツール
- TinyPNG (tinypng.com): PNG・JPEGをドラッグ&ドロップで圧縮。画質をほぼ保ったまま60〜80%削減できることも
- Squoosh (squoosh.app): Googleが提供するブラウザ上の画像変換・圧縮ツール。WebP変換も可能
3. WebP形式に変換する
WebP（ウェブピー） は、Googleが開発した次世代の画像フォーマットです。JPEGやPNGと比べてファイルサイズを25〜35%程度小さくできます。現在は主要ブラウザすべてがWebPに対応しています。
Squooshを使えばWebPへの変換も無料でできます。変換後のファイルを従来のJPEG・PNGの代わりに使いましょう。
4. 遅延読み込み（Lazyload）を使う
ページを開いたときに、画面外にある画像はすぐに読み込む必要はありません。遅延読み込み（Lazyload） は、スクロールして画像が画面に近づいたタイミングで読み込む仕組みです。初期表示が速くなります。
WordPressの場合、バージョン5.5以降は標準で遅延読み込みが有効になっています。
WordPressでの画像最適化プラグイン
WordPressを使っている場合、プラグインで画像最適化を自動化できます。
| プラグイン名 | 特徴 |
|---|---|
| EWWW Image Optimizer | 無料・国内でよく使われる。アップロード時に自動圧縮・WebP変換も可能 |
| ShortPixel | 高圧縮率。月100枚まで無料 |
| Smush | 一括圧縮機能が充実。無料版でも十分 |
プラグインを導入すると、画像をWordPressにアップロードするたびに自動で圧縮・変換してくれます。既存画像の一括処理機能も多くのプラグインに搭載されています。
撮影・入稿時に気をつけること
最適化の手間を減らすには、最初から適切な状態で用意することが大切です。
- スマートフォンで撮影した写真（数MB）はそのまま使わない
- 入稿前にリサイズ・圧縮してからアップロードする
- Photoshop等で「Web用に保存」を使うと最適化しやすい
- ファイル名は英数字で分かりやすく付ける（SEO的にも有効）
やりすぎて画質を落とさないバランス
圧縮しすぎると画質が粗くなり、見た目の品質が落ちます。特に商品写真や飲食店のメニュー写真など、細部が重要な画像は注意が必要です。
目安として、ファイルサイズが100〜200KB以下かつ画質が問題ない状態を目指しましょう。TinyPNGやSquooshにはプレビュー機能があり、圧縮前後を比較できますので活用してください。
まとめ
画像の最適化は、コストをかけずに表示速度を改善できる取り組みの中でも効果が出やすい施策です。「リサイズ→圧縮→WebP変換」の流れを習慣にするだけで、サイト全体のパフォーマンスが向上します。
どのプラグインを選べばいいか分からない、既存の大量の画像をまとめて最適化したいなど、Web Gearにご相談いただければ状況に合った対応をご提案します。