Foto’s verkleinen voor website

Wat is afbeeldingscompressie?

Afbeeldingscompressie betekent eigenlijk in het kort dat je de bestandsgrootte van de afbeelding verkleint, zonder dat dit ten koste gaat van de kwaliteit. Dit doe je door zelf aan de slag te gaan met een fotobewerkingsprogramma of door gebruik te maken van handige (gratis) tools die dit volledig voor je regelen. Met afbeeldingscompressie kun je het bestandsformaat van je foto’s gemakkelijk met 50% verkleinen, dus het is zeker slim om dit op je website toe te passen. 

Van JPG naar WEBP

Een van die trucjes is het omzetten van je JPG of PNG bestanden naar een WEBP bestandsformaat. WEBP is het bestandsformaat voor afbeeldingen dat is ontwikkeld door Google. Je kunt je daarom misschien wel voorstellen dat Google blij is als je dit bestandsformaat op je website gebruikt. Maar dat is niet het enige voordeel, het biedt namelijk ook nog eens een veel hogere mate van compressie dan een normale JPG of PNG afbeeldingen. Waardoor de bestandsgrootte vele malen kleiner is, terwijl de kwaliteit gelijk is aan dat van een JPG of PNG afbeelding. 

De foto zelf comprimeren

Naast het gebruik van WEBP bestanden is het ook mogelijk de afbeelding zelf te comprimeren. Hierbij wordt bepaalde data die opgeslagen is in de afbeelding verwijdert, of wordt de afbeelding iets minder scherp gemaakt, om ervoor te zorgen dat het bestandsformaat kleiner wordt. Dat de afbeelding minder scherp is, betekent natuurlijk niet dat een afbeelding onscherp op je website getoond wordt. Bij een website upload je namelijk vaak een afbeelding in een dubbele grootte. Dit doe je om er zeker van te zijn dat je afbeelding op alle schermen scherp is. Doordat de afbeelding iets kleiner weergeven wordt dan het daadwerkelijke formaat, zal de afbeelding alsnog hartstikke scherp zijn. 

Tools om je foto’s te comprimeren

Om je afbeeldingen te optimaliseren voor je website zijn er een aantal handige tools en programma’s die je kunt gebruiken. Je kunt hierbij zowel kiezen voor een plugin op je website, als voor een online tool. De tools die wij zelf vaak gebruiken zijn:

Bulk Resize Photos

🔗 Bulk Resize Photos

Met deze gratis tool optimaliseer je afbeeldingen, maak je grote afbeeldingen kleiner en zet je afbeeldingen om naar het bestandstype WEBP. Het werkt ook nog eens heel eenvoudig. Je uploadt 1 of meerdere afbeeldingen en kiest vervolgens hoe je deze wilt comprimeren. Hieronder vind je de instellingen die wij vaak gebruiken:

Foto’s volledige breedte:

1. In het blauwe menu kiezen wij voor de optie “Breedte”
2. Hier vullen we in dat de afbeelding 2200 pixels breed mag zijn
3. Het beeldformaat passen we aan naar WEBP
4. De beeldkwaliteit passen we aan naar 85% (soms spelen we hier een beetje mee als de afbeelding te groot is of de kwaliteit onvoldoende)

Foto’s halve pagina breed:

1. In het blauwe menu kiezen wij voor de optie “Breedte”
2. Hier vullen we in dat de afbeelding 1100 pixels breed mag zijn
3. Het beeldformaat passen we aan naar WEBP
4. De beeldkwaliteit passen we aan naar 85% (soms spelen we hier een beetje mee als de afbeelding te groot is of de kwaliteit onvoldoende)

Converter for Media (WordPress plugin)

Een plug-in die we daarnaast installeren op onze websites is Converter for Media. Deze tool zorgt ervoor dat afbeeldingen automatisch van jpeg omgezet worden naar WEBP tijdens het uploaden. Uiteraard zonder kwaliteitsverlies. Wie daarnaast de betaalde Pro versie van deze tool gebruikt heeft de mogelijkheid de afbeeldingen om te zetten naar het nog kleinere AVIF bestandsformaat. Met het AVIF bestandsformaat blijf je de hoge kwaliteit van je foto’s behouden, terwijl het formaat van de afbeelding kleiner is. Ook is het met de Pro versie mogelijk om je afbeeldingen al tijdens het uploaden automatisch bij te snijden naar een maximale grootte. Hierdoor weet je zeker dat er geen hele grote afbeeldingen op een website geüpload worden. 

🔗 Converter for Media

Foto’s verkleinen en bijsnijden

Een andere manier om je foto’s te optimaliseren is door ze juist te schalen en indien nodig bij te snijden. In het kort betekent dit dat je ervoor zorgt dat afbeeldingen het juiste formaat hebben voor de plek waar je ze op je website toont. 

Dit is iets wat vaak misgaat op websites. Veel mensen zijn zich namelijk niet bewust van de grootte van een foto in pixels of MB’s en de impact hiervan op de bezoekerservaring. Een te grote foto vertraagt de laadtijd van een website aanzienlijk, terwijl een te kleine foto onscherp en minder aantrekkelijk kan zijn voor bezoekers. Het is daarom belangrijk om de juiste afmetingen voor jouw foto’s te gebruiken.

De makkelijkste tool voor het verkleinen en bijsnijden van foto’s

Je kunt ervoor kiezen om een fotobewerkingsprogramma (bijvoorbeeld Adobe Photoshop of Affinity Designer) te gebruiken voor het verkleinen van je afbeeldingen, maar een veel makkelijkere manier is wederom de gratis Bulk Resize Photos tool. Zoals je hierboven al hebt kunnen lezen geef je hier aan hoe breed je foto moet zijn, in welk bestandsformaat je de foto wilt hebben en in hoeverre de foto gecomprimeerd mag worden. Vervolgens wordt je foto automatisch voor je geoptimaliseerd. 

🔗 Bulk Resize Photos

Lazy loading van je afbeeldingen

Een derde manier om het gebruik van afbeeldingen op je website te optimaliseren, is door lazy loading in te stellen. Dit is een techniek die in webdesign toegepast wordt, om afbeeldingen en andere media-elementen pas te laden, wanneer de gebruiker ernaartoe scrollt of wanneer de afbeelding daadwerkelijk zichtbaar is voor de gebruiker. Dit draagt onder andere bij aan de gebruiksvriendelijkheid van de website, maar vooral ook aan de duurzaamheid.

Voordelen van lazy loading op energieverbruik en gebruikerservaring

Omdat de website onderdelen pas ingeladen worden op het moment dat de gebruiker ze ziet, scheelt dit enorm in de laadtijd van een pagina. De pagina hoeft namelijk niet in één keer alle onderdelen in te laden. Maar naast de laadtijd heeft dit ook een groot voordeel als het aankomt op duurzaamheid. Want, als je bezoeker niet helemaal tot aan de onderkant van de pagina scrollt, hoeft je pagina niet helemaal ingeladen te worden. Dit komt de duurzaamheid ten goede, omdat elke KB / MB die ingeladen moet worden gelijk staat aan een klein beetje stroomgebruik, wat weer gelijkstaat aan een kleine CO2 uitstoot.

Daarnaast is Google ook fan van WordPress websites die gebruik maken van lazy loading. Dit komt omdat deze websites sneller geladen worden en daardoor een betere ervaring bieden aan de bezoekers ervan. 

Lazy loading tools

Om lazy loading op je website in te stellen moet je vaak wel wat basis website kennis hebben. Het is iets minder eenvoudig dan het optimaliseren van je afbeeldingen. Een handige tool die wij hiervoor gebruiken is de SG Optimizer van SiteGround. Om deze plugin te mogen gebruiken heb je echter wel webhosting van SiteGround nodig. Dus installeer deze plugin niet klakkeloos op je website. Wil je Lazy Loading instellen, maar heb je geen basis website kennis? Neem dan even contact met op ons. We helpen je hier graag bij!