Waarom je altijd de afbeeldingen op je website moet optimaliseren voor een betere pagespeed
Alhoewel afbeeldingen belangrijk zijn om om je bezoeker te boeien en binden, zijn afbeeldingen ook de belangrijkste oorzaak van een te lange laadtijd van je website. De nummer 1 oorzaak van langzame websites is namelijk het gebruik van te grote en zware afbeeldingen. Als je de Google Pagespeed van je website wil verbeteren, start dan altijd met het optimaliseren van je afbeeldingen.
Een snelle website is om drie redenen enorm belangrijk:
- In de mobiele wereld leidt een lange laadtijd van je website al snel tot een hogere bounce rate (bezoekers haken al af voordat je website helemaal geladen is).
- Een snellere website geeft een betere gebruikservaring en kan je conversiepercentage zomaar met 25-30% verbeteren.
- Pagespeed is sinds januari 2018 onderdeel van het Google Algoritme en bepaalt voor een belangrijk deel de positie van je website in de (mobiele) zoekresultaten.
Een snelle website verbetert dus je bezoekersaantallen, conversie en positie in Google!
Er zijn meer oorzaken voor een slechte Google Pagespeed. Maar het gebruik van te grote of zware afbeeldingen voor je website is 9 van de 10 keer de belangrijkste oorzaak. En bovendien de meeste eenvoudige oorzaak die je snel kunt wegnemen. Wil jij de pagespeed van je website verbeteren? Begin dan als eerste met het optimaliseren van je afbeeldingen voor gebruik op je website en voor seo.
Hoe kan je de Pagespeed testen in Google?
Om te zien of pagespeed voor je website een probleem is, kan je de website testen met Google Pagespeed Insights, met de rapportage “Paginatiming voor Sitesnelheid” in Google Analytics of met een onafhankelijke tools als GTMetrix of Pingdom tools.
Snelheid van je website testen met Google Pagespeed Insights
Deze handige tool van Google stelt je in staat om de snelheid van je website te testen. Het resultaat is de Pagespeed Score van je website. Er zijn 3 pagespeed scores mogelijk:
- 0 to 49 (langzaam): Rood
- 50 to 89 (gemiddeld): Oranje
- 90 to 100 (snel): Groen
Zijn de afbeeldingen op je website niet geoptimaliseerd, dan beland je sowieso in de rode categorie. De afbeelding hierna toont het resultaat van een website waarbij het optimaliseren van afbeeldingen een snelheidswinst kan opleveren van maar liefst 49 seconden! Het zal je niet verbazen dat deze website een dieprode pagespeedscore oplevert van 11. Werk aan de winkel dus voor deze webmaster.
Test de snelheid van je website met Google Analytics
De snelheid van je website kan je ook eenvoudig testen met Google Analytics. Raadpleeg daarvoor de rapportage “Paginatiming voor Sitesnelheid”. Je vindt het rapport als volgt:
- Login op Analytics
- Klik op de optie [Gedrag]
- Kies Sitesnelheid -> Paginatiming
- Sorteer op gemiddelde laadtijd (sec)
Regelmatig worden wij gevraagd websites te beoordelen onder andere op snelheid. De afbeelding hierna is een voorbeeld van de analytics rapportage die we daarvoor gebruiken. Het laat zien dat de gemiddelde snelheid van de website 6,2 seconden is en de langzaamste pagina er maar liefst 21 seconden over doet om te laden. Ook bij deze website is er veel aan de snelheid te verbeteren.
Snelheid van je website testen met GTMetrix of Pingdom Tools
GTMetrix of Pingdom Tools zijn beide uitstekende tools om naast Google ook een ‘onafhankelijke’ snelheidstest uit te voeren voor je website. Let er daarbij wel op dat je de juiste testlocatie kiest (in Europa) omdat dit anders je testresultaat vertekent.
Pingdom Tools geeft je website een performance score die uiteenloopt van A (goed) tot F (slecht). In de analyse zie je vervolgens welke files van je website er vooral lang over doen om te laden. In het voorbeeld hierna is een website getest waarbij maar liefst 29 Mb aan afbeeldingen moet worden gedownload. Met dezelfde hoeveelheid Mb kan je een serie op Netflix kijken. Enorm veel werk aan de winkel dus voor deze webmaster. Het belangrijkste werk? Afbeeldingen optimaliseren dus!
Hoe snel moet een website laden?
De eisen aan de snelheid zijn de afgelopen jaren flink toegenomen. Wat we nog maar enkele jaren snel vonden, wordt nu als tergend langzaam ervaren. Momenteel worden de volgende normen gehanteerd:
- laadtijd < 1 seconde: de gebruiker merkt nauwelijks dat de website wordt geladen;
- laadtijd 1-3 seconden: de website wordt door gebruikers als snel ervaren;
- laadtijd 4-10 seconden: het vertrouwen dat de website goed laadt, neemt af;
- laadtijd >10 seconden: er is bijna geen vertrouwen meer dat de website goed zal laden.
Uiteraard is deze ervaring afhankelijk van het gebruikte apparaat (mobiel of desktop), het aanbod (is er veel aanbod, dan zal men snel voor een andere website kiezen) en het soort gebruik (zakelijk of particulier). Wel is duidelijk dat je in alle gevallen moet streven naar een website laadtijd van minder dan 3 seconden. Is de laadtijd van je website langer dan 3 seconden, besteed dan tijd en aandacht op de pagespeed te verbeteren!
Wat is de juiste afmeting van een afbeelding op je website?
De afmeting van een afbeelding wordt meestal uitgedrukt in pixels. De juiste afmeting hangt af van de toepassing en met welke beeldschermen je rekening wilt houden. Als je een afbeelding over de hele breedte van je website wilt tonen, dan is de optimale breedte van je afbeelding 1366 pixels. Met dit aantal pixels ziet de afbeelding er op de meeste gebruikte beeldschermen netjes uit. De hoogte van de afbeelding is minder belangrijk en bepaalt vooral hoeveel je moet scrollen voordat je de eerste tekst ziet.
Als je een afbeelding toevoegt aan WordPress, dan worden er automatisch verschillende afmetingen van deze afbeelding aangemaakt. Standaard zijn dit de volgende afmetingen:
- De originele grootte van de afbeelding
- Grote afmeting: 1024 x 1024 pixels
- Gemiddelde afmeting: 300 x 300 pixels
- Thumbnail: 150 x 150 pixels
Het is dus niet nodig de afbeelding in meerdere formaten te uploaden, dat regelt WordPress dus al voor je.
Wat is de juiste bestandsgrootte van een afbeelding?
De bestandsgrootte van je afbeelding wordt uitgedrukt in het aantal Kb of Mb en bepaalt de resolutie of scherpte van je foto. Deze kwaliteit wordt uitgedrukt in dpi (dots per inch). Voor weergave van een afbeelding op een beeldscherm is veel minder dpi nodig dan bijvoorbeeld voor drukwerk. Daarom kan je de afbeelding flink verkleinen voor je website, zonder dat deze onscherp wordt.
De meeste camera’s en smartphones maken tegenwoordig foto’s in zeer hoge resoluties. 165.000 dpi is al heel gewoon. En dat terwijl gemiddeld maar 72 dpi nodig zijn om een foto scherp weer te geven op een website. Een foto met een bestandsgrootte van 10 Mb kan je zo eenvoudig verkleinen tot 50 Kb zonder merkbaar kwaliteitsverlies. En je website wordt er natuurlijk wel veel sneller door.
Afhankelijk van het doel, kan je de volgende richtlijnen aanhouden om je afbeeldingen te optimaliseren:
- Volledige breedte website: 120-200 Kb
- Blogbericht: 60-100 Kb
- Afbeelding naast tekst: 50 Kb
- Thumbnail: 10-20 Kb
Welk bestandstype afbeeldingen kan je het beste gebruiken voor je website?
Er zijn drie veelgebruikte bestandstypes voor afbeeldingen: GIF, PNG, JPG en WebP.
GIF (Graphics Interchange Format) wordt wel gebruikt voor animaties en zijn populair op social media. Op je website kan je dit bestandstype beter niet gebruiken vanwege het grote kwaliteitsverlies dat optreedt als je de bestanden verkleint.
PNG (Portable Network Graphic) wordt veel gebruikt voor logo’s en afbeeldingen waarbij er kleurverloop nodig is of transparantie. Vanwege de grootte van dit type bestand gebruik je dit bij voorkeur niet op je website.
JPG (Joint Photographic Experts Group) is vooralsnog het aanbevolen bestandstype voor afbeeldingen op je website. Maar daar komt verandering in met WebP.
WebP (uitgesproken als Weppie) is een nieuw bestandstype ontwikkeld door Google en maakt afbeeldingen gemiddeld 39% kleiner. De voornaamste reden om WebP nog niet te gebruiken is dat het bestandstype nog niet wordt ondersteund door alle browsers.
Hoe kan je de afbeeldingen optimaliseren voor je website?
Om de afbeeldingen op je website te optimaliseren en de pagespeed te verbeteren, ga je als volgt te werk:
Stap 1: Identificeer langzame pagina’s met Google Analytics en Pagespeed Insights
Stap 2: Zorg voor het juiste formaat afbeelding
Stap 3: Gebruik het juiste bestandstype
Stap 4: Comprimeer je afbeeldingsbestand
Stap 5: Voorzie je afbeeldingen van de juiste titel en alttekst
Stap 1: Identificeer langzame pagina’s
Login op Google analytics en bekijk het rapport “Paginatiming voor Sitesnelheid”. Sorteer op laadtijd. Begin met het optimaliseren van de langzaamste pagina’s.
Stap 2: Zorg voor het juiste formaat afbeelding
Zorg ervoor dat je de afbeeldingen in het juiste formaat in de mediabibliotheek uploadt. Ga dus geen afbeelding van 3000 pixels breed uploaden terwijl je maar een afbeelding van 650 pixels breed nodig hebt. Het formaat van je afbeelding kan je met de meest gebruikte fotobewerkingsprogramma’s eenvoudig aanpassen. Welk formaat je precies nodig hebt is afhankelijk van je websitetemplate. Met de onderstaande afbeeldingsformaten voor je website zit je echter redelijk safe.
In alle gratis en betaalde fotobewerkingsprogramma’s kan je de foto’s qua formaat eenvoudig aanpassen. Enkele voorbeelden zijn:
- Photoshop
- Canva
- GIMP
- Paint (Windows)
- Voorvertoning (Mac)
- Pixlr
Ook als je rechtenvrije foto’s wilt downloaden krijg je meestal de keuze uit verschillende formaten. Kies dan direct de juiste, dat scheelt dan weer verkleinen.
Stap 3: Gebruik het juiste bestandstype
Bij de meeste fotoprogramma’s kan je kiezen het bestand op te slaan als PNG, GIF of JPG. Kies indien mogelijk (je hebt geen hoge resolutie, animatie of transparantie nodig) altijd voor JPG.
Stap 4: Comprimeer je afbeeldingsbestand(en)
Als je fotobewerkingsprogramma je die keuze biedt, sla je bestand dan altijd op in de laagst mogelijke aantal Kb’s. Photoshop biedt je bijvoorbeeld de optie ‘opslaan-voor-web’ aan. Als je fotobewerkingsprogramma soortgelijke opties om je afbeeldingen te optimaliseren biedt, gebruik deze dan!
Vervolgens kan je gebruik maken van verschillende compressietools zoals WP Smush, https://compressor.io/compress, ShortPixel Image Optimizer of https://tinypng.com om je afbeeldingen te optimaliseren. Wij geven de voorkeur aan de laatste omdat deze je bestand bijna 2 keer kleiner maakt zonder zichtbaar kwaliteitsverlies. Het werkt heel eenvoudig:
- open de website tinypng.com;
- sleep de afbeeldingen die je wilt verkleinen in de website;
- wacht even tot de afbeelding is gecomprimeerd en klik op download.
Je kan de WordPress plugin van TinyPNG ook installeren op je website. Het comprimeren van de eerste 500 afbeeldingen is gratis. Daarboven betaal je slechts $0.009 per afbeelding. Aangezien de meeste websites minder dan 500 afbeeldingen bevatten, is TinyPNG meestal gratis te gebruiken.
Stap 5: Gebruik zoektermen in je titel en alttekst
Google kan wel afbeeldingen herkennen, maar weet niet waar de afbeelding over gaat. Google gebruikt daarvoor de afbeeldingstitel, alttekst en de tekst rondom de afbeelding. Gebruik daarom een zo goed mogelijk beschrijvende titel en alttekst die ook echt de lading dekt en aansluit bij de omringende tekst. Zomaar je afbeeldingstitel volproppen met zoektermen gaat je niet helpen. Beter gebruik je een unieke en zelf gemaakte foto met een goede beschrijvende titel en alttekst die aansluit op de rest van je pagina.
Pagespeed verbeteren? Vrijblijvend advies!
Wil je weten hoe jij de snelheid van je website kunt verbeteren? En of de afbeeldingen op je website goed zijn geoptimaliseerd? Laat het ons weten. Wij voeren een vrijblijvende audit uit op je website!
