Lever afbeeldingen in moderne indelingen

Lever afbeeldingen in moderne indelingen wil zeggen dat je website ook de mogelijkheid moet bieden om andere afbeelding types te gebruiken. De bekende png en jpg afbeelding zijn minder makkelijk te comprimeren dan bijvoorbeeld webp, Avif, Jpeg 2000 en Jpeg XR. Webp is op dit moment de meest populaire.

Voor mensen die niet bekend zijn met deze moderne afbeeldingen hier een uitleg over de voor- en nadelen en wat je kan doen.

Voordelen moderne afbeeldingen

De meeste mensen die bekend zijn met computers kennen jpg, jpeg, png, tiff en bmp extensies voor afbeeldingen. Jpg en png zijn erg populair voor websites. Voorheen werd voor Google pagespeed geëist dat je afbeelding gecomprimeerd levert op de website. Hier kan je een behoorlijke winst mee maken en de website sneller mee maken, tussen de 20 a 40%. Als de overdrachtsgrootte kleiner is dan zal die sneller downloaden. Dat zal logisch zijn.

Bij afbeeldingen van het formaat webp, Avif, Jpeg 2000 en Jpeg XR kunnen nog meer gecomprimeerd worden. En dat is de reden waarom bij de pagespeed test de aanbeveling staat van “Lever afbeeldingen in moderne indelingen”. Het verschil kan zelfs tot 2/3 van het bestand opleveren.

Nadelen moderne afbeeldingen

Probleem met de moderne indelingen is dat niet alle browser het kunnen tonen. De meeste nieuwe browsers en de laatste versies kunnen dit wel. Als je afbeeldingen in een moderne indeling wilt tonen zal je dus eigenlijk beide opties moeten gebruiken. Voor de bezoekers met oudere browser moeten dan gewoon de bekende jpg en png getoond moeten worden. Beide opties bieden is extra werk en je moet de code aanpassen voor html.

Voor een ieder om zelf te beslissen of het extra beetje werk de moeite waard is om de website sneller te maken of niet. Iedereen wil natuurlijk een zo hoog mogelijke score in Pagespeed omdat dit erg belangrijk is voor de nieuwe Google core update van Web Vitals. Page speed en Web Vitals zijn tegenwoordig een belangrijk onderdeel van je SEO, zoekmachine optimalisatie.

Nog een laatste nadeel is dat het gebruik van webp en standaard extensies er toe kunnen leiden dat de serverreactietijd omhoog gaat en dus je website weer langzamer kan maken. Overweeg dus de voor en nadelen voor je beslist om moderne afbeeldingen te gebruiken.

Lever afbeeldingen in moderne indelingen

Als je afbeelding ook in een moderne indeling wilt tonen op de website dan zal je moeten zorgen dat je afbeeldingen worden omgezet in bijvoorbeeld Webp. Dit is wel een aanrader omdat deze van Google is en daardoor beter wordt ondersteund in alle browsers. Je kan de afbeelding online omzetten maar er is ook een Photoshop plugin om dit te doen. De laatste zal extra tijd kosten. Er is ook een mogelijkheid met NodeJS maar dit is meer voor de echte programmeurs die ook op server niveau zaken kunnen installeren. Geïnteresseerden die geen WordPress gebruiken kunnen een kijkje nemen bij imagemin voor meer informatie hierover.

Voor gebruikers van WordPress is er goed nieuws. Er zijn namelijk plugins die je afbeeldingen automatisch kunnen omzetten naar Webp en ook de html opmaak op je website kunnen aanpassen. Dat kan een hoop werk schelen. Een bekende plugin is bijvoorbeeld WebP Express.

Als je handmatig een afbeelding wilt tonen zal je zelf de opzet moeten maken voor de html. Je kan dan de volgende html opzet gebruiken om beide opties te bieden op je website.

<picture>
    <source srcset="img/afbeelding.webp" type="image/webp">
    <source srcset="img/afbeelding.jpg" type="image/jpeg">
    <img src="img/afbeelding.jpg" alt="Een afbeelding">
</picture>

De browser kiest zelf welke afbeelding zal downloaden en tonen op de website. Hier hoef je dan niets aan te doen. Bij source kan je meerder soorten afbeeldingen gebruiken.