Geef afbeeldingen het juiste formaat
Waarschijnlijk heeft iedereen hier wel eens mee te maken gehad tijdens het testen van de website voor Pagespeed en Web Vitals voor Google. De melding “Geef afbeeldingen het juiste formaat” zal bij de meeste wel direct duidelijk. Hier gaan we kijken hoe we deze melding kunnen voorkomen.
Pagespeed en Web Vitals
Google wil de mensen belonen met een betere page ranking als de website snel en soepel laad en hierdoor een betere bezoekerservaring bied.
Het probleem is dat er te grote afbeeldingen worden geladen die op de website verkleind moeten worden. Stel dat je ergens een blok hebt van 100px x 100px en daar plaats je een afbeelding van 1000px x 1000px. De afbeelding moet dan ingekrompen worden zodat het in het blok past. Dit is op zich nog niet het ergst maar een grote afbeelding kost meer laadtijd dan een kleine afbeelding.
Het optimaliseren van het formaat van afbeeldingen is belangrijk voor alle pagespeed onderdelen van Google omdat het een grote impact heeft op de laadtijd. Bedenk ook dat er de melding is over het leveren van afbeeldingen in een moderne indeling en afbeeldingen op een efficiënte manier coderen.
Het optimaliseren van het formaat van afbeeldingen is belangrijk voor alle pagespeed onderdelen van Google Insights.
Geef afbeeldingen het juiste formaat

- Je kan de afbeelding de vaste afmeting geven dat op elke apparaat wordt gebruikt
- Voor WordPress kan de media-uploader gebruikt worden
- Maak gebruik van attributes “sizes” en “srcset”
Een vaste afmeting zal duidelijk zijn. Voor de gene die WordPress gebruiken weten dat je de media uploader kan gebruiken. WordPress doet de rest voor je en is een makkelijke manier dit probleem op te lossen.
Vraag vrijblijvende een offerte aan.
Het gebruik van de attributes “sizes” en “srcset” is wat ingewikkelder om hier eventjes uit te leggen. Voor het gemak een voorbeeldje. Dit is de html van de grote afbeelding op de home page van deze website.
<picture>
<source srcset="https://www.cornelisdeleeuwvanweenen.nl/wp-content/uploads/gt-speedy-gonzales-home-image-02.jpg" media="(min-width: 780px)">
<source srcset="https://www.cornelisdeleeuwvanweenen.nl/wp-content/themes/gt-speedy/img/gt-speedy-gonzales-home-image-480.jpg" media="(min-width: 480px)">
<img class="home-image" srcset="https://www.cornelisdeleeuwvanweenen.nl/wp-content/themes/gt-speedy/img/gt-speedy-gonzales-home-image-small.jpg" alt="Freelance website ontwikkeling" width="1300" height="600">
</picture>
Met <source> worden de verschillende afmeting voor de verschillende schermbreedtes opgegeven. Er mag maar 1 afbeelding de <img> tag staan. Deze moeten ingesloten worden in <picture>. Hier is gebruik gemaakt van 3 verschillende afmetingen. De browser selecteert welke afbeelding het zal downloaden en tonen.
Hopelijk is het mogelijk om nu de melding “Geef afbeeldingen het juiste formaat” in de pagespeed test te voorkomen.
Er zijn nog geen reacties. Wees de eerste..!!