Explicit image sizes

Silktide kontrollerar att bilderna på sidan anger sin storlek, så att webbläsaren kan reservera rätt mängd utrymme för varje bild innan den laddas ned. Bilder utan angiven storlek gör att sidan hoppar runt medan de laddas in.

<!-- Problem: ingen storlek, webbläsaren reserverar inget utrymme -->
<img src="hero.jpg" alt="Vårkollektion">

<!-- Åtgärdat: webbläsaren reserverar omedelbart ett utrymme på 1200x600 -->
<img src="hero.jpg" alt="Vårkollektion" width="1200" height="600">

Varför detta är viktigt

Innan en bildfil har laddats in har webbläsaren inget sätt att veta hur stor bilden kommer att vara, såvida inte sidan anger det. Utan den informationen renderar den sidan utan något mellanrum och skjuter sedan allt nedåt när varje bild laddas in – så att text hoppar mitt i en mening och besökare trycker på fel sak när målen flyttar sig i sista stund.

Detta hopp mäts som layoutförskjutning och är en del av Googles , som också påverkar sökrankningen. Bilder utan angiven storlek är den vanligaste orsaken till detta.

Så här åtgärdar du det

Lägg till attributen width och height för varje bild och ange filens verkliga proportioner. Webbläsaren använder dem för att reservera utrymme med rätt bildförhållande även när skalar bilden responsivt.
För responsiva bilder behåller du attributen och låter CSS, exempelvis max-width: 100%; height: auto;, sköta skalningen – det reserverade utrymmet skalas tillsammans med bilden.
Om du inte kan lägga till attribut reserverar du i stället utrymme i CSS med egenskapen aspect-ratio på bilden eller dess behållare.
Kontrollera ditt : de flesta lägger automatiskt till dimensioner när bilder läggs till via redigeraren, så saknade storlekar beror ofta på handskriven , mallar eller inbäddat innehåll.

Så här testar Silktide detta

Laddar sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Hittar alla bilder som renderas utan en explicit storlek – utan användbara attribut för bredd/höjd och utan CSS som fastställer deras dimensioner.
Rapporterar varje bild utan angiven storlek samt dess plats på sidan.

Felsökning

Sidan ser bra ut när jag laddar den

Med cachade bilder eller en snabb anslutning kan bilderna laddas in så snabbt att inget synligt hopp uppstår. Besökare i långsammare nätverk ser samma sida byggas ihop steg för steg. Reserverat utrymme kostar inget när bilden laddas snabbt och förhindrar hoppet när den inte gör det.

Går inte fasta storlekar sönder med min responsiva design?

Nej. Moderna webbläsare behandlar attributen width och height som bildens bildförhållande, inte som en fast storlek, så CSS kan fortfarande skala bilden så att den passar på alla skärmar. Attributen och CSS för fungerar tillsammans.