Expliciete afbeeldingsafmetingen

Silktide controleert of de afbeeldingen op je pagina hun afmetingen aangeven, zodat de browser de juiste hoeveelheid ruimte voor elke afbeelding kan reserveren voordat deze wordt gedownload. Afbeeldingen zonder opgegeven afmetingen zorgen ervoor dat de pagina verspringt wanneer ze worden geladen.

<!-- Probleem: geen afmetingen, de browser reserveert geen ruimte -->
<img src="hero.jpg" alt="Voorjaarscollectie">

<!-- Opgelost: de browser reserveert direct een ruimte van 1200x600 -->
<img src="hero.jpg" alt="Voorjaarscollectie" width="1200" height="600">

Waarom dit belangrijk is

Totdat een afbeeldingsbestand is geladen, kan een browser niet weten hoe groot de afbeelding wordt, tenzij de pagina dat aangeeft. Zonder die informatie rendert de browser de pagina zonder tussenruimte en duwt hij alles naar beneden wanneer elke afbeelding wordt geladen. Daardoor springt tekst midden in een zin en tikken bezoekers op het verkeerde element wanneer doelen op het laatste moment verschuiven.

Dit verspringen wordt gemeten als layoutverschuiving, een onderdeel van Google's , die ook meetellen voor de zoekresultaten. Afbeeldingen zonder afmetingen zijn hiervan de meest voorkomende oorzaak.

Zo los je het op

Voeg de kenmerken width en height toe aan elke afbeelding en video, overeenkomstig met de werkelijke verhoudingen van het bestand. De browser gebruikt deze om ruimte met de juiste beeldverhouding te reserveren, zelfs wanneer de afbeelding responsief schaalt.
Behoud voor responsieve afbeeldingen deze kenmerken en laat CSS, zoals max-width: 100%; height: auto;, het schalen uitvoeren. De gereserveerde ruimte schaalt mee.
Als je geen kenmerken kunt toevoegen, reserveer dan in plaats daarvan ruimte in CSS met de eigenschap aspect-ratio op de afbeelding of de container ervan.
Controleer je : de meeste CMS'en voegen automatisch afmetingen toe wanneer afbeeldingen via de editor worden toegevoegd. Ontbrekende afmetingen zijn daarom vaak afkomstig van handgeschreven , templates of ingesloten content.

Zo test Silktide dit

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn geconfigureerd.
Zoek elke afbeelding die zonder expliciete afmetingen wordt weergegeven: zonder bruikbare kenmerken voor width/height en zonder CSS die de afmetingen vastlegt.
Rapporteer elke afbeelding zonder afmetingen, inclusief de locatie ervan op de pagina.

Problemen oplossen

De pagina ziet er goed uit wanneer ik deze laad

Met afbeeldingen uit de cache of een snelle verbinding kunnen afbeeldingen zo snel worden geladen dat er niets zichtbaar verspringt. Bezoekers op tragere netwerken zien dezelfde pagina stukje voor stukje opgebouwd worden. Gereserveerde ruimte kost niets wanneer de afbeelding snel wordt geladen en voorkomt het verspringen wanneer dat niet het geval is.

Gaan vaste afmetingen mijn responsieve ontwerp niet verstoren?

Nee. Moderne browsers behandelen de kenmerken width en height als de beeldverhouding van de afbeelding, niet als een vaste afmeting. CSS kan de afbeelding dus nog steeds schalen zodat deze op elk scherm past. De kenmerken en CSS voor werken samen.