小規模サイトの表示速度改善メモ：第２回 まず見直したい画像最適化の基本
はじめに
「小規模サイトの表示速度改善メモ」第2回は、画像の軽量化について。
小規模な企業サイトやブログで表示速度が気になる場合、まず見直しやすいのが画像です。
画像は、文章やHTMLに比べてファイルサイズが大きくなりやすく、特にスマートフォンでの閲覧では読み込み時間に影響しやすい要素です。
また、WordPressなどのCMSサイトでは、制作時に画像を最適化していても、運用中に大きな画像をそのままアップロードしてしまい、少しずつページが重くなることがあります。
この記事では、専門的なチューニングの前に確認したい、画像最適化の基本を整理します。
小規模企業サイトのWeb担当者や、WordPressでお知らせ・ブログを更新している方にも取り組みやすい内容です。
画像は、運用中にサイトを重くしやすい
画像の問題は、サイト制作時だけで完結しません。
WordPressなどのCMSでは、公開後もお知らせ、ブログ、事例紹介などで画像を追加していきます。その際、スマートフォンやデジタルカメラで撮影した画像をそのままアップロードすると、1枚で数MBになることもあります。
1枚だけなら大きな問題にならなくても、こうした画像が複数枚あるページでは、表示に時間がかかりやすくなります。
特にスマートフォンで閲覧するユーザーにとっては、画像の重さがそのまま「ページがなかなか表示されない」という体感につながることがあります。
表示サイズに合った画像を使う
画像を軽くするうえで重要なのが画像の表示サイズです。
例えば、ページ上では横幅800px程度で表示している画像に、横幅4000pxの元画像をそのまま使っていると、見た目は小さくても大きなファイルを読み込むことになります。
CSSで小さく表示していても、読み込む画像そのものが大きければ、通信量は減りません。
そのため、画像編集ソフトやオンラインツールを使って、ページ上の表示サイズに合わせて、あらかじめ画像サイズを縮小しておくとよいでしょう。
CMSによっては画像編集機能が組み込まれているものもあるため、管理画面上でリサイズする方法もあります。
ただし、毎回手作業で調整するのは大変です。よく使う画像サイズの目安を決めておくと、更新作業でも迷いにくくなります。
WebPやAVIFを使うと、画像を軽くできる場合がある
画像形式を見直すことも、表示速度改善に役立ちます。
従来は写真にJPEG、透過画像にPNGを使うことが多くありましたが、現在はWebPやAVIFといった、より軽量化しやすい画像形式も利用できます。
特に写真が多いページでは、WebPに変換することでファイルサイズを抑えられる場合があります。
AVIFはさらに軽量化できることもありますが、変換処理や管理のしやすさも含めて検討するとよいでしょう。
ただし、画像形式を変えれば必ず十分というわけではありません。元画像のサイズが大きすぎる場合は、WebPやAVIFに変換しても重さが残ることがあります。
画像形式とあわせて、表示サイズに合った画像を使うことが大切です。
最初に見える大きな画像は、特に軽くしておく
ページを開いたときに最初に見える画像は、特に注意が必要です。
トップページのメインビジュアル、記事ページのアイキャッチ画像、ランディングページのファーストビュー画像などは、ユーザーが最初に目にする要素です。
この画像が重いと、ページ全体の表示が遅く感じられます。
また、ファーストビューにスライダーを置き、複数枚の大きな画像を読み込む構成は、表示速度の面では不利になりやすいです。
見た目の演出だけでなく、本当に複数枚の画像を最初から読み込む必要があるかも検討したいところです。
lazy loadingは「画面外の画像」に使う
lazy loadingは、画面にまだ表示されていない画像の読み込みを後回しにする仕組みです。
記事の下部にある画像や、長いページの途中にある画像には有効です。最初に必要な画像だけを先に読み込み、後で必要になる画像はスクロールに合わせて読み込めるためです。
一方で、ページを開いた時点で見えている画像まで遅延読み込みにしてしまうと、かえって表示が遅く見える場合があります。
そのため、lazy loadingは「画面外の画像を後回しにするためのもの」と考えると分かりやすいです。
WordPressでは、画像に自動でlazy loadingが付く場合もあります。重要なのは、単に遅延読み込みを有効にすることではなく、最初に見える画像まで遅らせていないかを確認することです。
CMSで更新するなら、画像投稿ルールを決めておく
WordPressなどのCMSサイトでは、制作時に画像を最適化していても、運用中に大きな画像が追加されていくことがあります。
そのため、更新担当者が迷わないように、画像投稿時のルールを決めておくことが大切です。
例えば、次のようなルールが考えられます。
- 投稿本文に入れる画像は横幅1200px程度までにする
- アイキャッチ画像の比率を統一する
- スマホ写真をそのままアップロードしない
- チラシ画像はPDFや画像だけで済ませず、必要な情報は本文にも書く
- 画像圧縮ツールやCMS側の自動圧縮を使う
- 不要になった画像を使い回しで増やしすぎない
特に、チラシや案内画像をそのまま掲載する場合は注意が必要です。
画像として掲載するだけでは、ファイルサイズが大きくなりやすいだけでなく、検索エンジンや読み上げ環境に内容が伝わりにくくなることがあります。
必要な情報は、画像だけでなく本文にも記載しておくとよいでしょう。
できるだけCMS側で自動化しておく
画像の最適化は、更新担当者の注意だけに頼ると続きにくいものです。
そのため、可能であればCMS側で自動化しておくと運用が安定します。
WordPressであれば、アップロード時に複数サイズの画像を生成したり、画像最適化プラグインで圧縮やWebP変換を行ったりできます。
ただし、画像最適化プラグインを複数入れたり、外部サービス連携を増やしすぎたりすると、管理が複雑になる場合もあります。
導入後は、実際に画像が軽くなっているか、表示崩れがないか、更新作業が難しくなっていないかを確認することが大切です。
画像を軽くすることは、画質をむやみに落とすことではない
画像最適化というと、画質を落として見栄えを悪くするイメージを持たれることがあります。
しかし、本来の目的は、必要以上に大きな画像を避け、表示用途に合った形式・サイズに整えることです。
商品写真や施工事例写真など、画質が重要な画像は品質を保ちつつ、装飾画像や一覧用サムネイルは軽量化を優先するなど、画像の役割ごとに考えるとよいでしょう。
すべての画像を同じ基準で圧縮するのではなく、「どこで、どの大きさで、何のために使う画像か」を意識することが大切です。
まとめ：画像は制作時だけでなく、運用時にも重くなる
画像は、小規模サイトでも表示速度に影響しやすい要素です。
特にWordPressなどのCMSサイトでは、公開後にお知らせやブログ記事を追加する中で、画像が少しずつ重くなっていくことがあります。
表示速度を改善するには、WebPやAVIFといった画像形式だけでなく、表示サイズ、ファーストビュー画像、lazy loading、CMS投稿時のルールまで含めて考えることが大切です。
まずは、次のような点から見直してみるとよいでしょう。
- 大きすぎる画像をそのままアップロードしていないか
- 表示サイズに合った画像を使っているか
- ファーストビュー画像が重すぎないか
- 画面外の画像にlazy loadingを使えているか
- CMS更新時の画像ルールが決まっているか
- 画像最適化をCMS側で自動化できないか
画像の扱いを整えるだけでも、サイトの表示速度や運用のしやすさは改善しやすくなります。
次回は、「ファーストビューに重い機能を詰め込まない」をテーマに、初期表示の設計について整理します。
シリーズ記事
- 小規模サイトの表示速度改善メモ：第１回 WordPressを毎回動かさないためのキャッシュの考え方
- 小規模サイトの表示速度改善メモ：第２回 まず見直したい画像最適化の基本（←この記事）
