Bildoptimierung

Die Next.js <Image>-Komponente erweitert das HTML <img>-Element um folgende Funktionen:

• Größenoptimierung: Automatische Bereitstellung korrekt dimensionierter Bilder für jedes Gerät unter Verwendung moderner Bildformate wie WebP.
• Visuelle Stabilität: Automatische Vermeidung von Layoutverschiebungen während des Bildladens.
• Schnellere Ladezeiten: Bilder werden nur geladen, wenn sie in den Viewport eintreten (natives Browser-Lazy-Loading), mit optionalen Blur-Up-Platzhaltern.
• Flexibilität bei Assets: Bedarfsgerechte Größenanpassung von Bildern, auch für auf externen Servern gespeicherte Bilder.

Um <Image> zu verwenden, importieren Sie es aus next/image und rendern es in Ihrer Komponente.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

Die src-Eigenschaft kann ein lokales oder entferntes Bild referenzieren.

🎥 Video-Tipp: Mehr über die Verwendung von next/image erfahren → YouTube (9 Minuten).

Lokale Bilder

Statische Dateien wie Bilder und Schriftarten können im Stammverzeichnis unter einem Ordner namens public gespeichert werden. Dateien innerhalb von public können dann über die Basis-URL (/) referenziert werden.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Bild des Autors"
      width={500}
      height={500}
    />
  )
}

Statisch importierte Bilder

Sie können auch lokale Bilddateien importieren und verwenden. Next.js ermittelt automatisch die intrinsische width und height Ihres Bildes basierend auf der importierten Datei. Diese Werte werden verwendet, um das Bildverhältnis zu bestimmen und Cumulative Layout Shift (CLS) während des Ladens zu verhindern.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Bild des Autors"
      // width={500} wird automatisch bereitgestellt
      // height={500} wird automatisch bereitgestellt
      // blurDataURL="data:..." wird automatisch bereitgestellt
      // placeholder="blur" // Optionaler Blur-Effekt während des Ladens
    />
  )
}

In diesem Fall erwartet Next.js, dass die Datei app/profile.png verfügbar ist.

Entfernte Bilder

Um ein entferntes Bild zu verwenden, können Sie eine URL-Zeichenkette für die src-Eigenschaft angeben.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Bild des Autors"
      width={500}
      height={500}
    />
  )
}

Da Next.js während des Build-Prozesses keinen Zugriff auf entfernte Dateien hat, müssen Sie die Eigenschaften width, height und optional blurDataURL manuell angeben. width und height werden verwendet, um das korrekte Seitenverhältnis des Bildes abzuleiten und Layoutverschiebungen während des Ladens zu vermeiden.

Um Bilder von externen Servern sicher zuzulassen, müssen Sie in next.config.js eine Liste unterstützter URL-Muster definieren. Seien Sie möglichst spezifisch, um böswillige Nutzung zu verhindern. Die folgende Konfiguration erlaubt beispielsweise nur Bilder von einem bestimmten AWS S3-Bucket:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config