# perf/responsive-images

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.

## 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

- [perf/lazy-loading](https://pseo.mikkelkrogsholm.dk/regler/perf/lazy-loading/)
- [perf/image-weight](https://pseo.mikkelkrogsholm.dk/regler/perf/image-weight/)
- [perf/self-hosted-fonts](https://pseo.mikkelkrogsholm.dk/regler/perf/self-hosted-fonts/)