Bilder & Schriften
Zwei Komponenten, die den größten Teil der Ladezeit sparen
next/image regelt Größe, Format und Ladezeitpunkt von Bildern. next/font lädt Schriften beim Bauen mit. Beides ist wenig Aufwand für viel Wirkung.
Wenn eine Seite langsam ist, liegt es selten am JavaScript. Meistens sind es zu große Bilder und nachgeladene Schriften. Für beides bringt Next.js eine fertige Lösung mit.
Bilder
import Image from "next/image";
import titelbild from "./titelbild.jpg";
// Importiertes Bild: Größe kennt Next.js selbst
<Image src={titelbild} alt="Blick über Berlin" priority />
// Aus dem Netz: Größe angeben, sonst springt das Layout
<Image
src="https://cdn.beispiel.de/foto.jpg"
alt="Produktfoto"
width={800}
height={600}
/>next/imageDie Bildkomponente, die Größe, Format und Ladeverhalten selbst regelt und damit den größten Teil der Ladezeit spart.→ liefert automatisch ein modernes Format aus, skaliert auf die tatsächlich benötigte Größe und lädt erst, wenn das Bild in die Nähe des sichtbaren Bereichs kommt.
Ohne alt ist das Bild für Screenreader unsichtbar – und Next.js meckert zu Recht. Ohne Breite und Höhe kennt der Browser den Platzbedarf nicht, und die Seite springt beim Nachladen. Bei importierten Bildern erledigt sich das von selbst.
// Das große Bild ganz oben: sofort laden, nicht verzögert
<Image src={held} alt="…" priority />
// Alles Weitere: Standard, also verzögert – genau richtigBilder von anderen Domains erlaubt Next.js erst nach einem Eintrag in next.config.js unter images.remotePatterns. Das verhindert, dass deine Seite als kostenloser Bilddienst für Fremde dient.
Schriften
import { Inter } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
export default function RootLayout({ children }) {
return (
<html lang="de" className={inter.variable}>
<body>{children}</body>
</html>
);
}next/fontLädt Schriften beim Bauen mit aus und legt sie neben deinen Code – kein Nachladen von Google, kein Textsprung.→ lädt die Schrift beim Bauen herunter und legt sie neben deinen Code. Zur Laufzeit geht keine Anfrage mehr an Google – das spart eine Verbindung und erspart dir die datenschutzrechtliche Diskussion gleich mit.
<link
href="https://fonts.googleapis.com/css2?family=Inter"
rel="stylesheet"
/>import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });Nebeneffekt: Next.js berechnet einen passenden Ersatz für die Zeit vor dem Laden, sodass der Text beim Wechsel nicht springt.
import localFont from "next/font/local";
const eigene = localFont({
src: [
{ path: "./Marke-Regular.woff2", weight: "400" },
{ path: "./Marke-Bold.woff2", weight: "700" },
],
variable: "--font-marke",
});Was das praktisch bringt
- +
next/imagefür alles, was ein Foto ist - +
priorityfür das eine große Bild oben auf der Seite - +
next/fontfür jede Schrift – auch für eigene Dateien
- −
<img>für Fotos – damit verschenkst du Format, Größe und Ladeverhalten - −
priorityüberall: dann ist wieder nichts bevorzugt - −
Schriften per
<link>aus dem Netz nachladen
Ein SVG-Symbol mit 2 KB profitiert von der Bildoptimierung nicht – da ist <img> oder das SVG direkt im Markup einfacher. next/image lohnt sich bei Fotos, nicht bei Vektorgrafiken.
Sitzt das schon?
4 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.