Codeer afbeeldingen op een efficiënte manier

Codeer afbeeldingen op een efficiënte manier om page speed en Web Vitals te verbeteren. Dit is tegenwoordig erg belangrijk omdat het een onderdeel is geworden van SEO, zoekmachine optimalisatie. Wat is het en hoe kan je dit verbeteren en de melding in de Google pagespeed test voorkomen?

Waarom afbeeldingen op een efficiënte manier coderen

Afbeelding wordt vaak zonder na te denken op de website geplaatst. Een afbeelding bevat veel extra informatie die eigenlijk niet nodig is. Er kan zelfs informatie in staan van de camera die is gebruikt en de datum dat de foto is genomen. Al deze informatie kan verwijderd worden. Maar daar blijft het niet bij, afbeeldingen kunnen ook nog eens gecomprimeerd worden. Het verwijderen van de onnodige informatie wordt bij het comprimeren ook verwijderd maar belangrijkste is dat de afbeelding op een efficiëntere manier wordt gecodeerd. Hiermee wordt de afbeelding kleiner om te downloaden.

Codeer afbeeldingen op een efficiënte manier

Nu is duidelijk dat hier bedoeld wordt dat de afbeelding kleiner gemaakt moet worden waardoor de bestandsoverdracht kleiner wordt gemaakt. Hierdoor wordt de website een heel stuk sneller.

Afbeeldingen zijn de onderdelen waar je vaak het meest kan winnen voor page speed en Web Vitals. Hierom is het belangrijk om te kijken welke mogelijkheden er zijn om afbeeldingen te verbeteren om hiermee page speed te verbeteren. De mogelijkheden zijn:

• Gebruik Image CDN’s
• Comprimeer afbeeldingen
• Vervang Gif bestanden voor video’s
• Gebruik Lazy Load voor afbeeldingen
• Geef afbeeldingen het juiste formaat
• Lever afbeeldingen in moderne indelingen

Gebruik Image CDN’s

Een CDN is een Content Delivery Network. Kort gezegd een netwerk waar je website op zou kunnen staan of alleen bepaalde files. Dit is een wereldwijd netwerk en zorgt ervoor dat altijd de dichtstbijzijnde server worden genomen om de gegevens op te halen. Dit kan zorgen dat de website sneller laad of dat files sneller geladen kunnen worden. Dit is afhankelijk van hoe je de CDN gebruikt en waarvoor.

Een Image CDN is een aparte CDN waar niet alleen afbeeldingen worden opgeslagen. De afbeeldingen worden ook gecomprimeerd en er worden verschillende afmetingen van gemaakt. Ook worden er zelfs andere files van gemaakt zoals WebP. Alle opties om het laden van je afbeeldingen zo snel en soepel mogelijk te laten verlopen.

Comprimeer afbeeldingen

Het comprimeren van afbeelding zal duidelijk zijn. De afbeeldingen worden kleiner gemaakt om de bestandsoverdracht kleiner te maken. Hierdoor hoeft de browser minder te downloaden met als gevolg dat de website sneller geladen kan worden.

Er zijn verschillende manieren om afbeeldingen te comprimeren. Voor Joomla en WordPress zijn er verschillende plugins te vinden. De meeste hiervan kunnen ook webP afbeeldingen maken.

Je kan ook online afbeeldingen laten comprimeren. De meest populaire is waarschijnlijk TinyPNG en CompressJPEG.

De melding “Codeer afbeeldingen op een efficiënte manier” heeft voornamelijk te maken met het comprimeren van afbeeldingen. Als je alle afbeelding comprimeert dan zal de melding verdwijnen.

Vervang Gif bestanden voor video’s

GIF bestanden zijn bewegende afbeeldingen. Eigenlijk zijn het verschillende afbeeldingen die als het ware als een film worden getoond. Hierdoor lijkt het of de afbeelding beweegt. Probleem hierbij is dat er een hoop afbeeldingen nodig zijn voor het maken van een GIF bestand.

Als de afbeeldingen kan vervangen dan zal het bestand een heel stuk kleiner worden. Video’s zijn echt niet zo makkelijk om te gebruiken op een website. Daarom is het misschien beter om de GIF bestanden te vermijden op de website.

Gebruik Lazy Load voor afbeeldingen

De “Lazy load” is een andere manier om veel te verbeteren voor page speed. Het werkt eigenlijk heel simpel in theorie. Afbeeldingen die nog niet in beeld zijn worden niet geladen. Deze afbeeldingen worden pas geladen als ze in beeld komen. Met andere woorden, als een bezoeker de website bezoekt hoeft het niet alle afbeeldingen te laden voordat de website getoond kan worden. De bestandsoverdracht wordt hier hier enorm mee verkleind en dus zal de website sneller laden.

Bij deze methode is het heel belangrijk om te zorgen dat de afbeeldingen die direct in beeld zijn wel te tonen en de rest van de afbeeldingen niet te tonen.

Er zijn verschillende plugins voor Joomla en WordPress die dit voor je kunnen regelen maar je kan het ook zelf doen met een klein beetje kennis van programmeren. Zie voor een handige tutorial: “Lazy load afbeeldingen zonder plugin“.

Geef afbeeldingen het juiste formaat

Het is altijd belangrijk om afbeeldingen in het juiste formaat te laden. Stel dat je een blok hebt van 100 x100px waar een afbeelding in geplaatst wordt van 500 x 500px. Deze afbeelding moet op de website verkleind worden zodat het past in het blok.

Als je de afbeelding verkleind naar het formaat dat nodig is dan zal de afbeelding ook kleiner zijn in bestandsoverdracht. Hierdoor kan de afbeelding dan ook sneller geladen.

Dit is vooral erg belangrijk voor mobiele apparaten waar het internet niet zo snel is en het dus belangrijk is dat de afbeeldingen zo klein mogelijk zijn. Maar het is natuurlijk niet zo makkelijk om voor elk apparaat en elke scherm grootte het juist formaat te laden. Website zijn tegenwoordig allemaal responsive en dat maakt het lastiger.

Voor meer informatie hierover en wat je er aan kan doen om dit te verbeteren kan je lezen in “Geef afbeeldingen het juiste formaat“.

Lever afbeeldingen in moderne indelingen

Zoals hierboven is besproken, is het comprimeren van de afbeeldingen het belangrijkst voor het verbeteren van page speed en Web Vitals. Afbeeldingen zijn vaak de grootste bestanden die geladen moeten worden om een website te kunnen tonen. Hier is dus veel winst te behalen voor page speed.

Normaal afbeeldingen zoals PNG en JPEG kunnen gecomprimeerd worden tot ongeveer 40% en dat is al een hele verbetering. Er zijn tegenwoordig ook andere bestandsvormen zoals WebP, Avif, Jpeg 2000 en Jpeg XR. Deze afbeeldingen nog beter gecomprimeerd worden. Deze kunnen zelfs gecomprimeerd worden tot ongeveer 80%. Dat is natuurlijk een heel groot verschil.

WebP is waarschijnlijk het meest bekende want deze is van Google en de rest kan je waarschijnlijk al raden. Je kan zelf kiezen wat je wilt gebruiken. Voornamelijk voor WebP zijn er verschillende plugins te vinden.

Voor meer informatie hierover kan je lezen in “Lever afbeeldingen in moderne indelingen“.

Codeer afbeeldingen op een efficiënte manier, of niet

Als het gaat om het comprimeren van afbeeldingen dan is dat natuurlijk altijd erg positief voor de page speed score voor je website. Punt is dat je moet opletten dat afbeeldingen wel mooi en scherp blijven.

Als ik persoonlijk mij mening moet geven zou ik zeggen dat het het geven van het juiste formaat het belangrijkst is. Daarna is comprimeren van de afbeeldingen heel erg belangrijk. Lazy load kanook erg interessant zijn maar het moet de bezoeker niet steeds opschikken om er een afbeelding geladen moet worden. Dit kan zelf irritant zijn maar het is een enorm winst voor pagespeed.

Of je afbeeldingen ook als WebP wilt leveren en een Image CDN wilt gebruiken hou ik hier buiten. Een goede CDN kost vaak geld en een goede Image CDN nog meer.