画像最適化でサイト速度を改善する方法（Next.js & Astro編）

はじめに

Webサイトの表示速度改善において、最も効果が大きいのが画像の最適化です。 ここでは Next.js と Astro での基本的な実装方法を紹介します。

Next.js

next/image コンポーネントを使うことで、自動で WebP 変換や遅延読み込みが可能です。

import Image from 'next/image';

export default function Example() {
  return <Image src="/example.jpg" alt="サンプル" width={800} height={600} />;
}

Astro

Astro の astro:assets を使うと、ビルド時に最適化された画像を生成できます。

---
import { Image } from 'astro:assets';
import sample from '../assets/example.jpg';
---
<Image src={sample} alt="サンプル" widths={[400, 800]} formats={['webp']} />

共通のポイント

• WebP や AVIF など軽量フォーマットを利用する
• 表示サイズに合わせたリサイズを行う
• Lazy Loading で表示外の画像を遅延読み込む

おわりに

Next.js も Astro も、公式機能で簡単に画像最適化ができます。 まずはファーストビューの画像から最適化し、LCP 改善とユーザー体験向上につなげましょう。