Responsiva bilder

Silktide läser in dina sidor i en riktig webbläsare och jämför varje bilds faktiska dimensioner med storleken den visas i. Bilder som är mycket större än de ser ut på skärmen rapporteras, tillsammans med den datamängd som slösas bort på grund av den extra upplösningen.

Varför detta är viktigt

Ett vanligt scenario: ett foto på 4 000 pixlar laddas upp och sidan visar det i 400 pixlars bredd. Besökare laddar ner filen i full upplösning – potentiellt flera megabyte – för att se det som en mycket mindre fil skulle återge på exakt samma sätt. Spillet är störst på telefoner, som har de minsta skärmarna och ofta de långsammaste och dyraste anslutningarna. Snabbare sidor behåller fler besökare och påverkar sökrankningen genom .

Så åtgärdar du det

Tillhandahåll varje bild i flera storlekar och låt webbläsaren välja rätt storlek för enheten:

<!-- Webbläsaren laddar bara ner den storlek den behöver -->
<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="Blomstånd på marknaden">

Automatisera storleksändringen. De flesta genererar flera storlekar vid uppladdning, och kan ändra storleken vid leverans – båda alternativen förhindrar att problemet återkommer.
Ändra åtminstone storleken på enstaka bilder till ungefär den storlek de visas i innan du laddar upp dem.

Så testar Silktide detta

Läs in sidan i en riktig webbläsare och registrera storleken som varje bild visas i, med hänsyn till de skarpare skärmarna på moderna enheter.
Jämför den med dimensionerna för den bildfil som faktiskt laddas ner.
Rapportera bilder där överskottet är betydande, tillsammans med det antal byte som en bild i rätt storlek skulle spara, med de största först.

Felsökning

Hur skiljer sig detta från de andra bildkontrollerna?

Den här kontrollen handlar om dimensioner: att leverera en fysiskt större bild än vad sidan visar. Bildkomprimering och bildoptimering handlar om att göra filen mindre med samma dimensioner, och moderna bildformat handlar om att konvertera till WebP eller AVIF. Samma bild kan förekomma i flera kontroller – åtgärderna kompletterar varandra.

Bilden ser skarp ut på grund av skärmar med hög upplösning

Moderna skärmar behöver fler pixlar än den visade storleken antyder, och mätningen tar hänsyn till detta. Bilder rapporteras bara när de överskrider vad även en skärm med hög upplösning kan använda.