Afbeeldingen exporteren en optimaliseren

Eén van de meest belangrijke onderdelen van jouw website zijn afbeeldingen. We gebruiken afbeeldingen om bijvoorbeeld sfeer te creëren, verhalen te vertellen of om extra uitleg te geven bij een tekst. Afbeeldingen zijn dus een echte aanvulling op iedere website!

Maar afbeeldingen kunnen ook een negatieve invloed hebben op jouw site. Jouw website of webshop kan er namelijk heel traag van worden. Daarom is het belangrijk dat jij jouw afbeeldingen optimaliseert voordat je ze uploadt naar jouw website.

We leggen je uit hoe je het beste je afbeeldingen kunt exporteren en optimaliseren om te voorkomen dat jouw website traag wordt.

Allereerst is het belangrijk om jouw afbeelding in het juiste bestandstype te exporteren. Er zijn tientallen verschillende soorten bestandstypes, maar onderstaande types worden het meest gebruikt.

JPG

JPG (.jpg of .jpeg) is een afkorting van Joint Photographic Group en wordt het meest gebruikt voor foto’s. Bij JPG’s wordt de bestandsgrootte verkleind, omdat dit bestandstype de afbeelding comprimeert. Dit heeft als voordeel dat een JPG bestand sneller kan worden ingeladen.

Het bestand verliest hierdoor echter wel wat kwaliteit. Voor online gebruik vormt deze compressie geen probleem. Het kwaliteitsverlies wordt vaak pas zichtbaar wanneer je de afbeelding offline wilt gebruiken of wilt laten afdrukken.

GIF

Een GIF bestand (.gif) bevat een gelimiteerd aantal gekleurde pixels. Hierdoor blijft de bestandsgrootte beperkt. Een GIF heeft ook de mogelijkheid om transparante pixels te weergeven. Dit bestandstype is daarom goed geschikt voor bijvoorbeeld iconen, logo’s en teksten afbeeldingen, maar niet voor foto’s.

PNG

PNG (.png) combineert de eigenschappen van JPG en GIF. Een PNG bestand is het meest geschikt voor het plaatsen van afbeeldingen zonder achtergrond op je website. Doordat de achtergrond ontbreekt, wordt de bestandsgrootte verkleind.

Wanneer je een afbeelding met achtergrond wilt uploaden, geeft PNG juist een veel grotere bestandsgrootte dan een JPG. Dit komt omdat bij een PNG de afbeelding niet wordt gecomprimeerd in tegenstelling tot JPG die dat wel doet.

In het kort

Bij het maken van afbeeldingen voor jouw website kun je dus besparen op bestandsgrootte door het juiste bestandstype toe te passen. We hebben het even kort voor je samengevat:

• Gebruik JPG (.jpg of .jpeg) bij foto’s met veel kleur en detail.
• Gebruik PNG (.png) voor afbeeldingen met een transparante achtergrond.
• Gebruik GIF (.gif) voor abstracte afbeeldingen zoals logo’s, iconen en tekst afbeeldingen.

Resolutie is het aantal pixels van een beeldscherm of afbeelding. Hoe meer pixels, hoe meer informatie er in de afbeelding zit. Bij een hogere resolutie wordt de afbeelding dus scherper maar ook groter in opslag. Resolutie wordt over het algemeen aangeduid in Pixels Per Inch (ppi) en geeft aan hoeveel pixels een afbeelding bevat per inch. Verwar de resolutie dus niet met de afmeting. 

De juiste resolutie voor jouw afbeelding hangt af van de afmetingen en de plaats waar je de foto wilt gebruiken: online of offline. Een gemiddeld beeldscherm heeft een resolutie van 72 ppi. Het is dus niet nodig om een afbeelding van meer dan 72 ppi op je website te plaatsen. Wil je een afbeelding laten afdrukken? Dan kun je het beste 300 ppi gebruiken.

Uit onze ervaring hebben mensen vaak de neiging om afbeeldingen zo groot mogelijk te uploaden, want “dan zijn ze lekker scherp”. Helaas brengt een grote afbeelding ook een grote opslag met zich mee. Wij raden aan om een afbeelding twee keer zo groot als de ware grootte op de site te exporteren.

Dus wanneer een afbeelding op de site met 540 pixels bij 360 pixels wordt weergeven dan exporteer je de afbeelding in 1080 pixels bij 720 pixels. Op deze manier blijft het beeld scherp, zonder dat je onnodig grote afbeeldingen uploadt.

Wanneer je alle bovenstaande stappen hebt doorlopen en jouw afbeelding hebt geëxporteerd in het juiste bestandstype en formaat, hebben we nog één trucje om de bestandsgrootte nog verder te optimaliseren. Door gebruik te maken van online tools kun je eenvoudig jouw bestandsgrootte verkleinen, zonder verschil te zien in kwaliteit van jouw afbeelding. We zetten hieronder een paar handige tools voor je op een rijtje.

• TinyPNG - Op deze site kun je eenvoudig PNG- en JPG-bestanden comprimeren.
• JPEG Optimizer - Op deze site kun je PNG- en JPG-bestanden comprimeren. Je kunt hierbij zelf kiezen in hoeverre je de afbeelding wilt comprimeren.
• Optimole voor Wordpress - Deze plugin voor Wordpress verkleint automatisch de grootte van jouw afbeeldingen.
• ImageOptimize voor Craft CMS - Deze plugin voor Craft CMS verkleint automatisch de grootte van jouw afbeeldingen.