Zenn
👻

Reactアプリケーションにおける画像最適化について

2025/02/08に公開
React
tech

Reactアプリケーションで画像を適切に最適化することは、ページの読み込み速度、ユーザー体験（UX）、SEOの向上につながります。しかし、ReactにはNext.jsの next/image のような組み込みの画像最適化機能がないため、手動またはライブラリを活用して最適化を行う必要があります。

1. なぜ画像最適化が必要なのか？

画像が適切に最適化されていないと、次のような問題が発生します。

✅ ページの読み込み速度が遅くなる → 高解像度の画像をそのまま使うと、ページの初回読み込みに時間がかかる。
✅ モバイル環境でのデータ通信量が増える → 不必要に大きな画像が送られ、モバイルユーザーに負担がかかる。
✅ レイアウトシフトが発生する（CLSの悪化） → 画像のサイズを指定しないと、ロード時にレイアウトが崩れることがある。
✅ SEOの評価が下がる → GoogleのCore Web Vitals（特にLCP・CLS）に影響を与え、検索結果の順位が低下する可能性がある。

このような問題を防ぐために、画像の最適化を行う必要があります。

2. Reactで画像を最適化する方法

Reactでは、以下の方法を活用して画像の最適化を行うことができます。

① 適切な画像フォーマットを使用する

JPEGやPNGよりもWebPやAVIFを使用することで、ファイルサイズを50%以上削減できる場合があります。

✅ WebPの利点

  • PNGよりも約30％、JPEGよりも約25％小さいサイズで同じ画質を維持。
  • 透明度（アルファチャンネル）をサポート。
  • ほとんどのモダンブラウザが対応済み。

📌 WebPの画像を使う例

<img src="example.webp" alt="説明画像" width="600" height="400" />

📌 AVIF（次世代フォーマット）を使う場合

<picture>
  <source srcSet="example.avif" type="image/avif" />
  <source srcSet="example.webp" type="image/webp" />
  <img src="example.jpg" alt="画像" width="600" height="400" />
</picture>

※ picture タグを使うことで、ブラウザが最適なフォーマットを選択できます。

② 画像サイズを適切に管理する（レスポンシブ対応）

フルHD（1920×1080）や4K（3840×2160）の画像をそのまま使うと、モバイルユーザーにとって不要に大きなデータを読み込むことになります。デバイスのサイズに応じた適切な画像を提供することが重要です。

📌 srcset を活用

<img 
  srcSet="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="image-800w.jpg"
  alt="レスポンシブ画像"
/>

➡ 異なるサイズの画像を用意し、デバイスごとに最適なサイズを自動で選択できます。

③ 画像の遅延読み込み（Lazy Loading）

ページの最初のロード時にすべての画像を読み込むと、パフォーマンスが低下します。ビューポートに入ったタイミングで画像を読み込む遅延読み込み（Lazy Load）を導入すると、不要な画像の読み込みを防げます。

📌 ネイティブLazy Loadを使用する（loading="lazy"）

<img src="example.jpg" alt="Lazy Load 画像" loading="lazy" />

✅ ビューポートに入るまで画像が読み込まれないので、パフォーマンスが向上！

📌 ライブラリを使う（react-lazy-load-image-component）
react-lazy-load-image-component を使うと、アニメーション付きで画像を読み込めます。

npm install react-lazy-load-image-component

import { LazyLoadImage } from 'react-lazy-load-image-component';

<LazyLoadImage
  src="example.jpg"
  alt="Lazy Load 画像"
  effect="blur"  // ぼかし効果
  width="600"
  height="400"
/>

➡ 効果的な遅延読み込みができ、UXが向上！

④ 画像の圧縮（TinyPNG, Squoosh, Cloudinary などを活用）

Reactアプリにアップロードする前に、画像の圧縮を行うことが重要です。以下のサービスを使うと、簡単に画像サイズを小さくできます。

✅ オンラインツール

  • TinyPNG → PNG・JPEGを圧縮
  • Squoosh → WebPやAVIFにも変換可能
  • Cloudinary → 動的に画像を圧縮し、CDNで配信

✅ 自動圧縮（Node.jsを使用）

npm install imagemin imagemin-mozjpeg imagemin-pngquant

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
  await imagemin(['images/*.{jpg,png}'], {
    destination: 'compressed-images',
    plugins: [
      imageminMozjpeg({ quality: 80 }),
      imageminPngquant({ quality: [0.6, 0.8] })
    ]
  });
})();

➡ 開発時に自動で圧縮することで、無駄な手作業を削減！

まとめ

Reactアプリで画像を最適化するには、次のポイントを押さえることが重要です。

✅ WebPやAVIFなどの軽量フォーマットを使用する
✅ srcset を活用してレスポンシブ対応をする
✅ Lazy Loadを導入して不要な画像の読み込みを減らす
✅ TinyPNGやCloudinaryで画像の圧縮を行う

画像の最適化を適切に行うことで、Reactアプリのパフォーマンスを向上させ、SEOとユーザー体験の向上につなげることができます！ 🚀

Discussion