画像や動画を軽量化してWebページのレスポンス速度を上げる

画像や動画を軽量化してページ速度を上げる

Webサイトの表示速度は、UXやSEOに直結する重要な要素です。
特に画像や動画は容量が大きく、ページロードを遅くする原因になりがちです。
この記事では、フロントエンド視点での軽量化テクニックをまとめます。

1. 画像の軽量化

1-1. 適切なフォーマットを選ぶ

用途	推奨フォーマット
写真・グラデーション	WebP, AVIF
アイコン・イラスト	SVG
GIFアニメーション	WebP, APNG

# WebPへの変換（コマンドライン例）
cwebp input.png -o output.webp

1-2. 画像サイズを最適化

• レスポンシブ画像で画面サイズに応じた画像を配信
• Next.jsやNuxtでの自動リサイズコンポーネント活用

<!-- Nuxt Image Example -->
<NuxtImg src="/example.jpg" width="600" height="400" format="webp" />

1-3. 圧縮ツールを使う

• ImageOptim（Mac向けデスクトップアプリ）
• Squoosh（ブラウザ上で簡単に圧縮可能）
• imagemin（npmでの自動圧縮）

# imageminをインストール
npm install imagemin imagemin-webp

2. 動画の軽量化

2-1. 適切なフォーマット

• MP4（H.264 / H.265）
• WebM（VP8 / VP9）
  → ブラウザ互換と圧縮率のバランスで選択

2-2. 解像度・ビットレートの調整

# ffmpegで動画を圧縮する例
ffmpeg -i input.mp4 -vcodec libx264 -crf 28 -preset fast output.mp4

• -crf（品質）を上げるほど圧縮率が高くなる（数値が大きいほど軽量）
• -preset fast はエンコード速度の設定

2-3. 遅延読み込み（Lazy Load）

<video controls preload="none" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

preload="none" にすることで初期ロード時に動画を読み込まない
サムネイル表示でUXを維持

3. Webフロント向け最適化

• CDNを活用する
  • 画像・動画をCDN経由で配信することで表示速度を改善
• ブラウザキャッシュを利用
  • Cache-Control ヘッダで再読み込みを抑制
• Lazy Load / Intersection Observerを活用
  • 画面外コンテンツを遅延読み込み

// Intersection Observerで画像を遅延読み込み
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));

4. まとめ

• 適切なフォーマット選択（WebP, AVIF, SVG）
• 画像・動画の解像度・圧縮率の最適化
• Lazy LoadやCDNを活用した配信改善