Skilgreindar stærðir mynda

Silktide prófar hvort myndirnar á síðunni þinni tilgreini stærð sína, svo vafrinn geti frátekið rétt pláss fyrir hverja mynd áður en hún er sótt. Myndir án tilgreindrar stærðar valda því að síðan hoppar til þegar þær birtast.

<!-- Vandamál: engin stærð, vafrinn frátekur ekkert pláss -->
<img src="hero.jpg" alt="Vorlag">

<!-- Lagfært: vafrinn frátekur 1200x600 pláss strax -->
<img src="hero.jpg" alt="Vorlag" width="1200" height="600">

Hvers vegna þetta skiptir máli

Þar til myndskrá berst hefur vafri enga leið til að vita hversu stór myndin verður nema síðan segi það. Án þessara upplýsinga birtir hann síðuna án auðs pláss og ýtir síðan öllu niður þegar hver mynd hleðst inn – þannig hoppar texti til mitt í setningu og gestir smella á rangan hlut þegar marksvæði færast á síðustu stundu.

Þessi hreyfing er mæld sem útlitsfærsla og er hluti af Google, sem hafa einnig áhrif á stöðu í leitarniðurstöðum. Myndir án stærðar eru algengasta orsök hennar.

Hvernig á að laga þetta

Bættu width- og height-eigindum við hverja mynd og myndskeið og láttu þær samsvara raunverulegum hlutföllum skrárinnar. Vafrinn notar þau til að fráteka pláss með réttu stærðarhlutfalli, jafnvel þegar skalar myndina eftir skjástærð.
Fyrir myndir sem aðlagast skjástærð skaltu halda eigindunum og láta CSS, til dæmis max-width: 100%; height: auto;, sjá um skalann – frátekna plássið skalast með.
Ef þú getur ekki bætt við eigindum skaltu þess í stað fráteka pláss í CSS með aspect-ratio-eiginleikanum á myndinni eða íláti hennar.
Athugaðu : flest kerfi setja stærðir sjálfkrafa inn þegar myndum er bætt við í ritlinum, þannig að stærðir vanti oft vegna handskrifaðs , sniðmáta eða innfellds efnis.

Hvernig Silktide prófar þetta

Hleður síðunni í raunverulegum vafra með því að nota gerð tækis, tengihraða og prófunarstað sem stillt er fyrir hraðaprófin þín.
Finnur allar myndir sem birtar eru án skýrrar stærðar – án nothæfra width-/height-eiginda og án CSS sem ákvarðar stærð þeirra.
Tilkynnir um hverja mynd án stærðar og hvar hún er á síðunni.

Úrræðaleit

Síðan lítur vel út þegar ég hleð hana inn

Með myndum í skyndiminni eða hraðri nettengingu geta myndir borist svo hratt að ekkert sjáanlegt hopp verður. Gestir á hægari netkerfum sjá sömu síðu birtast smám saman. Frátekið pláss kostar ekkert þegar myndin hleðst hratt inn og kemur í veg fyrir hopp þegar hún gerir það ekki.

Munu fastar stærðir ekki eyðileggja aðlögunarhæfa hönnun?

Nei. Nútímavafrar líta á width- og height-eigindirnar sem stærðarhlutfall myndarinnar, ekki fasta stærð, svo CSS getur enn skalað myndina þannig að hún passi á hvaða skjá sem er. Eigindirnar og CSS fyrir vinna saman.