Een van de optimalisatie tips voor je WordPress website die makkelijk te doen is, is het optimaliseren van afbeeldingen. Veel websites, en waarschijnlijk ook die van jou, gebruiken foto’s en andere illustraties. Sommigen functioneel zoals product foto’s of grafieken. Anderen om je website er mooier uit te laten zien. Vaak zijn deze afbeeldingen echter te groot, en dat betekent een langere laadtijd.
Je kan je afbeeldingen niet alleen optimaliseren door op de grootte van je bestanden te letten. Ook kan je ervoor kiezen om moderne formaten te gebruiken zoals WebP en AVIF. Deze laden sneller en zijn vaak dus beter dan het JPEG, GIF en PNG formaat. Daarbij kan je ook nog eens gebruik maken van lazy loading. Bij lazy loading wordt een foto pas geladen vlak voor deze in beeld komt.
Hieronder lees je meer over het optimaliseren van afbeeldingen voor je WordPress of gewone website:
- Maak afbeeldingen niet te groot
- Kies het juiste bestandsformaat
- Moderne bestandsformaten
- Welk formaat kies je
- Lazy loading op je website
- WordPress plug-in voor afbeeldingen
Hoe kan je afbeeldingen optimaliseren voor je WordPress website?
Afbeeldingen kan je op een aantal manieren optimaliseren. Ik neem deze met je door:
Maak je afbeeldingen niet te groot
Het eerste wat je kan doen is om je afbeeldingen niet te groot te maken. Vaak zie ik websites waar een relatief kleine foto wordt getoond. Als je dan echter de foto zelf bekijkt is deze een stuk groter dan nodig is. Een logo is meestal klein aanwezig en hoef je dan niet in een groter formaat op te slaan. Let hierop als je een afbeelding bewerkt om later te gebruiken op je website.
Kies het juiste bestandsformaat
Afbeeldingen kan je op een aantal manieren opslaan. Hiervan zijn JPEG, PNG en GIF de meest bekende. Elk formaat heeft zijn eigen voor- en nadelen. Bij het optimaliseren van afbeeldingen voor je WordPress website is het handig om te weten welke dit zijn.
GIF
Een GIF-bestand is vaak klein maar is niet overal voor te gebruiken. In een GIF-afbeelding kan namelijk maar een beperkt aantal kleuren worden opgeslagen. Dit is handig voor grafieken, een logo en andere afbeeldingen met weinig verschillende kleuren. Een ander voordeel van GIF is dat je de achtergrond transparant kan maken.
PNG
Ook PNG kan je gebruiken voor een afbeelding met weinig kleuren. En net als bij GIF kan je de achtergrond transparant maken. PNG heeft meestal wel een betere kwaliteit en gebruik ik dus in plaats van GIF. Hierbij heb ik het over PNG-8.
Daarnaast heb je ook PNG-24. De 8 en 24 staat voor het aantal bits. Een PNG-24 bestand kan meer kleuren bevatten dan PNG-8. Deze kan je gebruiken als je een foto hebt die je deels transparant weer wil geven. Gebruik je een foto die niet transparant hoeft te zijn? Dan kan je weer beter kiezen voor JPEG.
JPEG
JPEG is een bestandsformaat dat compressie toepast. Hoe hoger de compressie, hoe minder mooi de foto wordt opgeslagen. Vooral als een foto een groot vlak met dezelfde kleur hebt zie je dit. Je krijgt dan een blokkerige structuur. Door de compressie minder hoog te zetten wordt de kwaliteit beter. De grootte van het bestand neemt dan echter ook toe.
Vaak is het een kwestie van proberen wat de beste verhouding tussen compressie en kwaliteit geeft. Zelf kies ik vaak voor een compressie tussen de 50% en 60%. Door deze compressie goed toe te passen kan je de afbeeldingen voor je WordPress website vaak al heel goed optimaliseren.
Modernere bestandsformaten
Tegenwoordig heb je ook nog andere formaten om afbeeldingen op te slaan. Dit zijn het SVG-, WebP- en AVIF-formaat.
SVG
SVG is een afbeelding waarbij alle informatie als vectoren wordt opgeslagen. Goed te gebruiken voor eenvoudige illustraties en logo’s. Het voordeel van SVG is dat het niet uitmaakt hoe groot je het toont. De afbeelding zal altijd scherp zijn. Voor foto’s is SVG niet geschikt.
WebP
WebP is een modern formaat voor zowel eenvoudige als ingewikkeldere afbeeldingen. Het heeft de voordelen van GIF en JPEG maar dan kleiner. Transparant, veel of weinig kleur, compressie… met WebP kan het allemaal. Nadeel is dat WebP niet door alle browsers wordt ondersteund.
AVIF
AVIF is op zijn beurt weer de opvolger van WebP. Volg je het nog een beetje? AVIF is nog kleiner dan GIF, JPEG en WebP maar wordt ook niet door alle browsers ondersteund.
Kies voor WebP en AVIF, met als back-up JPEG en PNG, en je hebt altijd de beste optie.
Welk formaat kies je voor het optimaliseren van je afbeeldingen voor WordPress?
Wil jij afbeeldingen voor je WordPress site optimaliseren? Dan kan je het best kiezen voor PNG en JPEG. Maak daarbij een kopie in WebP en AVIF en je hebt altijd de beste optie. Vector-afbeeldingen die niet te ingewikkeld zijn sla je op als SVG.
Aan de voorkant van je website laad je de WebP en AVIF variant. In je HML geef je aan dat er JPEG of PNG als back-up kan worden gebruikt. Deze worden dan getoond als de browser WebP en AVIF niet aankan. Hier gebruik je een speciale HTML-code voor, bijvoorbeeld de <picture>-of <figure>-tag:
<picture>
<!-- Kleinere schermen -->
<source ... >
<!-- Middelgrote schermen -->
<source ... >
<!-- Grote schermen -->
<source ... >
<img ... >
</picture>In dit uitgeklede voorbeeld worden via de <source>-tag drie moderne formaten geladen in diverse groottes. De <img>-tag is de back-up en wordt alleen getoond als de moderne variant niet werkt. Dit kan ook op andere manieren worden gedaan, maar deze variant vind ik het fijnst en snelst werken. Op Zoekeenboek.nl zie je hoe dit is toegepast:
Hier wordt een pagina-vullende foto geladen waarbij de laadtijd van de website altijd zo snel mogelijk is. Hierbij maakt het niet uit of de website op een smartphone of groot scherm wordt bekeken. Altijd wordt de optimale afbeelding geladen.
Lazy loading
Wat ook onmisbaar is voor het optimaliseren van afbeeldingen voor je WordPress site is lazy loading. Hierbij wordt een kleine placeholder gebruikt die vast de ruimte inneemt van je afbeelding. De afbeelding zelf wordt pas geladen als deze in beeld komt. Je bepaalt zelf welk moment dit is, als deze in beeld komt of net iets daarvoor. Het grote voordeel is dat alles stap voor stap wordt geladen en je website al kan worden getoond voor alle elementen geladen zijn.
Lazy loading kan ook worden gebruikt voor andere elementen zoals bv. Google Maps. Het is een vrij eenvoudige techniek die erg veel impact heeft op de laadtijd van je website. Het werkt met JavaScript en is dus niet 100% compatibel met alle browsers. Dit is een compromis waar ik mee kan leven.
Weetje: de meeste browsers zullen je afbeeldingen gewoon laden, volgens Can I Use zo’n 97%. Oudere browsers tonen de afbeeldingen soms niet. Dit zou je op kunnen vangen met wat extra code.
WordPress plug-in voor het optimaliseren van afbeeldingen
Als je al het bovenstaande leest lijkt het heel wat werk om de afbeeldingen voor je WordPress site te optimaliseren. Gelukkig zijn er diverse plug-ins die je heel wat werk uit handen kunnen nemen. Mijn favoriet is ShortPixel Image Optimizer. Deze plug-in maakt zelf de moderne varianten voor je JPEG en andere bestanden. Ook kan deze op verschillende manieren zorgen dat de juiste code wordt gebruikt om deze te tonen.
Je betaalt een laag bedrag per maand voor onbeperkte credits. Hiermee kan je afbeeldingen voor je WordPress website automatisch optimaliseren. Ook kan je vooraf credits kopen, al is dat vaak duurder. ShortPixel kan ook alle al bestaande afbeeldingen voor je aanpassen. Zijn dit er veel? Dan is het sowieso verstandig voor onbeperkte credits te kiezen.
Advies nodig?
Pixeltree kan je adviseren over het optimaliseren van afbeeldingen voor je WordPress website. Ik kan een volledige analyse van je website maken. Daarbij kijk ik o.a. naar het optimaliseren van afbeeldingen. Maar ook naar allerlei andere zaken die je website sneller maken.
Hier lees je meer over WordPress optimalisatie door Pixeltree. Of klik hier en neem contact met me op.