Afbeeldingselementen hebben geen expliciete width en height

Als je in de page speed test de melding “Afbeeldingselementen hebben geen expliciete width en height” ziet dan betekent dat er werk te doen in templates en dergelijken. Dit is een heel erg belangrijk onderdeel van page speed en Web Vitals omdat het te maken heeft met de CLS (Cumulative Layout Shift).

Kort gezegd is een cumulatieve opmaak verschuiving dat er onderdelen op de website zijn die tijdens het laden verschuiven of verschalen. Dit kan irritant zijn voor bezoekers maar bezoekers kunnen mis klikken en per ongeluk op de verkeerde knop klikken. Dus wel een geldige reden waarom dit belangrijk is voor Web Vitals omdat dit meer gaat om de bezoekerservaring. De CLS is maar 15% van de gehele page speed berekening maar wie hier ervaring mee heeft weet dat dit erg gevoelig is.

Het opgeven van de breedte en hoogte van een afbeelding voorkomt opmaak verschuiving tijdens het laden.

Afbeeldingselementen hebben geen expliciete width en height

Alle afbeeldingen op een website moeten de breedte en hoogte hebben in de html tag. Dit zorgt ervoor dat de browser direct hier de juiste ruimte voor kan bewaren voordat de afbeelding is geladen. Zoals bekend kunnen afbeeldingen langzaam laden. Ze laden altijd van boven naar beneden. In het geval dat dit gebeurd en de breedte en hoogte zijn niet bekend dan zal de tekst of wat dan ook eronder langzaam mee verschuiven naar beneden. Dit is lelijk en vooral irritant voor bezoekers.

Als voorbeeld hier de HTML van het logo op deze website.


<img src="https://www.cornelisdeleeuwvanweenen.nl/wp-content/uploads/logo-cornelis-de-leeuw-van-weenen-page-speed.png" alt="" width="275" height="100">

Hier is duidelijk de width en height te zien. Hier hoeft px niet aan toegevoegd te worden want ze zijn altijd in pixels.

Dit betekent waarschijnlijk dat er zaken in de template aangepast moeten worden. En misschien zelfs in plugins. Template, thema’s en plugin houden hier tegenwoordig rekening mee. Mocht het toch een probleem zijn, kijk dan of je het kan vervangen of aanpassen.

WordPress theme en plugin ontwikkeling

Voor de websites die draaien op WordPress is er iets dat misschien kan helpen om dit te automatiseren.
In de editor kan je eenvoudig een afbeelding toevoegen en dan wordt er de hoogte en breedte automatisch bij geplaatst. Hetzelfde als je gebruik maakt van the_post_thumbnail().

Er zijn situaties waar dit niet kan. Denk bijvoorbeeld aan afbeeldingen voor categorieën, in galerijen en sliders bijvoorbeeld. In dit geval als je wel de ID of ID’s hebt kan je gebruik maken van wp_get_attachment_image_src($id, $size).

Afbeeldingselementen hebben geen expliciete width en height Freelance website ontwikkeling

Hier een voorbeeld waarbij we wel de thumbnail gebruiken als voorbeeld voor het ID van de afbeelding. Dit zou je kunnen doen als je wat extra zaken wilt toevoegen die je normaal niet krijgt met the_post_thumbnail().


<?php 
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($testi_thumb_id,'testithumb'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>">

Hier krijgt $image namelijk 3 waarden, de URL [0], breedte [1] en hoogte [2].
Deze uitleg is omdat ik zelf dit weinig heb gezien maar wel een handige manier is om dit dynamisch te doen met een klein beetje PHP.

Als het wel mogelijk is om de URL van de afbeelding te verkrijgen maar niet de ID, neem dan eens een kijken bij Afbeelding ID van URL in WordPress. Dit kan weleens handig zijn.

Hopelijk lukt het nu iedereen om hiermee de melding “Afbeeldingselementen hebben geen expliciete width en height” in de Google pagespeed test te voorkomen.

Er zijn nog geen reacties. Wees de eerste..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*