Menu

Bildoptimierung

Beispiele

Laut Web Almanac machen Bilder einen großen Teil des typischen Seitengewichts einer Website aus und können erhebliche Auswirkungen auf die LCP-Performance deiner Website haben.

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

  • Größenoptimierung: Automatische Bereitstellung korrekt dimensionierter Bilder für jedes Gerät unter Verwendung moderner Bildformate wie WebP und AVIF.
  • Visuelle Stabilität: Automatische Vermeidung von Layout-Verschiebungen beim Laden von Bildern.
  • Schnellere Seitenladezeiten: Bilder werden nur geladen, wenn sie in den Viewport gelangen, durch natives Browser Lazy Loading mit optionalen Blur-Up-Platzhaltern.
  • Asset-Flexibilität: Bedarfsgerechte Bildgrößenanpassung, auch für Bilder auf Remote-Servern.

🎥 Anschauen: Erfahre mehr über die Verwendung von next/image → YouTube (9 Minuten).

Verwendung

import Image from 'next/image'

Anschließend kannst du die src für dein Bild festlegen (lokal oder remote).

Lokale Bilder

Um ein lokales Bild zu verwenden, importiere deine .jpg, .png oder .webp Bilddateien.

Next.js wird automatisch die intrinsische width und height deines Bildes basierend auf der importierten Datei bestimmen. Diese Werte werden verwendet, um das Bildverhältnis zu bestimmen und Cumulative Layout Shift während des Bildladens zu verhindern.

app/page.js
import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Bild des Autors"
      // width={500} automatisch bereitgestellt
      // height={500} automatisch bereitgestellt
      // blurDataURL="data:..." automatisch bereitgestellt
      // placeholder="blur" // Optionaler Blur-Up während des Ladens
    />
  )
}

Achtung: Dynamisches await import() oder require() werden nicht unterstützt. Der import muss statisch sein, damit er zur Buildzeit analysiert werden kann.

Optional kannst du localPatterns in deiner next.config.js Datei konfigurieren, um bestimmte Bilder zuzulassen und alle anderen zu blockieren.

next.config.js
module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

Remote Bilder

Um ein Remote-Bild zu verwenden, sollte die src-Eigenschaft eine URL-Zeichenkette sein.

Da Next.js während des Build-Prozesses keinen Zugriff auf Remote-Dateien hat, musst du die Eigenschaften width, height und optional blurDataURL manuell angeben.

Die width- und height-Attribute werden verwendet, um das korrekte Seitenverhältnis des Bildes abzuleiten und Layout-Verschiebungen während des Bildladens zu vermeiden. Die width und height bestimmen nicht die gerenderte Größe der Bilddatei. Erfahre mehr über Bilddimensionierung.

app/page.js
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}
    />
  )
}

Um die Bildoptimierung sicher zu ermöglichen, definiere eine Liste unterstützter URL-Muster in next.config.js. Sei so spezifisch wie möglich, um böswillige Nutzung zu verhindern. Die folgende Konfiguration erlaubt beispielsweise nur Bilder aus einem bestimmten AWS S3-Bucket:

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

Erfahre mehr über die remotePatterns-Konfiguration. Wenn du relative URLs für die Bild-src verwenden möchtest, nutze einen loader.

Domains

Manchmal möchtest du ein Remote-Bild optimieren, aber trotzdem die eingebaute Next.js Image Optimization API verwenden. Lasse dafür den loader bei seiner Standardeinstellung und gib eine absolute URL für die Image src-Eigenschaft an.

Um deine Anwendung vor böswilligen Benutzern zu schützen, musst du eine Liste von Remote-Hostnamen definieren, die du mit der next/image-Komponente verwenden möchtest.

Erfahre mehr über die remotePatterns-Konfiguration.

Loader

Beachte, dass im früheren Beispiel eine partielle URL ("/me.png") für ein lokales Bild angegeben wurde. Dies ist aufgrund der Loader-Architektur möglich.

Ein Loader ist eine Funktion, die die URLs für dein Bild generiert. Er modifiziert die angegebene src und generiert mehrere URLs, um das Bild in verschiedenen Größen anzufordern. Diese mehreren URLs werden in der automatischen srcset-Generierung verwendet, sodass Besucher deiner Website ein Bild in der richtigen Größe für ihren Viewport erhalten.

Der Standard-Loader für Next.js-Anwendungen verwendet die eingebaute Image Optimization API, die Bilder von überall im Web optimiert und sie dann direkt vom Next.js-Webserver ausliefert. Wenn du deine Bilder direkt von einem CDN oder Bildserver ausliefern möchtest, kannst du mit wenigen Zeilen JavaScript deine eigene Loader-Funktion schreiben.

Du kannst einen Loader pro Bild mit der loader-Eigenschaft oder auf Anwendungsebene mit der loaderFile-Konfiguration definieren.

Priority

Du solltest die priority-Eigenschaft dem Bild hinzufügen, das das Largest Contentful Paint (LCP) Element für jede Seite sein wird. Dadurch kann Next.js das Bild speziell für das Laden priorisieren (z.B. durch Preload-Tags oder Priority-Hints), was zu einer deutlichen Verbesserung der LCP führt.

Das LCP-Element ist typischerweise das größte Bild oder der größte Textblock, der im Viewport der Seite sichtbar ist. Wenn du next dev ausführst, siehst du eine Konsolenwarnung, wenn das LCP-Element ein <Image> ohne die priority-Eigenschaft ist.

Sobald du das LCP-Bild identifiziert hast, kannst du die Eigenschaft wie folgt hinzufügen:

app/page.js
import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Bild des Autors" priority />
}

Erfahre mehr über Priority in der next/image-Komponentendokumentation.

Bilddimensionierung

Eine der häufigsten Arten, wie Bilder die Performance beeinträchtigen, ist durch Layout-Verschiebung, bei der das Bild andere Elemente auf der Seite verschiebt, während es geladen wird. Dieses Performance-Problem ist für Benutzer so störend, dass es einen eigenen Core Web Vital namens Cumulative Layout Shift hat. Um bildbasierte Layout-Verschiebungen zu vermeiden, musst du deine Bilder immer dimensionieren. Dies ermöglicht dem Browser, genau genug Platz für das Bild zu reservieren, bevor es geladen wird.

Da next/image entwickelt wurde, um gute Performance-Ergebnisse zu garantieren, kann es nicht auf eine Weise verwendet werden, die zu Layout-Verschiebungen beiträgt, und muss auf eine von drei Arten dimensioniert werden:

  1. Automatisch, durch einen statischen Import
  2. Manuell, durch Angabe einer width- und height-Eigenschaft zur Bestimmung des Seitenverhältnisses des Bildes
  3. Implizit, durch Verwendung von fill, wodurch sich das Bild ausdehnt, um sein übergeordnetes Element auszufüllen

Was, wenn ich die Größe meiner Bilder nicht kenne?

Wenn du auf Bilder aus einer Quelle zugreifst, ohne die Bildgrößen zu kennen, gibt es mehrere Möglichkeiten:

Verwende fill

Die fill-Eigenschaft ermöglicht es deinem Bild, durch sein übergeordnetes Element dimensioniert zu werden. Verwende CSS, um dem übergeordneten Element des Bildes Platz auf der Seite zu geben, zusammen mit der sizes-Eigenschaft, um Media-Query-Breakpoints abzustimmen. Du kannst auch object-fit mit fill, contain oder cover und object-position verwenden, um zu definieren, wie das Bild diesen Raum einnehmen soll.

Normalisiere deine Bilder

Wenn du Bilder von einer Quelle bereitstellst, die du kontrollierst, erwäge die Änderung deiner Bildverarbeitung, um die Bilder auf eine bestimmte Größe zu normalisieren.

Modifiziere deine API-Aufrufe

Wenn deine Anwendung Bild-URLs über einen API-Aufruf abruft (zum Beispiel zu einem CMS), kannst du möglicherweise den API-Aufruf so modifizieren, dass er die Bildabmessungen zusammen mit der URL zurückgibt.

Wenn keine der vorgeschlagenen Methoden für die Dimensionierung deiner Bilder funktioniert, ist die next/image-Komponente so konzipiert, dass sie gut auf einer Seite neben Standard-<img>-Elementen funktioniert.

Styling

Das Styling der Image-Komponente ist ähnlich wie das Styling eines normalen <img>-Elements, aber es gibt einige Richtlinien zu beachten:

  • Verwende className oder style, nicht styled-jsx
    • In den meisten Fällen empfehlen wir die Verwendung der className-Eigenschaft. Dies kann ein importiertes CSS Module, ein globales Stylesheet etc. sein.
    • Du kannst auch die style-Eigenschaft verwenden, um Inline-Stile zuzuweisen.
    • Du kannst styled-jsx nicht verwenden, da es auf die aktuelle Komponente beschränkt ist (es sei denn, du markierst den Style als global).
  • Bei Verwendung von fill muss das überIch fahre mit der Übersetzung fort:

geordnete Element position: relative haben

  • Dies ist für die korrekte Darstellung des Bildelements in diesem Layout-Modus erforderlich.
  • Bei Verwendung von fill muss das übergeordnete Element display: block haben
    • Dies ist der Standard für <div>-Elemente, sollte aber ansonsten spezifiziert werden.

Beispiele

Responsiv

Responsives Bild, das die Breite und Höhe seines übergeordneten Containers ausfüllt
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Berge"
        // Der Import eines Bildes wird
        // automatisch die Breite und Höhe festlegen
        src={mountains}
        sizes="100vw"
        // Bild in voller Breite anzeigen
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

Container Füllen

Raster von Bildern, die die Breite des übergeordneten Containers ausfüllen
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Berge"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* Weitere Bilder im Raster... */}
    </div>
  )
}

Hintergrundbild

Hintergrundbild in voller Breite und Höhe der Seite
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Berge"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

Beispiele für die Image-Komponente mit verschiedenen Stilen findest du in der Image Component Demo.

Weitere Eigenschaften

Siehe alle verfügbaren Eigenschaften der next/image-Komponente.

Konfiguration

Die next/image-Komponente und Next.js Image Optimization API können in der next.config.js Datei konfiguriert werden. Diese Konfigurationen ermöglichen es dir, Remote-Bilder zu aktivieren, benutzerdefinierte Bild-Breakpoints zu definieren, das Caching-Verhalten zu ändern und mehr.

Lies die vollständige Bilddokumentations-Konfiguration für weitere Informationen.

API Referenz

Erfahre mehr über die next/image API.

<Image>

Optimiere Bilder in deiner Next.js-Anwendung mit der integrierten `next/image`-Komponente.