Eine Fotografen-Website scheitert fast immer am gleichen Punkt: zu grosse Bilder. Mit Next.js lässt sich das Problem an der Wurzel lösen, weil Zuschnitt, Format und Auslieferung Teil des Frameworks sind und nicht Sache eines Plugins.
Warum next/image den Unterschied macht
Die Komponente erzeugt für jedes Bild mehrere Grössen, liefert AVIF oder WebP aus, wenn der Browser es kann, und setzt Breite und Höhe automatisch, sodass kein Layoutsprung entstehen kann. Aus einem 8-Megabyte-Scan werden je Ansicht 80 bis 300 Kilobyte.
Statisch bauen, nicht rendern
Ein Portfolio ändert sich selten. Mit statischer Generierung wird jede Seite einmal gebaut und danach vom CDN ausgeliefert — Antwortzeiten unter 100 Millisekunden, ohne Server, der bei jedem Aufruf rechnet.
Bilder richtig priorisieren
Nur das erste sichtbare Bild bekommt Priorität, alle anderen laden verzögert. Diese eine Unterscheidung verbessert den Largest Contentful Paint auf bildlastigen Seiten typischerweise um mehr als eine Sekunde.
Was das für die Sichtbarkeit bedeutet
Geschwindigkeit ist ein Rankingfaktor, aber der grössere Effekt ist das Verhalten: Wer zwei Sekunden auf ein Bild wartet, geht zurück. Bei Studio-Websites sinkt die Absprungrate nach einer Optimierung regelmässig im zweistelligen Bereich.