Properly size images er en Lighthouse- og PageSpeed-advarsel, der opstår, når et billede downloades i en opløsning, der er væsentligt større end den størrelse, det vises i på skærmen. Browseren skal stadig hente og dekode alle pixels — selv om de ikke bruges i layoutet.
Hvorfor dimensionering betyder mere end format
Et moderne format som WebP eller AVIF hjælper, men løser ikke et dimensionsproblem. Et 2.400 px bredt foto, der vises i 600 px, overfører typisk fire gange så mange pixels som nødvendigt. Det rammer især LCP, når hero- eller produktbilledet er for stort, og det koster unødigt data på mobilnet.
Ret format og dimensioner sammen: vælg JPEG til fotos, PNG til grafik med transparens, og lever det i den størrelse, layoutet faktisk bruger på den aktuelle breakpoint.
Korrekt størrelse i WordPress
WordPress genererer flere billedstørrelser ved upload, men temaet skal bruge dem. Kontrollér at srcset og sizes er sat korrekt i stedet for altid at indsætte originalen. Definér egne billedstørrelser, hvis et kort, galleri eller hero-modul har faste dimensioner, og beskær kilden til samme billedforhold.
Kombinér dimensionering med effektiv kodning, next-gen-formater og lazy loading til billeder under folden — men lazy-load ikke LCP-billedet. Responsive billeder kræver, at temaet kender layoutets faktiske visningsbredder.
Sådan finder du problemet
I Chrome DevTools’ Network-panel kan du sammenligne et billedes “rendered size” med dets naturlige dimensioner og den overførte filstørrelse. Test både bred og smal skærm: en god desktop-variant er ikke nødvendigvis korrekt på mobil. PageSpeed Insights viser ofte de største syndere — start med det største billede over folden.