DIE IMAGE-PIPELINE

Auf rund 70 Prozent der Marketing-Seiten sind Bilder das LCP-Element. Die konsequente Handhabung von Bildern ist der wichtigste Leistungshebel, den ich kenne. Teams, die dies richtig umsetzen, erreichen die Core Web Vitals mühelos; Teams, die es falsch machen, haben ständig mit den Core Web Vitals zu kämpfen.

Die Vorgehensweise ist systematisch: Wählen Sie das Format aus, passen Sie die Größe beim Hochladen an, optimieren Sie die Kodierung, legen Sie explizite Abmessungen fest und laden Sie das LCP-Bild vorab. Jeder dieser Schritte ist eine einmalige technische Investition, die sich auf jeder Seite jeder Website auszahlt.

Ich erstelle Hero-Bilder mit FAL flux-pro/v1.1-ultra und Recraft v3. Beide Programme erzeugen JPEGs mit einer Auflösung von 1200 × 675 Pixel bei voller Kodierungsqualität, die in der Regel zwischen 600 KB und 1,5 MB pro Bild groß sind. Wenn die Rohdaten in den Supabase-Speicher hochgeladen werden, bedeutet dies, dass jede Seite allein für das Hero-Bild etwa 1 MB an Daten überträgt.

FAL kostet etwa 4 Cent pro Heldenbild, was im Vergleich zu manuellen Fotoaufnahmen oder der Lizenzierung von Stockfotos vernachlässigbar ist.

Vor jedem Upload durchläuft das Bild den Befehl `sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer()`. Dadurch entsteht eine WebP-Datei, die 90 Prozent kleiner ist als das ursprüngliche JPEG, ohne dass dabei wahrnehmbare Qualitätsverluste auftreten. Ein 900 KB großes Hero-Bild wird so zu einem 80 KB großen Hero-Bild.

Über 53 Hero-Images auf gautamkhorana.com betrug die Gesamtersparnis etwa 50MB sitewide. Die gleiche Pipeline auf Kundenseiten bei Seahawk lieferte durchweg ähnliche Einsparungen. Der Code sind zehn Zeilen; die Auswirkung ist dauerhaft.

Legen Sie für den Speicher-Upload „cacheControl: 31536000“ fest, damit das CDN die Datei ein Jahr lang zwischenspeichert. Das WebP-Format bietet modernen Browsern genau das, was sie benötigen; ältere Browser greifen über das „picture“-Element auf das JPEG-Format zurück.

Verwenden Sie ein stabiles URL-Muster (slug-hero.webp), damit die Cache-Entleerung reibungslos funktioniert. Wenn ein Hero aktualisiert wird, sollte sich der Slug ändern (slug-hero-v2.webp), und die Datenbank aktualisiert die URL atomar.

Jedes Hero-Bild muss im HTML-Code explizite Attribute für Breite und Höhe enthalten. Ohne diese Attribute kommt es beim Laden des Bildes zu Layoutverschiebungen, und der CLS-Wert steigt an. Die Bildkomponenten von Astro und Next.js kümmern sich automatisch darum; bei einfachen `img`-Tags muss dies manuell erfolgen.

Das „Hero-Bild“ oberhalb der Falz muss im Kopfbereich des Dokuments mit dem Link „rel=‘preload’ as=‘image’“ vorgeladen werden. Dies spart in der Regel 100 bis 400 Millisekunden bei der LCP-Metrik ein. Die einzelne Änderung mit der größten Wirkung, die auf den meisten Marketing-Websites möglich ist.

Führen Sie für alle Bilder unterhalb der Falz ein Lazy-Loading mit „loading=“lazy““ durch. Browser unterstützen dies mittlerweile nativ; es ist keine JavaScript-Bibliothek erforderlich.

Ich habe diese Pipeline in die Datei „scripts/lib/optimize-image.mjs“ extrahiert, die einen Puffer entgegennimmt, die Größenanpassung sowie die WebP-Kodierung durchführt und den optimierten Puffer zurückgibt. Sie wird in der „Auto-Blog-Hero“-Pipeline, in den Skripten zur Massen-Neukodierung und im Dienstprogramm für manuelle Uploads verwendet.

Durch den einzigen Helper wird die Vorgehensweise vereinheitlicht. Neue Skripte, die Bilder hochladen müssen, rufen denselben Helper auf, wenden dieselbe Komprimierung an und erzeugen Dateien derselben Größe. Die Vorgehensweise hängt nicht davon ab, dass ein einzelner Entwickler daran denkt, „sharp“ auszuführen.