next/image ist Next.js's optimierte Ersetzung für das <img>-Tag. Sie wendet automatisch eine Reihe von Best Practices für die Bildoptimierung an, die Sie sonst manuell implementieren müssten.
tsx
;
() {
(
);
}
next/image ist Next.js's optimierte Ersetzung für das <img>-Tag. Sie wendet automatisch eine Reihe von Best Practices für die Bildoptimierung an, die Sie sonst manuell implementieren müssten.
;
() {
(
);
}
srcset — generiert mehrere Größen, sodass jedes Gerät die richtige herunterlädt.priority überschreiben).width/height (oder fill) reservieren Platz, damit die Seite nicht springt, wenn das Bild geladen wird.placeholder="blur" zeigt eine kleine unscharfe Vorschau beim Laden.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Verwenden Sie fill (statt fester Breite/Höhe), wenn das Bild sein positioniertes Parent ausfüllen soll — üblich für Hero/Cover-Bilder.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Bilder sind normalerweise die schwersten Assets auf einer Seite und eine der Hauptursachen für schlechte Core Web Vitals (LCP, CLS). next/image automatisiert Größenanpassung, moderne Formate, responsives srcset, Lazy Loading und Layout-Verschiebungsprävention — wandelt eine große Leistungsaufgabe in eine einzelne Komponente um, mit priority für das LCP-Bild als dem einzigen Parameter, den Sie sich merken müssen.