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.

Geef afbeeldingen het juiste formaat

Als je bedenkt dat een website mobiel vriendelijk moet zijn en dus responsive dan zal duidelijk zijn dat je niet altijd de juiste formaten kan gebruiken voor afbeeldingen. Een afbeelding kan het juiste formaat hebben op de desktop maar op de telefoon weer te groot zijn. Internet van de telefoon is over het algemeen langzamer dan van de desktop. Hier door moeten we juist denken aan het formaat voor de telefoon.Er zijn verschillende oplossingen om dit op de juiste manier te doen zodat de melding niet meer verschijnt in de pagespeed test. Kwaliteit van de afbeelding is vaak een belangrijk punt voor veel website eigenaren. Niemand wint er iets mee om afbeeldingen op de website onnodig te verklein.

• 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.

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.