perf/responsive-images

Af content-framework-redaktionen · Opdateret
Performance · scope: page · severity: warning

Large content images declare srcset/sizes. Reglen perf/responsive-images kører i page-scope med severity 'warning' og indgår i performance-domænet sammen med 7 andre kontrakter i frameworket.

Hvorfor responsive-images findes

Without srcset/sizes, a phone downloads the same image as a desktop monitor. Gold standard: every content image wider than ~400px declares srcset with multiple widths and a sizes hint. Small images and SVGs are exempt.

Sådan håndhæves responsive-images

Reglen responsive-images evalueres på hver enkelt renderet HTML-side for sig, så et fund altid kan føres tilbage til én konkret side og én konkret rettelse i data eller template. Fejler en side, får agenten en finding, hvor fix-instruktionen for responsive-images er formuleret som en konkret arbejdsordre med filnavne og målbare krav — aldrig et vagt råd. Severity 'warning' betyder at et brud på responsive-images rapporteres uden at blokere builds — men guld-standarden er først nået, når også advarslerne er væk.

Domænet: performance

Perf-domænet internaliserer de statisk afgørbare dele af Lighthouse: billedformater og -vægt, render-blokerende ressourcer, dimensioner mod layout shift og selvhostede fonte. Målet er ikke en score men disciplin — siden er hurtig, fordi den ikke kan bygges langsom. Netop derfor hører responsive-images hjemme her: kravet kan afgøres maskinelt, og dermed kan det håndhæves i stedet for blot at blive anbefalet.

Test og fixtures

Som alle kontrakter i frameworket har perf/responsive-images en mutant-test, der beviser at reglen fejler, når kravet brydes — en regel uden en fejlende test er ikke en regel. Golden-fixturet beviser omvendt, at en fuldt compliant side består responsive-images sammen med de øvrige 85 regler, og denne demoside er selv underlagt hele kontrakten.

Relaterede regler

Tilbage til oversigten over alle 86 regler.