TOMOSHIBI Dev
はじめに
Webパフォーマンスの向上には、画像の最適化が欠かせません。特に、Next.js v15を用いたアプリ開発では、ページの高速化とSEOの強化が求められます。本記事では、Next.js v15とCompressor.jsを組み合わせて、画像の圧縮と最適化を効率的に行う方法を紹介します。
Next.js v15とは
Next.js v15の特徴
Next.jsはReactベースのフレームワークで、以下のような特徴を持っています。
- SSR（サーバーサイドレンダリング）：サーバー側でレンダリングすることで、初回表示速度を向上
- SSG（静的サイト生成）：事前にHTMLを生成することで、キャッシュを活用した高速表示が可能
- ISR（インクリメンタル静的再生成）：一部のページを動的に再生成し、柔軟な運用を実現
- APIルートの提供：サーバーレスAPIを簡単に実装
- 画像最適化（
next/image）：遅延読み込み（Lazy Loading）、WebP変換、レスポンシブ対応などを自動化
特に**next/imageの画像最適化機能**と組み合わせることで、パフォーマンスの向上とSEOの強化が期待できます。
Compressor.jsとは
Compressor.jsの特徴
Compressor.jsは、クライアントサイドで画像を圧縮するための軽量ライブラリです。特徴として以下の点が挙げられます。
- JPEG・PNG・WebPなどの圧縮対応
- クライアントサイドで画像を非同期処理
- 画像品質の調整が可能
- 簡単なAPIで圧縮を実装可能
Compressor.jsを活用することで、Next.jsアプリにアップロードされた画像のサイズを最適化し、パフォーマンスを向上させることができます。
Next.js v15 × Compressor.jsで画像最適化を実装
手順 1: 必要なライブラリのインストール
Next.js v15プロジェクトにCompressor.jsを導入します。
npm install compressorjs
また、Next.jsのnext/imageを使用する場合、以下の設定も行っておきます。
// next.config.js
module.exports = {
images: {
domains: ['yourdomain.com'], // 外部画像を許可する場合
formats: ['image/webp'], // WebPフォーマットを有効化
},
};
手順 2: Compressor.jsを使用して画像を圧縮
Compressor.jsを用いて、ユーザーがアップロードした画像を圧縮する処理を実装します。
おすすめの圧縮率
一般的な用途では、画像品質（quality）を0.6～0.8の範囲に設定するのがベストです。
- 0.8：品質を維持しつつファイルサイズを削減
- 0.6：より軽量化を優先し、多少の画質低下を許容
- 0.4以下：極端な軽量化が可能だが、視覚的な劣化が目立つ
以下のコードでは、品質を**0.6（60%）**に設定しています。
import { useState } from "react";
import Compressor from "compressorjs";
export default function ImageUploader() {
const [compressedImage, setCompressedImage] = useState<string | null>(null);
const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
new Compressor(file, {
quality: 0.6, // 画像品質を60%に設定
success(result) {
const reader = new FileReader();
reader.readAsDataURL(result);
reader.onload = () => {
setCompressedImage(reader.result as string);
};
},
error(err) {
console.error("Compression error:", err);
},
});
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageUpload} />
{compressedImage && <img src={compressedImage} alt="Compressed" />}
</div>
);
}
このコードでは、inputから取得した画像をCompressor.jsで圧縮し、useStateで保持して表示するシンプルなコンポーネントを作成しました。
手順 3: Next.jsのnext/imageと組み合わせて最適化
Next.jsのnext/imageを使用すると、画像の遅延読み込み（Lazy Loading）やWebP変換が自動で行われます。
import Image from "next/image";
export default function OptimizedImage({ src }: { src: string }) {
return (
<Image src={src} width={800} height={600} alt="Optimized Image" />
);
}
これにより、最適化された画像をNext.jsの機能を活かしてレンダリングできます。
SEOの観点での最適化
画像最適化は、SEOにも大きな影響を与えます。以下のポイントを押さえておくと、検索エンジンでの評価が向上します。
1. 画像のWebP化
Next.jsのnext/imageを活用すると、WebPフォーマットへの自動変換が可能です。WebPは、JPEGやPNGよりも30%～50%圧縮率が高いため、GoogleのPageSpeed Insightsでも推奨されています。
2. 適切なalt属性を設定
alt属性には、画像の内容を簡潔に説明するテキストを記述しましょう。これは、Googleの画像検索最適化に寄与するだけでなく、アクセシビリティの向上にもつながります。
3. 適切な画像サイズを提供
next/imageのレスポンシブ対応機能を活用し、不要な高解像度画像の読み込みを防ぎます。
<Image src="/image.jpg" width={800} height={600} sizes="(max-width: 768px) 100vw, 50vw" alt="最適化された画像" />
このコードでは、画面幅に応じた適切な画像サイズを提供し、無駄な帯域消費を防ぎます。
まとめ
本記事では、Next.js v15とCompressor.jsを活用した画像最適化の方法を紹介しました。
- Next.js v15の
next/imageでSEOを強化 - Compressor.jsでクライアントサイド圧縮
- 画像品質は0.6～0.8が推奨
- SEO対策としてalt属性、WebP化、適切なサイズ指定を徹底
Next.jsのパフォーマンスを活かしつつ、Compressor.jsで軽量な画像を扱うことで、ユーザーエクスペリエンスの向上を目指しましょう。
次のステップ
- CloudinaryなどのCDNと組み合わせた高度な画像最適化
- TypeScriptを活用した型安全な実装
- バックエンド（Node.jsやLaravel）での画像最適化との比較
TOMOSHIBI Devでは、今後もWeb開発に役立つ技術を紹介していきます！
