Afbeeldingen verkleinen voor website snelheid in 4 stappen

Als je mijn andere blogbericht hebt gelezen over waarom website snelheid belangrijk is voor SEO, dan ben je vast van plan om je afbeeldingen te verkleinen voor een snellere website. Het verkleinen van je afbeeldingen zal grote invloed hebben op je website laadtijd. Dit is dus wat ik altijd aanraad aan mijn klanten en desgewenst ook voor ze kan uitvoeren. Wil je het zelf proberen? Volg dan onderstaand stappenplan om de afbeeldingen van je website te verkleinen.

Het optimaliseren van je afbeeldingen betekent vaak 4 dingen:

1. Een afbeelding omzetten in het juiste bestandstype.
2. Alle afbeeldingen verkleinen naar de juiste breedte en hoogte.
3. Afbeeldingen comprimeren haalt alle onnodige zaken eruit.
4. Alle afbeeldingen in een ‘next-gen-formaat’ zetten zoals JPEG 2000, JPEG XR, of WebP.

1. Een afbeelding omzetten in het juiste bestandstype

Het bestandstype kan een hoge impact hebben op de website laadtijd. Hieronder leg ik uit waarom dit belangrijk is voor je website. De volgende bestandstypen worden het meest gebruikt:

1. JPEG
   JPEG wordt het meeste gebruikt op het web. JPEG-bestanden kunnen gecomprimeerd worden, zodat een kleinere bestandsgrootte kan worden gerealiseerd. Maar wel tegen een beetje kwaliteitsverlies. Je kunt bij JPEG zelf bepalen hoeveel compressie en kwaliteitsverlies je wilt. Daarnaast kun je bij JPEG-bestanden ook de kwaliteit instellen. Soms zie je met het blote oog geen verschil tussen 80% kwaliteit en 100% kwaliteit in JPEG, maar kan het toch veel schelen in bestandsgrootte.
2. PNG
   PNG is ook een bekend bestandsformaat dat gebruikt wordt op websites. PNG-bestanden bevatten ook compressie zonder kwaliteitsverlies en kunnen transparant zijn. Echter zijn de PNG’s altijd groter dan JPEG bestanden.
3. BMP
   BMP wordt gebruikt voor scans en prints. Een BMP-bestand heeft geen compressie en informatieverlies, daarom zijn de afbeeldingen in BMP altijd hoog in bestandsgrootte.

Vuistregel is: gebruik PNG voor afbeeldingen met een transparante achtergrond (zoals een logo) en gebruik JPEG voor de rest. Als je in Photoshop de functionaliteit ‘Save for Web…’ gebruikt, kun je ook de kwaliteit van JPEG instellen. Speel hiermee en je zult zien dat je het verschil tussen 80% en 100% kwaliteit niet kunt zien, maar wel een verbetering oplevert in de bestandsgrootte.

2. Alle afbeeldingen verkleinen naar de juiste breedte en hoogte

De meeste afbeeldingen komen direct van een fotocamera en bevatten veel megapixels. Voor je website is deze grote hoeveelheid pixels niet van belang en neemt het onnodig veel ruimte in beslag. Een foto direct van een camera is dan ook ongeveer 10MB met een verhouding van 5472 pixels in de breedte en 3648 pixels in de hoogte. Wanneer ik dit verklein naar een verhouding van 1920 pixels breed en 1280 pixels hoog, dan wordt de afbeelding 1MB. 

Een verschil van 10 keer kleiner heeft al veel impact op de website laadtijd, maar we kunnen het nog veel beter doen. 1920 pixels breed is namelijk de maximale breedte van een webpagina, maar dit wordt alleen gebruikt bij afbeeldingen in banners, zoals mijn eerste afbeelding bovenaan deze pagina. De daadwerkelijke breedte en hoogte van een afbeelding op een website kan anders zijn! Als ik nog niet weet wat de juiste afmetingen zijn, dan zijn mijn stappen voor het toevoegen van een afbeelding als volgt:

Stappenplan afbeeldingen verkleinen

1. De juiste afbeelding zoeken op het internet of een foto nemen.
2. Deze afbeelding tijdelijk op mijn website zetten op de plek waar die komt te staan
3. De correcte afmetingen vinden met behulp van een Chrome extensie genaamd ‘Measure-it’. Zodra ik deze extensie gebruik en mijn muis over de tijdelijke afbeelding sleep, zie ik direct de gewenste afmetingen.
4. De afbeelding aanpassen naar de bovenstaande afmetingen in bijvoorbeeld Photoshop en de afbeelding door een programma, zoals hieronder beschreven, laten comprimeren. WordPress biedt ook de functionaliteit om de afmetingen van de afbeelding aan te passen in de mediabibliotheek.
5. De tijdelijke afbeelding vervangen met de nieuwe afbeelding.

De afmetingen schrijf ik daarna meestal op een notitie voor de volgende keer dat ik een afbeelding gebruik op een soortgelijke locatie. Zo kan ik direct de afbeelding aanpassen naar de juiste afmetingen.

3. Afbeeldingen comprimeren haalt alle onnodige zaken eruit

Een afbeelding bestaat uit een stukje code dat de computer vertaalt naar een afbeelding. De afbeelding kan echter meer code bevatten dan daadwerkelijk nodig is. Door een afbeelding te comprimeren, verklein je de afbeelding en zorg je ervoor dat deze sneller geladen wordt op je website. 

Er bestaan dan ook twee soorten compressies:

• zonder kwaliteitsverlies – lossless
• met kwaliteitsverlies – lossy

Met kwaliteitsverlies kan ervoor zorgen dat de afbeelding er niet meer mooi uitziet. Probeer toch eerst de compressie met kwaliteitsverlies, want dit kan aanzienlijk veel in bestandsgrootte schelen. Ziet de afbeelding er niet meer mooi uit? Dan verander ik het altijd naar een lossless compressie.

Als ik maar één afbeelding wil comprimeren, dan gebruik ik altijd een online ‘image optimizer’. Maar wanneer een website al klaar is met meer dan honderden afbeeldingen, dan gebruik ik een programma om de afbeeldingen te optimaliseren.

Online afbeeldingen optimaliseren

Als ik een enkele of een paar afbeeldingen moet comprimeren en optimaliseren, dan gebruik ik altijd een online tool hiervoor. Ik vind hiervoor de online tool van Kraken.io heel erg fijn. Hier kan ik meerdere afbeeldingen direct naartoe slepen en dan gaat de tool meteen aan slag. Je hebt ook de keuze voor een Lossy of Lossless compressie, wat ook erg fijn is. Nadat de tool klaar is, kan ik de afbeeldingen direct downloaden van Kraken.io of een zip-bestand downloaden die alle geoptimaliseerde afbeeldingen bevat.

Let op: Kraken.io heeft een limiet van 1MB per afbeelding. Groter dan 1MB wil je sowieso niet op je website hebben. Verklein dus eerst de afbeeldingen naar de juiste breedte en hoogte, voordat je je afbeelding naar Kraken.io uploadt.

Meerdere afbeeldingen optimaliseren met een programma

Als je al een website helemaal klaar hebt, of zelfs al online hebt staan, en je wilt niet iedere afbeelding één voor één optimaliseren, dan kun je hiervoor het beste een programma gebruiken. Ik gebruik meestal Caesium.

Caesium is een simpele maar effectieve tool voor het optimaliseren van meerdere afbeeldingen. Het biedt verschillende opties die ik gebruik om mijn afbeeldingen te finetunen. Wanneer ik voor een klant alle afbeeldingen van zijn WordPress website moet optimaliseren, dan download ik de volledige Uploads-map via FTP naar mijn eigen schijf. Hier maak ik eerst een backup van en sleep het vervolgens de map naar Caesium. 

Caesium instellingen

Aan de onderkant van het programma stel ik de volgende instellingen in:

1. Compression Options
   1. Quality stel ik in op 80%. Dit vind ik meestal goed genoeg.
   2. ‘Same for all’ aanvinken, zodat alle afbeeldingen dezelfde kwaliteit krijgen
   3. Format instellen op ‘Input’ zorgt ervoor het bestandsformaat behouden wordt.

Klik daarna op knop ‘Set Quality’

2. Resize
   1. Vink ‘Resize’ aan.
   2. Selecteer ‘Absolute’ onder Resize.
   3. Stel de Width in op 1920px en de Height op 1280px. Dit zorgt ervoor dat de afbeeldingen een maximale breedte van 1920 pixels en een hoogte van 1280 pixels krijgt.
   4. ‘Same for all’ aanvinken, zodat alle afbeeldingen dezelfde maximale grootte krijgen.
   5. Vink ‘Keep Aspect Ratio’ aan, zodat de afbeeldingen de originele verhouding behoudt.
   6. Vink ‘Do Not Enlarge Images’ aan, want we willen niet dat de afbeeldingen worden vergroot naar onze ingestelde hoogte en breedte.

Klik daarna op de knop ‘Apply’

3. Onder Output Folder stellen we het volgende in:
   1. ‘Keep Structure’ aanvinken, zodat de mappenstructuur wordt behouden.
   2. Vink ook ‘Same folder as input’ aan, want ik wil dat de afbeeldingen worden overschreven. We hebben namelijk al een backup gemaakt.
   3. Zorg dat het tekstveld ‘Suffix’ leeg is.

Klik daarna op de Compress! knop. Afhankelijk van de hoeveelheid afbeeldingen kan het eventjes duren voordat het proces voltooid is. Upload daarna de afbeeldingen terug via FTP door de volledige Uploads-map te slepen naar de juiste locatie in het FTP-programma.

Test hoe afbeeldingen verkleinen je websitescore heeft verbeterd

Test tenslotte de website even goed door in Google PageSpeed en in de andere website snelheid test tools zoals Pingdom, GTMetrix en WebPageTest. Je zult zien dat de grootte van de volledige pagina aanzienlijk is verkleind en de score van je website is verbeterd!

Optimaliseer jij de afbeeldingen van je website?

Ik ben benieuwd naar jouw optimalisatieproces. Gebruik je bijvoorbeeld hiervoor een handige plugin die ik nog niet ken? Of wat vind je van mijn tips? Laat het mij in de reacties hieronder weten!