画像を速く読み込ませる方法と表示速度の最適化

最適化されていない大きな画像は、ウェブページが遅くなる最大の原因で、遅いページは訪問者も検索順位も失います。画像を速く読み込ませる方法は難しくありません。適切な形式を選び、表示サイズに合わせてリサイズし、圧縮して、あとはブラウザとCDNに任せます。この記事では、読み込み時間を改善する画像最適化の手法をすべて紹介します。各手順は、ブラウザ上で使える無料ツールで行えます。

画像の表示速度が重要な理由

画像は、たいていウェブページでいちばん重い部分です。画像が大きすぎるとページの表示が遅くなり、訪問者は離れてしまいます。ページ速度とCore Web Vitalsを順位の評価に使うGoogleも、その点を見ています。画像の最適化は、ユーザー体験にもSEOにも大きな効果がある取り組みのひとつです。

1. 表示サイズに合わせて画像をリサイズする

いちばんよくある間違いは、巨大な画像をそのままアップロードし、画面上でブラウザに縮小させることです。レイアウト上で幅800ピクセルで表示する画像に、幅4000ピクセルのファイルを使うと、ダウンロードの大半が無駄になります。アップロードする前に、実際に表示されるサイズにリサイズしましょう。

無料の画像のリサイズなら、ブラウザ上でピクセル数を正確に指定できます。画像の一括リサイズを使えば、フォルダ内の画像をまとめて処理でき、画像の多いギャラリーやポートフォリオに最適です。

2. 画像を圧縮する

圧縮は、目では気づかないデータを取り除き、画質をほとんど落とさずにファイルサイズを大きく減らします。画像を軽くするいちばん手早い方法です。

非可逆圧縮はファイルがもっとも小さくなり、写真に向いています。
可逆圧縮はすべてのピクセルを保つので、ロゴやイラストに向いています。

1枚の画像は画像の圧縮で圧縮できます。KB単位でサイズを指定することもできます。複数の画像は画像の一括圧縮でまとめて処理できます。処理はすべてブラウザ内で行われるので、ファイルがアップロードされることはありません。

3. 適切な画像形式を選ぶ

選ぶ形式によって、画質もファイルサイズも変わります。

WebPは、現在のウェブでいちばんおすすめの形式です。同じ画質ならJPGやPNGより小さく、透過にも対応しています。PNGをWebPに変換やJPGをWebPに変換で変換できます。
JPGは写真に向いています。細部の再現より、小さいサイズが重要な場合に適しています。
PNGはイラスト、ロゴ、透過が必要な画像に向いていますが、ファイルは大きくなります。
GIFは、簡単なアニメーションだけに使いましょう。

4. デバイスごとに適切な解像度で配信する

スマートフォンに、パソコンと同じ大きな画像は必要ありません。srcset属性や、CMSのレスポンシブ画像機能を使うと、各デバイスが画面に合ったサイズの画像をダウンロードします。これだけで、モバイルでの読み込み時間を大きく短縮できます。

5. 遅延読み込みを有効にする

遅延読み込みは、画面の外にある画像を、訪問者がスクロールして近づくまで読み込まない仕組みです。ページが使える状態になるまでの時間が大きく短くなります。最近のブラウザは標準で対応しているので、画像タグにloading="lazy"を加えるか、CMSで有効にするだけです。

6. ブラウザキャッシュを活用する

キャッシュがあると、再訪問した人はブラウザに保存済みの画像を再利用でき、もう一度ダウンロードする必要がありません。サーバーの設定、たとえば.htaccessファイルで画像の有効期限を設定し、ブラウザが数週間から数か月間保持するようにしましょう。

7. コンテンツデリバリーネットワーク(CDN)を使う

CDNは、画像のコピーを世界中のサーバーに保存し、訪問者にいちばん近いサーバーから配信して、データが移動する距離を短くします。Cloudflareなどのサービスを使うと、特に世界中から訪問がある場合に、画像の配信が目に見えて改善します。

画像の多いギャラリーやポートフォリオを速くする方法

写真のポートフォリオや商品ギャラリーのように画像が多いページでは、画像の重さが積み重なるので、特に注意が必要です。効果が高い組み合わせは次のとおりです。

一括でリサイズして、すべての画像を表示サイズにそろえます。画像の一括リサイズを使います。
一括で圧縮して、全体を軽くします。画像の一括圧縮を使います。
WebPに変換して、ファイルをさらに小さくします。
遅延読み込みで、表示範囲内の画像だけを先に読み込みます。

これらを組み合わせると、重くて遅い画像だらけのページが、ほぼ一瞬で表示されるページに変わります。

画像最適化の効果をテストする

最適化したら、結果を測定しましょう。GoogleのPageSpeed InsightsやGTmetrixなどの無料ツールで、ページの速度を採点でき、まだ大きすぎる画像も指摘されるので、次に何を直せばよいかが正確に分かります。

よくある質問

ウェブサイトの画像を速く読み込ませるにはどうすればよいですか？

各画像を表示サイズにリサイズし、圧縮して、WebPなどの新しい形式を使い、遅延読み込みを有効にして、CDN経由で配信します。たいていは、リサイズと圧縮だけで最も大きな速度改善が得られます。

読み込み時間を改善する画像最適化の手法には何がありますか？

特に効果が高いのは、表示サイズへのリサイズ、圧縮、WebPの利用、デバイスごとのサイズでの配信、画面外の画像の遅延読み込み、ブラウザキャッシュ、CDNです。

高速表示にいちばん向いている画像形式は何ですか？

現在のウェブで速度を重視するなら、WebPがおすすめです。同じ画質でJPGやPNGより小さなファイルになり、透過にも対応しています。WebPが使えない場合は、写真にJPGを使いましょう。

Google PageSpeed向けに画像を最適化するにはどうすればよいですか？

Google PageSpeed Insightsは、サイズが大きすぎる画像や圧縮されていない画像を指摘します。表示サイズへのリサイズ、圧縮、WebPへの変換、遅延読み込みの追加で改善し、もう一度テストしてスコアが上がったことを確認します。

ポートフォリオのように画像が多いページを速くするにはどうすればよいですか？

すべての画像を一括でリサイズして圧縮し、WebPに変換して、遅延読み込みで表示範囲内の画像だけを先に読み込みます。画像の多いポートフォリオを速くする、いちばん手早い方法です。

画像を圧縮すると画質は落ちますか？

非可逆圧縮は、目にほとんど分からないデータを取り除くので、きちんと圧縮した画像はほぼ同じに見えながら、ずっと軽くなります。可逆圧縮はすべてのピクセルを保ちますが、ファイルの縮小幅は小さくなります。

まとめ

画像が速くなると、訪問者の満足度が上がり、直帰率が下がり、SEOも良くなります。まずは効果がいちばん大きい2つ、表示サイズへのリサイズと圧縮から始めましょう。ブラウザで使える無料のリサイズと圧縮のツールなら、どちらもすぐに終わり、処理する画像が端末の外に出ることはありません。