DIE IMAGE-PIPELINE
Die FAL plus Sharp Pipeline, die ich auf jeder Seahawk-Site laufen lasse, um standardmäßig Lighthouse 100 Image Scores zu erreichen, mit konkreten Dateigröße-Zahlen.
Warum Image-Disziplin die halbe Performance-Schlacht ist
Bilder sind das LCP-Element auf etwa 70 Prozent der Marketing-Seiten. Image-Disziplin ist der einzelne höchste Performance-Hebel, den ich kenne. Die Teams, die das richtig machen, erreichen Core Web Vitals mühelos; die Teams, die es falsch machen, kämpfen ewig gegen Core Web Vitals.
Die Disziplin ist strukturell: Wähle das Format, ändere die Größe beim Upload, optimiere die Kodierung, setze explizite Dimensionen, preload das LCP-Bild. Jedes davon ist eine einmalige Engineering-Investition, die sich auf jeder Seite jeder Site auszahlt.
FAL Hero-Generierung
Ich generiere Hero-Bilder über FAL flux-pro/v1.1-ultra und Recraft v3. Beide produzieren 1200 mal 675 Pixel JPEGs mit voller Kodierungsqualität, typischerweise 600KB bis 1,5MB pro Bild. Das direkte Hochladen zu Supabase Storage bedeutet, dass jede Seite ~1MB Hero allein ausliefert.
FAL kostet ungefähr 4 Cent pro Hero-Image, was vernachlässigbar ist im Vergleich zu manueller Fotografie oder Stock-Lizenzen.
Scharfes Re-Encoding zu WebP
Vor jedem Upload durchläuft das Image sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer(). Das erzeugt eine WebP-Datei, die 90 Prozent kleiner ist als die ursprüngliche JPEG, ohne wahrnehmbaren Qualitätsverlust. Ein 900KB Hero wird zu einem 80KB Hero.
Über 53 Hero-Images auf gautamkhorana.com betrug die Gesamtersparnis ungefähr 50MB sitewide. Die gleiche Pipeline angewendet auf Client-Websites bei Seahawk Media liefert konsistent ähnliche Ergebnisse. Der Code umfasst zehn Zeilen; die Auswirkung ist dauerhaft.
Storage-Upload-Einstellungen
Setze cacheControl: 31536000 beim Storage-Upload, damit das CDN die Datei für ein Jahr cached. WebP-Format gibt modernen Browsern, was sie wollen; ältere Browser fallen via picture-Element auf JPEG zurück.
Nutze ein stabiles URL-Muster (slug-hero.webp), damit die Cache-Invalidation sauber abläuft. Wenn ein Hero aktualisiert wird, sollte der Slug rotieren (slug-hero-v2.webp) und die Datenbank aktualisiert die URL atomar.
Die Frontend-Integration
Jedes Hero-Image muss explizite width- und height-Attribute im HTML haben. Ohne diese treten Layout-Shifts auf, während das Image lädt, und CLS steigt. Astro und Next.js Image Components handhaben das automatisch; Raw img-Tags benötigen es manuell.
Das Above-the-Fold Hero-Image muss mit link rel="preload" as="image" im Document Head vorgeladen werden. Spart typischerweise 100 bis 400 Millisekunden beim LCP-Metriken ein. Die einzeln höchste Auswirkung – eine Ein-Zeilen-Änderung – die auf den meisten Marketing-Websites verfügbar ist.
Lazy-load jedes Bild unterhalb der Faltkante mit loading="lazy". Browser handhaben dies jetzt nativ; keine JavaScript-Bibliothek nötig.
Die vollständige Pipeline in einem Helper
Ich habe diese Pipeline in scripts/lib/optimize-image.mjs extrahiert, die einen Buffer annimmt, die Größenänderung plus WebP-Codierung ausführt und den optimierten Buffer zurückgibt. Sie wird in der Auto-Blog-Hero-Pipeline, den Bulk-Re-Encoding-Skripten und dem Manual-Upload-Utility verwendet.
Der einzelne Helper bedeutet, dass die Disziplin zentralisiert ist. Neue Skripte, die Bilder hochladen müssen, rufen denselben Helper auf, erhalten dieselbe Komprimierung, erzeugen dieselben Dateigößen. Die Disziplin hängt nicht davon ab, dass sich ein einzelner Engineer daran erinnert, sharp auszuführen.