画像最適化 <img/ > と next/image の違い

Next.js では <img/ > または next/image で画像を扱えます。<img/ > は、画像の最適化機能がありません。next/image は、画像の最適化機能があります。

Next.js には、画像の最適化機能が組み込まれています。next/imageコンポーネントを使って、画像の読み込みを最適化できます。これにより、画像のリサイズ、最適なフォーマットへの変換、遅延読み込みなどが実現できます。

import Image from 'next/image'

function HomePage() {
  return (
    <div>
      <h1>Hello Next.js</h1>
      <Image src="/example.jpg" alt="Example Image" width={500} height={500} />
    </div>
  )
}

export default HomePage

Next.js において、<img /> タグと next/image コンポーネントは、ウェブページに画像を表示する方法が異なります。それぞれの違いを以下に説明します。

<img /> タグ: これは、HTML の標準的な <img /> タグで、ブラウザに画像を表示する基本的な方法です。<img /> タグを使用すると、src 属性に画像の URL を指定することができます。ただし、<img /> タグを使用する場合、パフォーマンス最適化やレスポンシブデザインに関する追加機能がありません。

next/image コンポーネント: Next.js が提供する next/image コンポーネントは、<img /> タグよりも高度な機能を持っています。このコンポーネントを使用すると、画像の最適化、遅延ロード、自動リサイズ、レスポンシブデザインなど、パフォーマンスや表示品質を向上させるための機能が利用できます。next/image コンポーネントは、Next.js アプリケーションでの画像表示に推奨される方法です。

next/image コンポーネントの利点:

1. 画像最適化: 画像を自動的に圧縮し、最適なフォーマットに変換します。これにより、ページの読み込み速度が向上します。
2. 遅延ロード: 画像がビューポートに表示されるまで、読み込みを遅延させます。これにより、ページの初期読み込み時間が短縮されます。
3. 自動リサイズ: デバイスの画面サイズに基づいて、画像サイズを動的に調整します。これにより、レスポンシブデザインが容易になります。
4. サーバーサイドのリサイズ: 画像はサーバーサイドでリサイズされ、クライアントサイドのリソースを節約します。

静的な画像の使用

まず、静的な画像を表示する方法を紹介します。以下のコードを使用して、画像を表示することができます。

import Image from 'next/image'

const ExampleImage = () => {
  return (
    <div>
      <Image src="/example.jpg" alt="Example Image" width={500} height={500} />
    </div>
  )
}

export default ExampleImage

ここで、srcは画像のパスを示し、 altは画像の説明文を示します。 widthと heightは、画像の表示サイズを示します。

動的な画像の使用

次に、動的な画像を表示する方法を紹介します。以下のコードを使用して、画像を表示することができます。

import Image from 'next/image'

type Props = {
  src: string
  alt: string
  width: number
  height: number
}

const DynamicImage = ({ src, alt, width, height }: Props) => {
  return (
    <div>
      <Image src={src} alt={alt} width={width} height={height} />
    </div>
  )
}

export default DynamicImage

ここで、src、 alt、 width、 heightは、Propsとして定義されています。これにより、動的な画像 URL とサイズを指定することができます。

Emotion との組み合わせ

最後に、Emotion と組み合わせて next/image を使用する方法を紹介します。以下のコードを使用して、画像を表示することができます。

import Image from 'next/image'
import { css } from '@emotion/react'

const ExampleImage = () => {
  return (
    <div
      css={css`
        width: 500px;
        height: 500px;
      `}
    >
      <Image src="/example.jpg" alt="Example Image" layout="fill" />
    </div>
  )
}

export default ExampleImage

ここで、 layout="fill"は、親要素のサイズに合わせて画像を拡大縮小することを示します。また、 cssを使用して、親要素のスタイリングを行うことができます。

以上が、Next.js と TypeScript と Emotion を使用した next/image の使い方になります。