Eksplisitte bildestørrelser

Silktide kontrollerer at bildene på siden oppgir størrelsen sin, slik at nettleseren kan reservere riktig mengde plass til hvert bilde før det lastes ned. Bilder uten oppgitt størrelse gjør at siden hopper rundt når de lastes inn.

<!-- Problem: ingen størrelse, nettleseren reserverer ingen plass -->
<img src="hero.jpg" alt="Vårkolleksjon">

<!-- Fikset: nettleseren reserverer en plass på 1200 x 600 umiddelbart -->
<img src="hero.jpg" alt="Vårkolleksjon" width="1200" height="600">

Hvorfor dette er viktig

Før en bildefil er lastet inn, har nettleseren ingen måte å vite hvor stort bildet blir, med mindre siden oppgir det. Uten denne informasjonen gjengir den siden uten noe mellomrom, og skyver deretter alt ned når hvert bilde lastes inn – slik at teksten hopper midt i en setning og besøkende trykker på feil element når målene flytter seg i siste øyeblikk.

Denne hoppingen måles som layoutforskyvning og er en del av Googles , som også påvirker søke rangeringen. Bilder uten størrelse er den klart vanligste årsaken.

Slik løser du det

Legg til attributtene width og height for hvert bilde og hver video, i samsvar med filens faktiske proporsjoner. Nettleseren bruker dem til å reservere plass med riktig størrelsesforhold, selv når skalerer bildet responsivt.
For responsive bilder beholder du attributtene og lar CSS, for eksempel max-width: 100%; height: auto;, stå for skaleringen – den reserverte plassen skaleres sammen med bildet.
Hvis du ikke kan legge til attributter, kan du reservere plass i CSS i stedet ved å bruke egenskapen aspect-ratio på bildet eller beholderen.
Kontroller : De fleste setter inn dimensjoner automatisk når bilder legges til via redigeringsverktøyet, så manglende størrelser skyldes ofte håndskrevet , maler eller innebygd innhold.

Slik tester Silktide dette

Last inn siden i en ekte nettleser ved å bruke enhetstypen, tilkoblingshastigheten og testplasseringen som er konfigurert for hastighetstestene dine.
Finn hvert bilde som gjengis uten en eksplisitt størrelse – uten brukbare width-/height-attributter og uten CSS som fastsetter dimensjonene.
Rapporter hvert bilde uten størrelse, med plasseringen på siden.

Feilsøking

Siden ser fin ut når jeg laster den inn

Med bufrede bilder eller en rask tilkobling kan bildene lastes inn så raskt at ingenting hopper synlig. Besøkende på tregere nettverk ser den samme siden bli satt sammen bit for bit. Reservert plass koster ingenting når bildet lastes inn raskt, og forhindrer hoppingen når det ikke gjør det.

Vil ikke faste størrelser ødelegge det responsive designet mitt?

Nei. Moderne nettlesere behandler attributtene width og height som bildets størrelsesforhold, ikke som en fast størrelse, slik at CSS fortsatt kan skalere bildet så det passer på alle skjermer. Attributtene og CSS for fungerer sammen.