Bildoptimierung

Laut Web Almanac machen Bilder einen großen Teil des typischen Seitengewichts einer Website aus und können sich erheblich auf die LCP-Performance Ihrer Website auswirken.

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 Layoutverschiebungen beim Laden von Bildern.
• Schnellere Seitenladezeiten: Bilder werden nur geladen, wenn sie in den Viewport eintreten, dank nativer Browser-Lazy-Loading-Funktion mit optionalen Blur-Up-Platzhaltern.
• Asset-Flexibilität: On-Demand-Bildgrößenanpassung, auch für Bilder auf Remote-Servern

🎥 Video: Erfahren Sie mehr über die Verwendung von next/image → YouTube (9 Minuten).

Verwendung

import Image from 'next/image'

Anschließend können Sie die src für Ihr Bild definieren (lokal oder remote).

Lokale Bilder

Um ein lokales Bild zu verwenden, importieren Sie Ihre .jpg-, .png- oder .webp-Bilddateien.

Next.js ermittelt automatisch die width und height Ihres Bildes basierend auf der importierten Datei. Diese Werte werden verwendet, um Cumulative Layout Shift während des Ladens des Bildes zu verhindern.

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 beim Laden
    />
  )
}

Warnung: Dynamische await import() oder require() werden nicht unterstützt. Der import muss statisch sein, damit er zur Build-Zeit analysiert werden kann.

Sie können optional localPatterns in Ihrer next.config.js-Datei konfigurieren, um bestimmte Bilder zuzulassen und alle anderen zu blockieren.

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, müssen Sie die Eigenschaften width, height und optional blurDataURL manuell angeben.

Die Attribute width und height werden verwendet, um das korrekte Seitenverhältnis des Bildes abzuleiten und Layoutverschiebungen beim Laden des Bildes zu vermeiden. Die width und height bestimmen nicht die gerenderte Größe der Bilddatei. Erfahren Sie mehr über Bildgrößen.

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 Optimierung von Bildern sicher zu ermöglichen, definieren Sie eine Liste unterstützter URL-Muster in next.config.js. Seien Sie so spezifisch wie möglich, um böswillige Nutzung zu verhindern. Die folgende Konfiguration erlaubt beispielsweise nur Bilder von einem bestimmten AWS S3-Bucket:

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

Erfahren Sie mehr über die remotePatterns-Konfiguration. Wenn Sie relative URLs für das Bild-src verwenden möchten, nutzen Sie einen loader.

Domänen

Manchmal möchten Sie möglicherweise ein Remote-Bild optimieren, aber dennoch die integrierte Next.js Image Optimization API verwenden. Lassen Sie dazu den loader auf der Standardeinstellung und geben Sie eine absolute URL für die Image-src-Eigenschaft an.

Um Ihre Anwendung vor böswilligen Nutzern zu schützen, müssen Sie eine Liste von Remote-Hostnamen definieren, die Sie mit der next/image-Komponente verwenden möchten.

Erfahren Sie mehr über die remotePatterns-Konfiguration.

Loader

Beachten Sie, 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 Ihr Bild generiert. Sie modifiziert das bereitgestellte 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 Ihrer Site ein Bild erhalten, das genau für ihren Viewport geeignet ist.

Der Standard-Loader für Next.js-Anwendungen verwendet die integrierte Image Optimization API, die Bilder von überall im Web optimiert und dann direkt vom Next.js-Webserver ausliefert. Wenn Sie Ihre Bilder direkt von einem CDN oder Bildserver bereitstellen möchten, können Sie Ihre eigene Loader-Funktion mit ein paar Zeilen JavaScript schreiben.

Sie können einen Loader pro Bild mit der loader-Eigenschaft oder auf Anwendungsebene mit der loaderFile-Konfiguration definieren.

Priorität

Sie sollten die priority-Eigenschaft zu 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 Textblock, das innerhalb des Viewports der Seite sichtbar ist. Wenn Sie next dev ausführen, sehen Sie eine Konsolenwarnung, wenn das LCP-Element ein <Image> ohne die priority-Eigenschaft ist.

Sobald Sie das LCP-Bild identifiziert haben, können Sie die Eigenschaft wie folgt hinzufügen:

import Image from 'next/image'
import profilePic from '../public/me.png'

export default function Page() {
  return <Image src={profilePic} alt="Bild des Autors" priority />
}

Weitere Informationen zur Priorität finden Sie in der next/image-Komponentendokumentation.

Bildgrößen

Eine der häufigsten Arten, wie Bilder die Performance beeinträchtigen, sind Layoutverschiebungen, bei denen das Bild beim Laden andere Elemente auf der Seite verschiebt. Dieses Performance-Problem ist für Nutzer so störend, dass es sein eigenes Core Web Vital namens Cumulative Layout Shift gibt. Die Möglichkeit, bildbasierte Layoutverschiebungen zu vermeiden, besteht darin, Ihre Bilder immer zu dimensionieren. Dadurch kann der Browser genau genug Platz für das Bild reservieren, bevor es geladen wird.

Da next/image für garantierte gute Performance-Ergebnisse entwickelt wurde, kann es nicht auf eine Weise verwendet werden, die zu Layoutverschiebungen beiträgt, und muss auf eine von drei Arten dimensioniert werden:

1. Automatisch mit einem statischen Import
2. Explizit durch Angabe einer width- und height-Eigenschaft
3. Implizit durch Verwendung von fill, wodurch das Bild so vergrößert wird, dass es sein übergeordnetes Element ausfüllt.

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

Wenn Sie auf Bilder aus einer Quelle zugreifen, deren Größe Sie nicht kennen, gibt es mehrere Möglichkeiten:

Verwenden Sie fill

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

Normalisieren Sie Ihre Bilder

Wenn Sie Bilder von einer Quelle bereitstellen, die Sie kontrollieren, sollten Sie Ihre Bildpipeline so anpassen, dass die Bilder auf eine bestimmte Größe normalisiert werden.

Ändern Sie Ihre API-Aufrufe

Wenn Ihre Anwendung Bild-URLs über einen API-Aufruf (z.B. an ein CMS) abruft, können Sie möglicherweise den API-Aufruf so ändern, dass er die Bildabmessungen zusammen mit der URL zurückgibt.

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

Styling

Das Styling der Image-Komponente ähnelt dem Styling eines normalen <img>-Elements, aber es gibt einige Richtlinien zu beachten:

• Verwenden Sie className oder style, nicht styled-jsx.
  • In den meisten Fällen empfehlen wir die Verwendung der className-Eigenschaft. Dies kann ein importiertes CSS-Modul, ein globales Stylesheet usw. sein.
  • Sie können auch die style-Eigenschaft verwenden, um Inline-Styles zuzuweisen.
  • Sie können styled-jsx nicht verwenden, da es auf die aktuelle Komponente beschränkt ist (es sei denn, Sie markieren den Style als global).
• Bei Verwendung von fill muss das übergeordnete Element position: relative haben
  • Dies ist für das korrekte Rendering des Bildelements in diesem Layoutmodus erforderlich.
• Bei Verwendung von fill muss das übergeordnete Element display: block haben
  • Dies ist die Standardeinstellung für <div>-Elemente, sollte aber sonst angegeben werden.

Beispiele

Responsive

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"
        // Das Importieren eines Bildes setzt automatisch
        // die Breite und Höhe
        src={mountains}
        sizes="100vw"
        // Das Bild wird in voller Breite angezeigt
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

Container 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>
      {/* Und weitere Bilder im Raster... */}
    </div>
  )
}

Hintergrundbild

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',
      }}
    />
  )
}

Für Beispiele der Image-Komponente mit verschiedenen Stilen siehe die Image-Komponenten-Demo.

Weitere Eigenschaften

Alle Eigenschaften der next/image-Komponente anzeigen.

Konfiguration

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

Lesen Sie die vollständige Bildkonfigurationsdokumentation für weitere Informationen.