Responsive billeder

Silktide indlæser dine sider i en rigtig browser og sammenligner hvert billedes faktiske dimensioner med den størrelse, det vises i. Billeder, der er meget større end de ser ud til at være på skærmen, rapporteres sammen med de data, der spildes på grund af den ekstra opløsning.

Hvorfor det er vigtigt

Et almindeligt mønster: Et foto på 4.000 pixel uploades, og siden viser det i en bredde på 400 pixel. Besøgende downloader filen i fuld opløsning – potentielt flere megabyte – for at se noget, som en langt mindre fil ville gengive identisk. Spildet er størst på telefoner, som har de mindste skærme og ofte de langsomste og dyreste forbindelser. Hurtigere sider fastholder flere besøgende og bidrager til placeringen i søgeresultater gennem .

Sådan løser du det

Stil hvert billede til rådighed i flere størrelser, og lad browseren vælge den rigtige til enheden:

<!-- Browseren downloader kun den størrelse, den har brug for -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Blomsterbod på markedet">

Automatiser størrelsesændringen. De fleste genererer flere størrelser ved upload, og kan ændre størrelsen ved levering – begge dele forhindrer, at problemet opstår igen.
Som minimum skal du ændre størrelsen på enkeltstående billeder til cirka den størrelse, de vises i, før du uploader dem.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser, og registrer den størrelse, hvert billede vises i, med hensyn til de skarpere skærme på moderne enheder.
Sammenlign det med dimensionerne på den billedfil, der faktisk downloades.
Rapportér billeder, hvor overskuddet er væsentligt, med de bytes, som et korrekt dimensioneret billede ville spare, størst først.

Fejlfinding

Hvordan adskiller dette sig fra de andre billedtjek?

Dette tjek handler om dimensioner: at levere et fysisk større billede, end siden viser. Billedkomprimering og billedoptimering dækker over at gøre filen mindre med de samme dimensioner, og moderne billedformater dækker konvertering til WebP eller AVIF. Det samme billede kan forekomme i flere af dem – løsningerne supplerer hinanden.

Billedet ser skarpt ud på grund af skærme med høj opløsning

Moderne skærme har brug for flere pixel, end den viste størrelse antyder, og målingen tager højde for det. Billeder rapporteres kun, når de overstiger, hvad selv en skærm med høj opløsning kan bruge.