Afbeeldingen nemen qua bestandsgrootte meestal de meeste ruimte in op een pagina. De laadsnelheid wordt er dus sterk door beïnvloed. Ze kunnen je site dus flink vertragen als je ze niet goed optimaliseert.
Gelukkig kun je met een paar slimme aanpassingen de bestandsgrootte van je afbeeldingen flink verkleinen, zonder dat je meteen kwaliteit verliest. Dit zorgt ervoor dat je website sneller laadt, wat niet alleen fijner is voor je bezoekers, maar ook beter is voor je vindbaarheid in Google.
In dit artikel lees je hoe je afbeeldingen optimaliseert, waar je op moet letten en welke tools je daarbij kunnen helpen.
Kies het juiste bestandsformaat
Voordat je een afbeelding gaat aanpassen, is het slim om eerst het juiste bestandsformaat te kiezen. Er zijn verschillende soorten afbeeldingsbestanden, en elk heeft zijn eigen voor- en nadelen:
PNG – Dit formaat geeft afbeeldingen van hoge kwaliteit, maar de bestanden zijn vaak groter. PNG is oorspronkelijk gemaakt om geen kwaliteit te verliezen, al kun je het ook op een kleinere manier opslaan.
JPEG (of JPG) – Bij dit formaat kun je zelf kiezen hoeveel kwaliteit je wilt behouden. Hoe lager de kwaliteit, hoe kleiner het bestand. Handig als je een goede balans zoekt tussen looks en laadsnelheid.
GIF – Dit formaat gebruikt maar 256 kleuren, dus minder geschikt voor foto’s. Het is wél perfect voor eenvoudige animaties, zoals bewegende plaatjes. GIF verliest geen kwaliteit als je het opslaat.
- WebP is een nieuwer afbeeldingsformaat dat speciaal is ontwikkeld voor het web. Het is superhandig omdat het kleinere bestanden maakt dan JPEG en PNG, terwijl de kwaliteit toch goed blijft. WebP ondersteunt ook transparante achtergronden (zoals PNG) én animaties (zoals GIF).
- SVG staat voor Scalable Vector Graphics. Het is een speciaal afbeeldingsformaat dat niet uit pixels bestaat, maar uit lijnen en vormen. Dit betekent dat een SVG-afbeelding altijd haarscherp blijft, hoe groot of klein je ‘m ook maakt. SVG is niet geschikt voor foto’s of afbeeldingen met veel details en kleuren, maar afbeeldingen zoals logo’s lenen zich vaak uitstekend voor het SVG-bestandstype.
Om je website te optimaliseren kun je afbeeldingen (zoals JPEG of PNG) om te zetten naar WebP. Dit formaat maakt de bestanden een stuk kleiner zonder dat je veel kwaliteit verliest. En goed nieuws: bijna alle moderne browsers ondersteunen WebP tegenwoordig.
Voor logo’s, iconen en eenvoudige illustraties kun je beter kiezen voor SVG. Dit type afbeelding blijft altijd scherp, zelfs op grote of retina-schermen, én is vaak nog kleiner dan andere formaten.
Je kunt je afbeeldingen heel makkelijk online omzetten. Probeer bijvoorbeeld:
cloudconvert.com – voor het omzetten naar WebP of andere formaten
Comprimeren van afbeeldingen
Comprimeren van afbeeldingen betekent het verkleinen van de bestandsgrootte van een afbeelding zonder (of met zo min mogelijk) kwaliteitsverlies. Het doel hiervan is dat de afbeelding minder ruimte inneemt op je website of apparaat, waardoor pagina’s sneller laden en je minder bandbreedte gebruikt.
Er zijn twee hoofdtypen compressie:
Lossless compressie (verliesloos):
Hierbij wordt de afbeelding verkleind zonder dat er kwaliteit verloren gaat. Alle details blijven intact, maar de bestandsgrootte wordt meestal minder sterk verkleind dan bij lossly compressie. Dit is handig als je de afbeelding later nog wilt bewerken.Lossy compressie (met kwaliteitsverlies):
Hierbij worden sommige details weggegooid om de bestandsgrootte veel kleiner te maken. Dit kan soms een klein kwaliteitsverlies geven, zoals minder scherpe details of lichte kleurverschillen, maar vaak zie je dit nauwelijks of niet als het goed gedaan is.
Voor het comprimeren van afbeeldingen kun je de website tinypng.com gebruiken. Je upload je afbeeldingen en krijgt daar geoptimaliseerde afbeeldingen voor terug.
Pas de afmeting van de afbeeldingen aan
Door afbeeldingen precies in de juiste afmetingen te gebruiken kun je ook veel winst behalen. Met het juiste formaat hou je de bestandsgrootte kleiner zonder concessies te doen aan de beeldkwaliteit. In dit blog lees je hier meer over.
Conclusie
Door je afbeeldingen goed te optimaliseren, bijvoorbeeld door ze te converteren naar het compacte WebP-formaat en voor logo’s en iconen SVG te gebruiken, maak je je website sneller. Met handige tools zoals TinyPNG en CloudConvert kun je gratis je afbeeldingen comprimeren en converteren.
Het is slim om jezelf aan te leren om tijdens de bouw van je website, of tijdens het plaatsen van bijvoorbeeld een blog, afbeeldingen direct te optimaliseren. Zo zorg je ervoor dat je website snel blijft en dat je na afloop niet een hoop werk moet doen om de site alsnog te optimaliseren.