Te grote afbeeldingen op een webpagina is één van de belangrijkste oorzaken voor een slechte performance van een website. Lees hier hoe je deze problemen kunt ontdekken en afbeeldingen kunt optimaliseren door het gebruik van online tools en plugins in WordPress.

Wat is het optimaliseren van afbeeldingen?

Het optimaliseren van afbeeldingen is het tonen van afbeeldingen op je website in:

• het correcte afbeeldingsformaat
• de juiste bestandsgrootte
• zonder zichtbaar kwaliteitsverlies

Waarom moet je afbeeldingen optimaliseren?

Hoe minder kilobytes, des te snellere laadtijd en dat leidt tot een betere gebruikerservaring. Heeft een gebruiker een trage internetverbinding en is de pagina te groot, dan is de kans groot dat de gebruiker het laden van de pagina afbreekt. Je krijgt dus een slechte gebruikerservaring. Google neemt deze gebruikerservaring mee in de beoordeling van websites.

Social Media platformen hebben tevens limieten ingesteld voor het tonen van preview-afbeeldingen op pagina’s. Twitter heeft als maximum 1024 x 512 pixels ,  Facebook 1200 x 628 pixels. Zit je boven deze afbeeldingsgrootte, dan wordt bij het delen van jouw blogartikel de preview afbeelding niet getoond. Voor het testen van de afbeeldingen op social media kun je gebruik maken van bijv. de Facebook Open Graph Object Debugger. Meer over deze tool kun je vinden in het artikel over Social Meta-tags.

Hoe test ik of mijn plaatjes te groot zijn?

De vuistregel voor een pagina met goede laadtijd paginagrootte is:
– een laadtijd van 1 seconde of minder.
– een paginagrootte van 1 mb. of minder.

Wil je weten hoeveel je pagina inlaadt bij gebruikers, probeer eens de tool “Pingdom Website Speed Test”. Deze tool laadt jouw gekozen webpagina vanuit een locatie naar keuze (bijv. Amsterdam)  en geeft aan hoeveel tijd dit kost en hoeveel data deze tool heeft gedownloadt. Is dit dus hoger dan 1 mb. bekijk dan in de “waterfall” van de tool naar de bestandsgrootte van de verschillende onderdelen van de pagina. Kans is groot dat jouw afbeeldingen de bestanden zijn met de meeste kilobytes. Door deze bestanden te optimaliseren kun je het aantal kilobytes verlagen en de prestaties van je website verhogen.

Stappenplan voor het optimaliseren van afbeeldingen

Het optimaliseren van afbeeldingen bestaat kortweg uit door jezelf 4 vragen te stellen:

1. Heb ik wel een afbeelding nodig ?
2. Gebruik ik wel het juiste afbeeldingstype ?
3. Is mijn grootte van mijn afbeelding niet te groot ?
4. Is de kwaliteit van mijn afbeelding niet optimaal ?

Stap 1: Heb ik wel een afbeelding nodig?

Je moet je eerst afvragen of je wel een afbeelding nodig hebt. Bestaat er geen alternatief? Is de afbeelding niet te vervangen door een combinatie van html, css en javascript? Of is er voor jouw afbeelding geen font, zoals bijv. het font Font Awesome, beschikbaar waarmee je hetzelfde kan doen? Zo ja, dan bespaar je waarschijnlijk al veel kb’s in jouw pagina.

Stap 2: Gebruik ik wel het juiste afbeeldingstype ?

Er bestaan 2 soorten type afbeeldingsformaten: een vector- en een rasterformaat.

Het bestandsformaat van een vector bestand is in het algemeen veel kleiner dan van een rasterafbeelding en kan op elke resolutie scherp worden afgebeeld. Een bekend afbeeldingstype van het vectorformaat is SVG, maar het bovengenoemde Font Awesome is ook een voorbeeld van iconen in een vectorformaat. Vectorformaten zijn zeer geschikt voor simpele geometrische vormen zoals logo’s, en icoontjes. Wordt een afbeelding te complex met veel verschillende vormen en kleuren, zoals een foto, dan is een rasterafbeelding een betere keuze. De bekendste afbeeldingstypes met een rasterformaat zijn GIF, PNG en JPG die door alle grote browsers worden ondersteund.

Elk afbeeldingstype van het rasterformaat heeft zijn voor- en nadelen. GIF bestanden ondersteunen, in tegenstelling tot de andere rasterformaten, animatie. De bestandsgrootte van een GIF is echter meestal erg hoog. PNG bestanden ondersteunen ook transparantie en de kwaliteit van zo’n afbeeldingen is erg hoog, maar de bestandsgrootte is hoger dan een JPG bestand. JPG bestanden met een mindere kwaliteit kunnen vrij klein worden, maar worden op hoge resolutie erg “blokkerig”. Een keuze van het juiste afbeeldingstype op basis van zijn voordelen leidt tot een kleinere paginagrootte. Schematisch kun je dit als volgt samenvatten.

Stap 3: Is mijn grootte van mijn afbeelding niet te groot?

Heb je eenmaal voor het juiste type afbeelding gekozen, dan moet je er ook voor zorgen dat de afmetingen van een afbeelding kloppen. Een grote afbeelding van bijvoorbeeld 500 x 500 pixels kan een browser prima  worden getoond als een afbeelding van 150 x 150 pixels. Echter een gebruiker moet bij zo’n afbeelding veel meer kilobytes downloaden (en dus een tragere website) dan wanneer dezelfde afbeelding was opgeslagen als 150 x 150 pixels. Het gebruik van een te grote afbeelding wordt ook wel schaling genoemd.

WordPress probeert schaling tegen te gaan door bij het uploaden in de medialibrary van een afbeelding meteen verschillende formaten (thumb, medium en large) aan te maken. op de pagina kun je dan een dezelfde afbeelding in een andere afmeting gebruiken zodat het aantal kilobytes van je webpagina wordt verminderd. Onder instellingen > media kun je de afmetingen van de verschillende formaten aanpassen. 

De beste methode is echter om voordat je de afbeelding uploadt de afmetingen meteen goed te zetten. Dit kan bijvoorbeeld door een tool als imageresizer te gebruiken. Daarnaast heeft WordPress in de medialibrary ook de mogelijkheid ingebouwd om de afmetingen van een afbeelding aan te passen.

Stap 4: Is de kwaliteit van mijn afbeelding niet optimaal ?

De laatste stap om afbeeldingen te optimaliseren is om de kwaliteit van de afbeelding aan te pakken.  Door een afbeelding in een iets mindere kwaliteit op te slaan , bijv. op  90%, dan zal de bestandsgrootte van een afbeelding een stuk kleiner worden zonder dat een gebruiker hier iets van merkt.

Om de kwaliteit zo optimaal te maken kun je gebruik maken van zogenaamde “image optimizers“. Image optimizers zijn tools die je via een webpagina of als plugin kunt gebruiken. Sommige optimizers zijn gratis, andere hebben een betaalde versie met iets meer mogelijkheden. Voorbeelden van online image optimizers zijn kraken.io, en optimizilla. Voor handige plugins zie hieronder.

Handige plugins voor optimalisatie van afbeeldingen

Ok, zo nu weet je alle stappen om afbeeldingen te optimaliseren. Echter je mede-bloggers waarschijnlijk nog niet en zij zullen de afbeeldingen uploaden zoals ze altijd hebben gedaan. De kans is groot dat jouw website nog steeds te grote afbeeldingen bevat. Gelukkig heeft WordPress plugins waardoor de veel optimalisatie stappen kunnen worden geautomatiseerd. In het artikel “Handige plugins voor afbeeldingen in WordPress” heb ik aantal plugins beschreven die je hiervoor kunt gebruiken.

Tot slot

In het artikel “Het proces van optimaliseren van afbeeldingen stapsgewijs” staan alle stappen nog eens uitgelegd. Daarbij moet wel gezegd worden dat ik het artikel destijds heb geschreven in WordPress 4.3. Toen was de pagina 4.9 mb. groot. WordPress 4.4 toont nu standaard “Responsive Images” op je pagina, waardoor de pagina nu nog maar 1.9 mb. groot is. Een hele verbetering zonder je er iets voor hoeft te doen.