Bilder machen im Schnitt 50 Prozent der Seitengroesse aus. Wenn du sie falsch einbindest, wird deine Seite langsam und dein Lighthouse-Score faellt. Next.js Image Component loesung das automatisch mit Lazy Loading, WebP-Konvertierung und responsiven Groessen.
Pro-Tip — Der schnelle Weg
Setz immer width und height oder fill mit sizes. Ohne diese Angaben kann Next.js kein Placeholder-Element reservieren und du bekommst Layout-Shifts.
Seite 1
1
Image Component nutzen
Ersetze jedes HTML img-Tag durch die Next.js Image Component. Sie optimiert automatisch Format, Groesse und Qualitaet. Lazy Loading ist standardmaessig aktiv.
Wenn du die Bildgroesse nicht kennst oder es den Container fuellen soll, nutze fill mit einem relativen Parent-Element. Vergiss sizes nicht fuer optimale Aufloesung.
Zeig einen unscharfen Platzhalter waehrend das Bild laedt. Fuer statische Imports passiert das automatisch. Fuer externe Bilder brauchst du einen Base64-String.
Automatische WebP-Konvertierung spart 30 bis 50 Prozent Dateigroesse
Lazy Loading bedeutet Bilder werden erst geladen wenn sie sichtbar werden
Responsive sizes verhindern dass Mobilgeraete Desktop-Bilder laden
Blur Placeholder verbessert die wahrgenommene Ladezeit sofort
Tipps
Setz priority nur beim Hero-Bild above the fold, nicht bei allen Bildern
Nutze sizes mit Breakpoints damit nicht immer das groesste Bild geladen wird
WebP wird automatisch generiert wenn der Browser es unterstuetzt
Fuer Icons und Logos unter 10KB nutze SVG statt optimierter Bilder
Seite 3
Bereit für den nächsten Schritt?
KIWorld VibeCoding Masterclass
Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.