画像の軽量化＆遅延読み込み（Lazy Loading）でWebサイト高速化！

17

Views

Webサイトを高速表示させるために効果的な方法のひとつが、画像の軽量化と遅延読み込み（Lazy Loading）です。この記事では、その基本的な考え方と実装方法をわかりやすく解説します。

画像の軽量化とは？

画像の軽量化とは、見た目の品質を保ちつつ、ファイルサイズをできるだけ小さくすることです。表示速度の向上やデータ通信量の削減につながります。

主な方法

  • 画像フォーマットを見直す（例：JPEG → WebP）
  • 画像サイズを適切にリサイズ
  • 圧縮ツールを使う（TinyPNG, Squoosh など）

Lazy Loading（遅延読み込み）とは？

Lazy Loadingは、ページを開いた直後には見えない画像を、スクロールして見えるタイミングで読み込む手法です。

HTMLだけで実装する例

<img src="example.jpg" loading="lazy" alt="サンプル画像">

loading="lazy"属性を追加するだけで、対応ブラウザでは自動的に遅延読み込みされます。

JavaScriptで実装する方法（より細かく制御したい場合）

Intersection Observer APIを使うと、画像がビューポートに入ったタイミングで読み込むことができます。

document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll("img[data-src]");
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  images.forEach(img => observer.observe(img));
});

HTML例（data-srcを使う）

<img data-src="image.jpg" alt="遅延画像">

注意点

  • loading="lazy"は一部の古いブラウザで非対応
  • 重要な画像（ファーストビューにあるロゴなど）は即時読み込みのままでOK
  • SEOへの影響が出ないよう、alt属性は適切に記述

おわりに

画像の軽量化とLazy Loadingを組み合わせることで、サイトのパフォーマンスを大きく改善できます。ぜひ一度、ご自身のサイトでも導入してみてください。

次回は「動画やiframeの遅延読み込み」や「画像CDN活用による最適化」についてご紹介します！

関連記事