Responsive bilder

Silktide laster inn sidene dine i en ekte nettleser og sammenligner de faktiske dimensjonene til hvert bilde med størrelsen det vises i. Bilder som er mye større enn de ser ut på skjermen, rapporteres, sammen med mengden data som sløses bort på grunn av den ekstra oppløsningen.

Hvorfor dette er viktig

Et vanlig eksempel: Et bilde på 4000 piksler lastes opp, og siden viser det med en bredde på 400 piksler. Besøkende laster ned filen i full oppløsning – potensielt flere megabyte – for å se det som en langt mindre fil ville ha gjengitt identisk. Sløsingen er størst på telefoner, som har de minste skjermene og ofte de tregeste og dyreste forbindelsene. Raskere sider beholder flere besøkende og bidrar til bedre søkerangering gjennom .

Slik løser du det

Tilby hvert bilde i flere størrelser, og la nettleseren velge riktig størrelse for enheten:

<!-- Nettleseren laster bare ned størrelsen den trenger -->
<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ørrelsesendringen. De fleste genererer flere størrelser ved opplasting, og kan endre størrelsen ved levering – begge deler hindrer at problemet oppstår igjen.
Som et minimum bør du endre størrelsen på enkeltbilder til omtrent den størrelsen de skal vises i, før du laster dem opp.

Slik tester Silktide dette

Last inn siden i en ekte nettleser, og registrer størrelsen hvert bilde vises i, med hensyn til de skarpere skjermene på moderne enheter.
Sammenlign dette med dimensjonene til bildefilen som faktisk ble lastet ned.
Rapporter bilder der overskytende størrelse er betydelig, med antall byte et bilde med riktig størrelse ville spart, sortert fra størst til minst.

Feilsøking

Hvordan skiller dette seg fra de andre bildekontrollene?

Denne kontrollen gjelder dimensjoner: at et fysisk større bilde leveres enn det siden viser. Bildekomprimering og Bildeoptimalisering handler om å gjøre filen mindre med de samme dimensjonene, mens Moderne bildeformater handler om å konvertere til WebP eller AVIF. Det samme bildet kan vises i flere kontroller – løsningene utfyller hverandre.

Bildet ser skarpt ut på grunn av skjermer med høy oppløsning

Moderne skjermer trenger riktignok flere piksler enn visningsstørrelsen antyder, og målingen tar hensyn til dette. Bilder rapporteres bare når de er større enn det selv en skjerm med høy oppløsning kan utnytte.