De makkelijkste manier om je website sneller te maken

Wanneer je je een beetje verdiept in websites en SEO kom je deze tip al snel tegen: verbeter de laadtijd van je pagina’s. Een website die snel laad krijgt een betere pagerank, en dat helpt je website om hoger getoond te worden in de zoekresultaten.

Daarnaast worden je bezoekers ook erg blij als ze jouw website super snel kunnen zien. Sterker nog, wanneer de laadtijd van je website traag is verlaten veel mensen een website!

Al met al reden om je druk te maken over de snelheid van je website. Er zijn een heleboel technische aspecten die een website sneller of langzamer kunnen maken: je hosting heeft hier bijvoorbeeld invloed op en het scheelt wanneer je website gebruik maakt van caching. Ook in de bouw van je website kunnen er keuzes gemaakt worden die de laadtijd ten goede komen.

De laadtijd van afbeeldingen

Maar er is één heel makkelijk aspect dat jij als content beheerder kunt beïnvloeden: Afbeeldingen zijn het grootste onderdeel van je pagina!

Door te zorgen dat je afbeeldingen zo klein mogelijk zijn wordt de laadtijd van je pagina’s stukken sneller! En met kleiner bedoel ik niet dat je afbeeldingen ter grootte van een postzegel moet gebruiken. Ik bedoel dat je geen onnodig grote afbeeldingen op je website zet, en ze bovendien optimaliseert.

Afbeeldingen verkleinen

De foto die je maakt met je camera is hoogstwaarschijnlijk groter dan nodig is voor je website. Wanneer je website een afbeelding met een afmeting van 1500 x 1000 pixels gebruikt heeft het natuurlijk weinig zin om een afbeelding van 3000 pixels breed in je CMS te laden.

Nu hoor ik je denken: hoe pas ik die afmetingen dan aan? Tegenwoordig hoef je daar geen ingewikkelde programma’s voor op je computer te hebben, met online tools zoals pixlr kan je dit heel gemakkelijk doen.

Ga om te beginnen naar pixlr.com/x en volg de stappen hieronder om de afmetingen van je afbeelding aan te passen.

Klik op de blauwe knop 'Open image' aan de linkerkant van de pagina
Wanneer je een grote foto upload krijg je al direct de mogelijkheid om een verkleinde versie te laden. Aangezien we 1500 x 1000 pixels nodig hebben kies ik voor de middelste optie.
Klik nu in de toolbar aan de linkerkant op het icoon met de gekruisde pijlen. In de optiebalk kies je vervolgens voor 'Resize image'.
In de pop up kan je nu de gewenste afmetingen invoeren. Ik kies ervoor om de breedte aan te passen naar 1500 pixels, maar de hoogte nog niet precies op 1000 pixels te zetten. Dit omdat ik liever zelf een uitsnede maak dan dat ik dat door pixlr laat bepalen.
Ga nu naar de tweede tool in de lijst links: Crop. Pas hier de hoogte aan naar 1000 pixels. Het kader over de afbeelding heen kan je verschuiven zodat de uitsnede precies is zoals jij wilt. Klik op Apply in de linker kolom naast de toolbar om de uitsnede toe te passen.
Klik nu op de blauwe knop 'Save' onder je foto.
Kies voor een foto altijd voor een jpg afbeelding en laat de kwaliteit op hoog staan (waarom dit beter is leg ik later in deze blogpost uit). Download de afbeelding met de blauwe knop 'Download' rechtsonder in de pop up.

Afbeeldingen optimaliseren

Nadat je de afbeelding hebt verkleind en hebt opgeslagen kan je de bestandsgrootte ook nog verkleinen. Hiervoor gebruik ik een andere online tool: TinyPNG. Op deze website kan je afbeeldingen (zowel png als jpg bestanden) uploaden en laten optimaliseren. Er wordt onnodige data verwijderd uit het bestand en er wordt een hele slimme compressie toegepast die de kwaliteit zo min mogelijk beïnvloed.

Ga naar tinypng.com en volg de stappen hieronder om de afbeelding te optimaliseren.

Op de website van TinyPNG kan je je afbeelding uploaden en laten optimaliseren.
Sleep de afbeelding vanuit je verkenner of finder naar het vlak met de tekst 'Drop your .png or .jpg files here!'.
De afbeelding word geüpload en de compressie wordt toegepast. Wanneer de geoptimaliseerde afbeelding klaar is kan je deze downloaden met de link 'download' aan de rechterkant. Je ziet ook de nieuwe bestandsgrootte: 42.1 kB, dat is een stuk kleiner!

De optimale instellingen voor de verkleinde afbeelding

Zoals ik bij de uitleg over Pixlr aangaf adviseer ik om de afbeelding met de hoogste kwaliteit op te slaan. In combinatie met TinyPNG bereik je dan de hoogste kwaliteit met de beste bestandsgrootte.

Hieronder leg ik uit waarom de lage en medium kwaliteit niet de beste keuze zijn:

Wanneer je in Pixlr voor de laagste kwaliteit kiest krijg je welliswaar een kleiner bestandsformaat dan onze geoptimaliseerde afbeelding van hierboven (die was 42.1 kB) maar je levert ook kwaliteit in.
Links zie je de ingezoomde geoptimaliseerde afbeelding die vanuit hoge kwaliteit gemaakt is, rechts de afbeelding met lage kwaliteit. Je ziet een hoop extra blokjes in de rechter afbeelding. Dit is waar je de lagere kwaliteit aan kunt herkennen. Er zijn minder details over.
Wanneer je een afbeelding van medium kwaliteit kiest en je optimaliseert deze met TinyPNG dan zal je zien dat de bestandsgrootte geoptimaliseerd groter is dan de afbeelding die vanuit hoge kwaliteit gemaakt is. TinyPNG kan zijn werk dus beter doen met een grote afbeelding dan een afbeelding met gedeeltelijke compressie.

Niet meer zomaar een afbeelding uploaden

Besteed vanaf nu een beetje tijd aan het optimaliseren van de afbeeldingen voor je website met deze methode en jouw webpagina’s zullen in ieder geval niet extra traag zijn door grote afbeeldingen!

Wellicht is het ook mogelijk om jouw CMS je werk uit handen te laten nemen en afbeeldingen automatisch te verkleinen en te optimaliseren. Er bestaat bijvoorbeeld een WordPress plugin van TinyPNG. Het kan je tijd besparen om hier eens naar te informeren bij de bouwer van je website.