Billedpipeline til et marketing-site — format, størrelse og LCP

Et marketing-site sælger med billeder, og det er præcis derfor de ødelægger det. Heroen er det første, Google og brugeren venter på. Googles LCP-tærskel er kendt og offentlig — det er ikke et tal, vi har opfundet — og på et site som jeres er LCP-elementet oftest et billede, ikke en tekstblok. Hvis heroen er et originalt PNG, en autoplay-video I kalder baggrund, eller tre slider-frames der alle hentes, har I valgt at starte samtalen med et download. Pipeline'en er at nægte det download, før det er 'for sent at rette i PageSpeed'.

Teams arver ordet billedoptimering fra et plugin. I WordPress er det 'smid EWWW på'. I et design-handoff er det 'eksportér til 2x'. I Next.js er det 'vi har Image-komponenten'. Ingen af delene er pipeline'en. Pipeline'en er at et billede ikke kan nå browseren, uden at have et format, en bredde, en CDN-sti og et layout-slot. Plugin'et kører, når nogen husker det. Handoff'et lyver, når CMS'et tillader det næste upload. Komponenten lyver, når `sizes` er 100vw på en 200px-thumb.

Det er også et redaktionelt ejerskabs-spørgsmål. Hvis marketing kan uploade en hero uden loft, har I givet dem en knap, der slår LCP. Det er ikke deres fejl. Det er at I kaldte Next-configen for pipeline og lod CMS'et være et drev. Designsystem-indlægget er tokens og komponenter. Her er pligten enklere: ét sted, der siger nej til filen, før den er live. Uden nej'et er 'vi har WebP' en sætning om sidste uge.

Vi skriver det, fordi 'kan I ikke bare komprimere billederne' er blevet et køb, I tager før I har en sætning om hero, `sizes` og upload-loft. Et ærligt setup er kedeligt: ét prioriteret LCP-billede, moderne formater, rigtige widths, dimensioner i layoutet, og et CMS der ikke kan slå det over. Uden den sætning har I en mappe. I har ikke billedoptimering.

En billedpipeline er vejen fra fil til skærm, med nej-punkter: upload-loft i CMS, et afledt sæt widths, et moderne format (AVIF/WebP med fornuftig fallback), en CDN der kan det, og markup der fortæller browseren hvilken fil den må hente (`srcset` + `sizes`) og hvor meget plads den fylder, før den er der. Den er et produktvalg, fordi den siger at heroen må vente på formatet, ikke at formatet må vente på heroen. De fleste marketing-sites skal have præcis det. De skal ikke have et nyt DAM, før de har et loft.

next/image er et værktøj i den vej, ikke vejen. Den kan aflede widths, sætte lazy, hoste på Vercel eller en loader I peger på. Den kan også hente det forkerte, hvis `sizes` er løgn, hvis I har slået optimering fra for at 'få det til at virke', eller hvis kilden allerede er et 4000px PNG, I har lagt i `/public` uden at gå gennem loaderen. Komponenten er ærlig, når I er ærlige i props. Den er ikke et amulet, I sætter rundt om en fil, I nægtede at eje.

Det er ikke 'eksportér til WebP én gang'. Et format uden widths er stadig for mange pixels. En 1600px-hero på en 390px-skærm er det forkerte download i et moderne wrap. Art-direction — et andet crop på mobil — er et andet job end format. Løs format og width først. Løs crop, når heroen skærer ansigtet af. Et slider-plugin med fem WebP'er er fem LCP-kandidater. Ét billede, ét crop, ét `priority`. Resten lazy.

Og det er ikke at slå billeder fra for at jage en Lighthouse-score. Et marketing-site uden hero er et andet produkt. Pipeline'en lader jer have billedet og LCP'en. Hvis I fjerner heroen for at 'vinde performance' og stadig uploader ukomprimeret i cases, har I flyttet scoren. I har ikke flyttet vanen. Hastigheds-indlægget er hvorfor scoren betyder noget. Her er vanen, der holder den.

Den første fejl er at komprimere galleriet og glemme heroen. I kører et batch-job på cases og lader forsiden ligge, fordi den 'er design'. Heroen er LCP. Galleriet er under folden og må lazy-loades. Et ærligt første skridt er at pege på LCP-elementet i PageSpeed Insights — værktøjet I selv kan køre — og rette dét billede, før I bygger en DAM-drøm. Hvis I ikke kan sige hvilken fil der er LCP, er I ikke klar til en pipeline. I er klar til at måle.

Den anden fejl er `sizes` som copy-paste. `100vw` på et kort i et tre-kolonne-grid er at bede mobil om desktop-filen, eller desktop om en fil, der er for lille og bliver skaleret grimt. `sizes` er layoutet, I allerede har: `(max-width: 768px) 100vw, 33vw` eller hvad grid'et faktisk er. Uden den sætning er `srcset` et buffet, browseren gætter forkert på. next/image hjælper jer med at udlede filerne. Den kan ikke gætte jeres CSS.

Den tredje fejl er layout-skift, I kalder animation. Billedet lander, teksten hopper, CLS går i rødt. Width og height, eller en aspect-ratio-boks, før requesten. Et skeleton er tilladt. Et fade, der skubber H1, er ikke polish. Det er at I ikke reserverede pladsen. Tilgængelighed-indlægget er EAA og fokus. Her er pligten at lade billedet have et slot, også for den, der taber linjen de læste.

Den fjerde fejl er at lade CMS'et slå pipeline'en. WordPress med 'full size' som default i Gutenberg. Et headless CMS uden transformation. Shopify-files, I linker som CDN uden widths. I har next/image på de sider, en udvikler rørte, og originale uploads på de sider, redaktøren rørte i morges. Pipeline'en er nej'et i uploadet: max-dimension, tilladte formater, et afledt sæt, ikke 'vi plejer at huske at eksportere'. Hvis nej'et kun lever i repoet, har I en udvikler-pipeline. I har ikke en site-pipeline.

Et Next.js-marketing-site er det, vi typisk anbefaler, når I vil eje markup: `next/image` eller en loader mod jeres CDN, `priority` på én hero, `sizes` der matcher grid'et, og et CMS (headless eller git) der ikke kan uploade uden loft. Preview på pull requesten viser den rigtige fil, ikke kun den rigtige copy. Hvis I har Image-komponenten og stadig linker PNG fra `/public` på forsiden, har I en komponent. I har ikke en pipeline. Wordpress-til-Next-indlægget er cutover. Den her er billed-jobbet, I tager med jer — eller glemmer, og så er LCP den samme på den nye stack.

Et WordPress-site har samme job og et andet nej-punkt. Medie-biblioteket er pipeline'en, hvis I tvinger sizes, webp/avif, og nægter 'full' som default i indholdet. Et plugin, I kører én gang, er et batch. Det næste upload vinder. Hvis I later som om et cache-plugin er billedoptimering, har I cachet det forkerte download. Relancering-indlægget er 301'erne. Her er at lade Gutenberg være et sted med loft, ikke et drev med pretty permalinks.

Shopify er det tredje sted, I kan lyve på samme måde. CDN'en kan widths, hvis I bruger dem i theme-liquid eller i jeres headless-frontend. En `img` med `file`-URL uden width-parameter er originalen. Et app-filter, I har glemt efter et theme-skift, er et batch der døde. I har stadig et LCP-billede. I har stadig brug for ét `priority`, rigtige sizes, og et sted i admin der ikke lader en 4000px-produktfil blive hero på en collection. Shopify-indlæggene er hvornår platformen rækker. Den her er billedet, platformen ikke retter for jer, hvis temaet lyver.

Et 'vi fjerner billeder for at vinde Lighthouse' er det sidste job, I ikke skal købe. Marketing-sitet skal have en hero. Pipeline'en er hvordan I har den uden at betale LCP-gælden hver gang nogen eksporterer fra Figma. Hvis scoren kun er grøn på en side uden media, har I målt et andet produkt. Sæt nej'et. Ret heroen. Lad galleriet være lazy. Det er kedeligt. Det er det, der holder, når redaktøren kommer mandag.