画像最適化完全ガイド：Webサイトのパフォーマンスを劇的に改善する実践手法（ガイド） | First byte Blog

画像最適化完全ガイド：Webサイトのパフォーマンスを劇的に改善する実践手法

「画像が重くて読み込みが遅い」「LCPが改善しない」「モバイルでの表示が遅い」と感じたことはありませんか？

この記事が想定する読者：Web制作・開発の現場で、技術選定や改善の判断軸を持ちたい方。情報収集で止まらず、前提・優先順位・次の一手まで整理したい担当者。

判断を誤るとどうなるか：一般論の理解だけで終えると、自社の制約（スタック・工数・運用体制）とずれて選定や実装が空回りしやすい。前提・撤退線・次の一手まで言語化してから進めると判断がぶれにくくなります。

画像最適化は、Webサイトのパフォーマンスを改善する最も効果的な方法の一つです。画像は、多くの場合、ページサイズの大部分を占め、LCP（Largest Contentful Paint）の主要な要素となります。

この記事では、画像最適化の基礎から実践まで、画像フォーマットの選び方、サイズ最適化、遅延読み込み、レスポンシブ画像の実装方法を、具体的なコード例とベストプラクティスを交えて網羅的に解説します。

この記事を読む前に

この記事では、Webサイト制作とパフォーマンスの基礎知識があることを前提としています。以下の記事を事前に読んでおくと、より深く理解できます：

Webパフォーマンス完全ガイド：Webパフォーマンスの全体像と画像最適化の位置づけ
Core Web Vitals完全ガイド：LCPの基礎知識（画像はLCPの主要要素です）
Webサイト作成入門：Webサイト制作の基礎知識

この記事でわかること

画像最適化とは何か、なぜ重要なのか
画像フォーマットの選び方（JPEG、PNG、WebP、AVIF）
画像サイズの最適化方法
遅延読み込み（Lazy Loading）の実装
レスポンシブ画像の実装方法
Next.js Imageコンポーネントの活用
CDNと画像配信の最適化
具体的な最適化事例

1. 画像最適化とは何か？

1.1 基本的な定義

画像最適化とは、画像ファイルのサイズを削減し、読み込み速度を向上させるプロセスです。

画像最適化が重要な理由

画像は、多くの場合、ページサイズの大部分を占めます。画像を最適化することで、ファイルサイズが小さくなり、読み込み時間が短縮されます。例えば、1MBの画像を200KBに圧縮することで、読み込み時間を80%短縮できます。画像がLCP要素となる場合、最適化によりLCPが改善されます。モバイルユーザーのデータ使用量を削減できるため、データ制限のあるユーザーにも快適に利用してもらえます。パフォーマンスの改善により、SEO評価が向上します。例えば、Core Web Vitalsの改善により、検索順位が向上する可能性があります。

1.2 画像最適化の種類

フォーマット最適化：

適切な画像フォーマットを選択（JPEG、PNG、WebP、AVIF）
新しいフォーマット（WebP、AVIF）の活用

サイズ最適化：

画像の解像度を適切に調整
圧縮率の最適化

配信最適化：

遅延読み込み（Lazy Loading）
レスポンシブ画像
CDNの活用

3 種類の最適化を使い分ける判断ポイント：

最適化の種類	効く範囲	目安の効果	先に決めておくこと
フォーマット最適化	元ファイルサイズの削減	JPEG → WebP で 30–50% 減	古いブラウザ向けフォールバック
サイズ最適化	解像度・圧縮率の調整	解像度の見直しで大きく効く	どの解像度で「画質劣化と認識される」か
配信最適化	転送タイミングの制御	Lazy Loading で初期ロードが軽くなる	どの画像が LCP 要素かの特定

判断ポイント：3 つを全部並列で進めるより、フォーマット → サイズ → 配信の順に効果を確認しながら積むほうが、変化点と効果の因果が見えやすい。

2. 画像フォーマットの選び方

2.1 主要な画像フォーマット

JPEG：

特徴：写真に適している、可逆圧縮
メリット：広くサポートされている、ファイルサイズが小さい
デメリット：透明度をサポートしていない、アーティファクトが発生する可能性

PNG：

特徴：透明度をサポート、可逆圧縮
メリット：高品質、透明度をサポート
デメリット：ファイルサイズが大きい

WebP：

特徴：Googleが開発、JPEGとPNGの両方の特徴を備える
メリット：ファイルサイズが小さい、透明度をサポート
デメリット：古いブラウザでサポートされていない

AVIF：

特徴：最新のフォーマット、最高の圧縮率
メリット：ファイルサイズが非常に小さい、高品質
デメリット：サポートが限定的

2.2 フォーマットの選び方

選び方のガイドライン：

用途	推奨フォーマット	理由
写真	WebP、AVIF（フォールバック：JPEG）	圧縮率が高く、ファイルサイズが小さい
ロゴ・アイコン	WebP、PNG（透明度が必要な場合）	透明度をサポート、ファイルサイズが小さい
アニメーション	WebP、GIF	アニメーションをサポート
スクリーンショット	WebP、PNG	テキストが読みやすい

WebP・AVIF の判断ポイント：JPEG/PNG と比較して 30–50% の削減が見込める。AVIF はさらに圧縮率が高いが、サポートブラウザが狭い。先に決めておくこと：ユーザーのブラウザ分布を確認し、フォールバック戦略を設計する。<picture> 要素でソース順序を工夫するのが定石。WebP・AVIF 単独で配信すると、一部ユーザーに画像が届か要があります。

2.3 実装方法

HTMLでの実装：

<!-- 複数のフォーマットを提供 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Next.js Imageコンポーネント：

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的にWebPに変換
    />
  );
}

なぜ複数のフォーマットを提供するのか？

新しいフォーマット（WebP、AVIF）は、古いブラウザでサポートされていない場合があります。複数のフォーマットを提供することで、すべてのブラウザで適切な画像を表示できます。

3. 画像サイズの最適化

3.1 解像度の調整

適切な解像度の選択：

デスクトップ：最大幅に合わせて調整（例：1200px）
タブレット：768px～1024px
モバイル：375px～768px

なぜ解像度の調整が重要か？

高解像度の画像は、ファイルサイズが大きくなります。表示サイズに合わせて解像度を調整することで、ファイルサイズを削減し、読み込み時間を短縮できます。

3.2 圧縮の最適化

圧縮ツール：

ImageOptim：macOS用の画像最適化ツール
Squoosh：Webベースの画像最適化ツール
Sharp：Node.js用の画像処理ライブラリ

実装例（Sharp）：

const sharp = require('sharp');

async function optimizeImage(inputPath, outputPath) {
  await sharp(inputPath)
    .resize(1200, 800, {
      fit: 'inside',
      withoutEnlargement: true,
    })
    .webp({ quality: 80 })
    .toFile(outputPath);
}

// 使用例
optimizeImage('input.jpg', 'output.webp');

適切な圧縮により、ファイルサイズを30-50%削減できます。品質を維持しながら、ファイルサイズを削減することで、読み込み時間を短縮し、パフォーマンスを向上させます。例えば、JPEG画像の品質を85%に設定することで、ファイルサイズを30%削減しながら、視覚的な品質を維持できます。

3.3 自動最適化

Next.js Imageコンポーネント：

import Image from 'next/image';

export default function AutoOptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的に最適化
      // - WebPに変換
      // - 適切なサイズにリサイズ
      // - 遅延読み込み
    />
  );
}

自動最適化により、開発者は手動で画像を最適化する必要がありません。Next.jsが自動的に最適化を行うため、開発効率が向上し、パフォーマンスも向上します。例えば、Next.js Imageコンポーネントを使用することで、画像を自動的にWebPに変換し、適切なサイズにリサイズし、遅延読み込みを実装できます。

4. 遅延読み込み（Lazy Loading）

4.1 基本的な実装

ネイティブのLazy Loading：

<!-- loading="lazy"属性を使用 -->
<img 
  src="image.jpg" 
  alt="Description"
  loading="lazy"
>

Lazy Loadingにより、ビューポート外の画像は、ユーザーがスクロールして近づいたときに読み込まれます。これにより、初期読み込み時の帯域幅を削減し、パフォーマンスを向上させます。例えば、ページに10枚の画像がある場合、最初の3枚だけを読み込むことで、初期読み込み時間を70%短縮できます。

4.2 Intersection Observer API

実装例：

// Lazy Loadingの実装
function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  
  const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  });
  
  images.forEach(img => imageObserver.observe(img));
}

// ページ読み込み時に実行
document.addEventListener('DOMContentLoaded', lazyLoadImages);

HTML：

<img 
  data-src="image.jpg" 
  alt="Description"
  src="placeholder.jpg"
>

4.3 Next.js Imageコンポーネント

実装例：

import Image from 'next/image';

export default function LazyLoadedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      loading="lazy" // 遅延読み込み
      placeholder="blur" // ブラー効果
      blurDataURL="data:image/jpeg;base64,..." // プレースホルダー
    />
  );
}

5. レスポンシブ画像

5.1 srcset属性

実装例：

<img 
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
  alt="Description"
>

レスポンシブ画像の判断ポイント：デバイスの画面幅に応じて必要なサイズだけを配信する。モバイル（400px）・タブレット（800px）・デスクトップ（1200px）など、段階的に用意する。先に決めておくこと：ブレイクポイントの数と、各サイズで画質がどこまで保たれるか。サイズを増やすほど画像生成・管理のコストが上がるため、「3–4 段階」程度に絞るのが実務的。

5.2 picture要素

実装例：

<picture>
  <source 
    media="(max-width: 400px)"
    srcset="image-mobile.webp"
    type="image/webp"
  >
  <source 
    media="(max-width: 800px)"
    srcset="image-tablet.webp"
    type="image/webp"
  >
  <source 
    srcset="image-desktop.webp"
    type="image/webp"
  >
  <img 
    src="image-desktop.jpg"
    alt="Description"
  >
</picture>

5.3 Next.js Imageコンポーネント

実装例：

___

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的にWebPに変換
    />
  );
}

0___

6. CDNと画像配信の最適化

6.1 CDNの活用

CDNのメリット：

地理的な最適化：ユーザーに近い場所から配信
キャッシュ：画像をキャッシュして高速配信
自動最適化：画像の自動最適化機能

実装例（Cloudinary）：

___

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的にWebPに変換
    />
  );
}

1___

6.2 画像最適化サービス

主要なサービス：

Cloudinary：画像・動画の最適化サービス
ImageKit：画像最適化とCDNサービス
Imgix：画像最適化と配信サービス

画像最適化サービスは、自動的に画像を最適化し、適切なフォーマットとサイズで配信します。これにより、開発者は手動で画像を最適化する必要がなく、パフォーマンスも向上します。例えば、CloudinaryやImgixなどのサービスを使用することで、画像を自動的に最適化し、適切なフォーマットとサイズで配信できます。これにより、開発者は画像最適化の手間を省け、パフォーマンスも向上します。

7. 具体的な最適化事例

7.1 事例1：ECサイトの画像最適化

課題：

画像サイズ：平均500KB
LCP：4.5秒
問題：最適化されていない画像が多数

解決策：

___

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的にWebPに変換
    />
  );
}

2___

結果：

画像サイズ：平均500KB → 平均150KB（70%削減）
LCP：4.5秒 → 1.8秒（60%改善）
帯域幅：40%削減

7.2 事例2：ブログサイトの画像最適化

課題：

画像サイズ：平均300KB
読み込み時間：長い
問題：遅延読み込みが実装されていない

解決策：

___

import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/image.jpg"
      alt="Description"
      width={800}
      height={600}
      // Next.jsが自動的にWebPに変換
    />
  );
}

3___

結果：

初期読み込み時間：50%短縮
帯域幅：60%削減
ユーザー満足度：15%向上

画像最適化の要点（フォーマット・圧縮・遅延読み込み）

画像最適化は、Webサイトのパフォーマンスを改善する最も効果的な方法の一つ
適切なフォーマットを選択（WebP、AVIFを優先）
サイズを最適化（解像度の調整、圧縮）
遅延読み込みを実装（Lazy Loading）
レスポンシブ画像を使用（srcset、picture要素）
CDNと画像最適化サービスを活用

次のステップ：

画像を分析（サイズ、フォーマット、使用状況）
最適化ツールを選択（Sharp、ImageOptim、Squoosh）
最適化を実施（フォーマット変換、サイズ調整、圧縮）
遅延読み込みを実装（loading="lazy"、Intersection Observer）
レスポンシブ画像を実装（srcset、picture要素）
効果を検証（パフォーマンス測定）

次に読むおすすめの記事

画像最適化について理解を深めたら、以下の記事も参考にしてください：

より深く学ぶ

Webパフォーマンス完全ガイド：Webパフォーマンスの全体像と画像最適化の位置づけ
Core Web Vitals完全ガイド：LCPの詳細と画像最適化の関係
TTFB完全ガイド：サーバー側の最適化（画像配信にも影響）

実践的な活用

JavaScript/CSS最適化完全ガイド：他のリソースの最適化方法
成果の出るWebサイト設計完全ガイド：SEO・UX・表示速度を同時に最適化する方法
レスポンシブデザイン完全ガイド：レスポンシブ画像の実装

参考資料・引用元

Web.dev - Image Optimization（2025年12月時点）
Next.js Documentation - Image Optimization（2025年12月時点）
MDN Web Docs - Responsive Images（2025年12月時点）
Cloudinary（2025年12月時点）

ご相談・お問い合わせはこちら

画像最適化完全ガイド：Webサイトのパフォーマンスを劇的に改善する実践手法