Hva og hvorfor
Av og til når jeg surfer på nettet så opplever jeg at nettsider kan hoppe opp og ned etter hvert som innhold lastes inn. I dette innlegget har jeg forklart hvordan du kan unngå såkalt layout shift på websider. Det kan blant annet komme av bilder som lastes inn og innhold som dynamisk blir lagt til.
Eksempelvis når jeg åpner nettsidene til nettbanken på mobil og forsiden lastes, så kommer login-knappen først. Men i samme øyeblikk som jeg skal trykke på knappen så har logoen blitt lastet inn og loginn-knappen har flyttet på seg. Jeg trykker derfor feil og havner på feil side. Jeg må dermed trykke på logoen for å gå tilbake til forsiden og deretter trykke på login-knappen igjen.
Eksempelet mitt over faller vel i kategorien i-landsproblem, men hvis vi glemmer det og heller ser på statistikken. Eksempelvis at eBay økte “Legg i handlekurven” med 0.5% for hvert 100 millisekund de sparte i lastehastighet på søkesiden, så kan vi plutselig begynne å telle kroner for HTML-elementene som skaper hodebry for brukerne. For siden oppleves jo ikke som ferdig lastet så lenge siden hopper opp og ned. Jeg tenker derfor at vi kan anta at vi potensielt mister brukere med en slik brukeropplevelse.
Hvordan
For flere år siden var det vanlig å sette bredde og høyde direkte på bilde i HTMLen. Slik som vist nedenfor:
<img src=”tiger.jpg” width=”640px” height=”480px” alt=”tiger” />
Deretter ble utviklere opptatt av CSS og senere responsivt design. I disse dager ser derfor img-taggen ofte slik ut, hvor tilhørende CSS setter bredden og noen ganger høyden.
<img src=”tiger.jpg” alt=”tiger” />
Chromium, Firefox og snart WebKit (Safari) har nå endret måten de utnytter "width" og "height" attributtene på img-taggen. Ved at man setter dem så vil nettleseren bruke verdiene for å regne ut sideforholdet (ratio) og deretter oppta den plassen i layout til bildet er lastet inn. Det fører til at layouten/nettsiden ikke hopper opp og ned etterhvert som bildene lastes.
Eksempelvis 4:3 format:
<img src=”tiger.jpg” width=”640” height=”480” alt=”tiger” />
Dersom bildet ligger i en container hvor bildet har CSS "width" 100%, så vil nettleseren regne ut sideforholdet til dette området og deretter oppta høyden. Men for å unngå at høyden til bildet skal eksempelvis bli 480 som i eksempelet over, så sett "height": auto; i CSSen. Merk at CSS overstyrer dermed HTML-attributtene.
Eksempel:
<div class=”container”> <img src=”tiger.jpg” width=”640” height=”480” alt=”tiger” /></div>
.container { width:50%;}
.container img { width:100%; height:auto;}
Det som også er verdt å merke seg er at du trenger ikke å ha den korrekte størrelsen i "width"- og "height"-attributtene. Det som er viktig er at sideforholdet mellom "width" og "height" er det samme som sideforholdet i det virkelige bildet. Det mest brukte sideforholdet er kanskje 16:9.
Srcset
Nettleseren utnytter "width" og "height" på samme måte også ved bruk av srcset-attributtet. Det eneste man må tenke på at er alle bildene som blir definert i srcset må ha samme sideforhold.
Picture-element
Så langt jeg vet så finnes det foreløpig ingen løsning for picture-elementet.
