How to: website afbeeldingen comprimeren
Als websitebezoeker wil je maar één ding en dat is zo snel mogelijk een doel bereiken. Elke 100ste milliseconde in laadtijd telt dus. Duurt het laden van de afbeelding te lang, dan resulteert dit in een slechtere gebruikerservaring en dus minder conversie. Gemiddeld zijn afbeeldingen meer dan twee derde van de totale omvang die ingeladen moet worden. Wij leggen uit hoe je het website afbeeldingen comprimeren, waardoor inladen van je website sneller gaat.
Website afbeeldingen comprimeren verbetert de snelheid
Veel websites bestaan uit één klein stukje code en heel veel afbeeldingen. Al deze resources moeten door de bezoeker ingeladen worden. Hoe groter het aantal en de omvang, hoe langer de laadtijd. Met tools als GTmetrix en Webpagetest test je de snelheid van jouw website. Een goede websitebouwer optimaliseert de standaard template van je website. Dit moet ook gebeuren voor alle afbeeldingen die je in de content invoert. Iedere KB in laadtijd telt!
De grootte van een afbeelding wordt vooral bepaald door: het bestandsformaat, compressieniveau, afbeeldingsafmetingen en extra informatie. Om een afbeelding zo goed en compact mogelijk op te slaan, besteed je aandacht aan alle vier de elementen.
Bestandsformaat
Er zijn heel veel verschillende bestandsformaten om je afbeelding in op te slaan. De drie meest gebruikte zijn: JPG, PNG en GIF. Ieder heeft zijn eigen toepassing.
Als de afbeelding niet beweegt en geen transparante delen heeft is het verstandig om hem op te slaan als JPG. Hierdoor krijg je de kleinste afbeelding zonder kwaliteit te verliezen.
Compressie niveau
Zowel JPG, PNG als GIF kennen een vorm van compressie. Dit betekent dat door middel van een algoritme de opgeslagen gegevens verkleind worden.
Wikipedia:
“Hoe hoger de compressie des te kleiner het bestand, en des te geringer de beeldkwaliteit. Het kwaliteitsverlies van JPG valt niet veel op bij foto’s, maar wel bij bijvoorbeeld grafieken, lijnen of letters.”
Het is dus mogelijk bestandsgroottes aanzienlijk te verkleinen, zonder kwaliteit van de afbeelding te verliezen. Zelfs het menselijk oog valt het niet op! Gebruik hiervoor online tools als: Tinypng voor PNG en Jpegminivoor JPG.
Afbeeldingen met extra informatie
Veel afbeeldingen hebben op de achtergrond in de code extra informatie, zogenaamde metadata. Hierin staat bijvoorbeeld wie de afbeelding heeft gemaakt, wanneer en de locatie. Door gebruik te maken van deze tool: Smushit verwijder je deze extra informatie. De afbeelding zelf blijft onaangepast.
Overigens is Smush.it ook beschikbaar als wordpress plugin. Deze plugin verkleint afbeeldingen automatisch op de achtergrond.
Afbeeldingsafmetingen
De meeste originele afbeeldingen hebben niet de juiste afmetingen voor een website. Vaak zijn ze te groot of hebben ze veel witruimte eromheen. Hoe groter je afbeelding, hoe meer ruimte hij in beslag neemt. Zorg er dus altijd voor dat je afbeelding niet onnodig groot is. Met tools als Picmonkey en Picresize verklein je eenvoudig jouw afbeelding met behoud van verhoudingen. Daarnaast is het mogelijk stukjes van een afbeelding te snijden om het formaat te wijzigen.