Hoe optimaliseer ik afbeeldingen voor mijn website?

Plaats je vaak afbeeldingen op je website? Dan is het van belang dat je goed in de gaten houdt dat afbeeldingen goed geoptimaliseerd zijn voordat je ze uploadt. Veel mensen uploaden nog steeds afbeeldingen naar een website, zonder na te denken wat voor (negatieve) impact een afbeelding kan hebben op de laadtijd van je pagina.

In dit blog leggen we uit hoe je zelf afbeeldingen kunt optimaliseren zonder (teveel) kwaliteitsverlies, zodat de laadtijd van je pagina laag blijft. Want een te lange laadtijd heeft ook invloed op je SEO.

Verklein het formaat

Zorg ervoor dat je je afbeelding zoveel mogelijk verkleint naar het formaat waarvoor deze gebruikt wordt op je website. We zien helaas nog steeds dat er full-size afbeeldingen, bijvoorbeeld direct geupload vanuit een spiegelreflexcamera, geupload worden op websites. Zo’n afbeelding is al gauw ergens tussen de 4000 en 8000 pixels breed. De meeste beeldschermen komen niet eens aan deze breedte en ook de plek op de website waar een dergelijk afbeelding gebruikt wordt zal nooit zo breed zijn. Probeer een afbeelding dus altijd te verkleinen naar een formaat dat zo dicht mogelijk ligt bij het formaat dat ook op de website gebruikt wordt. Heb je bijvoorbeeld een blog overzicht met drie kolommen van elk 400 pixels breed? Upload dan ook een afbeelding van maximaal 400 pixels breed.

Plaats je een afbeelding in bijvoorbeeld de tekst-editor van WordPress, let dan ook op dat je hier niet een te grote afbeelding uploadt en deze vervolgens in de editor verkleint door de afbeelding kleiner te slepen. De afbeelding wordt dan weliswaar kleiner getoond, maar de originele afbeelding wordt dan nog volledig ingeladen en vertraagt de website alsnog.

Kies het juiste bestandstype

Kies altijd het juiste bestandstype voor je afbeelding. De meest gangbare bestandstypen voor afbeeldingen zijn GIF, PNG, SVG en JPG. Kies altijd het juiste bestandstype voor het juiste doeleinde. In de meeste gevallen is JPG een prima keuze voor foto’s en is al een formaat dat (deels) gecomprimeerd is. PNG gebruik je meestal voor kleinere afbeeldingen zoals iconen of afbeeldingen waarin transparantie gewenst is. GIF is een bestandstype dat vaak gebruik wordt voor geanimeerde afbeeldingen en gebruik je eigenlijk nooit voor grotere foto’s, ook doordat GIF maar een beperkt aantal kleuren kan bevatten. SVG is ideaal voor het tonen van simpele vormen, zoals iconen en logo’s. Dit is een bestandstype voor het tonen van vectoren en daardoor uitermate geschikt om onbeperkt te schalen zonder kwaliteitsverlies.

Wil je nog verder gaan in het optimaliseren van PNG en JPG bestanden, probeer je afbeeldingen dan eens om te zetten naar WebP. Dit is een redelijk nieuwe standaard voor afbeeldingen voor en zorgt voor 25% – 34% kleinere bestandsgrootten voor PNG’s en JPG’s die gebruikt worden voor het web. De meest moderne browsers ondersteunen dit formaat ook ondertussen.

Verklein de bestandsgrootte

Probeer ook de bestandsgrootte van een afbeelding zo klein mogelijk te houden. Dit kun je doen door afbeeldingen te comprimeren. Comprimeren is een techniek waarbij zoveel mogelijk overbodige informatie uit een bestand of afbeelding wordt gehaald en daarmee de bestandsgrootte verkleint. Denk hierbij aan opgeslagen data die vaak wordt toegevoegd door fotocamera’s zoals het type en model camera waarmee de foto is gemaakt of informatie als sluitertijd, of de flitser is gebruikt en de locatie (via GPS) van de foto. Je kunt een afbeelding ook nog verder comprimeren door het aantal gebruikte kleuren te reduceren tot een dusdanig punt dat een afbeelding niet teveel kwaliteit verliest.

Afbeeldingen comprimeren kun je doen op verschillende manieren en met verschillende tools. In Adobe Photoshop kun je een afbeelding bijvoorbeeld exporteren naar een bestand dat volledig is geoptimaliseerd voor web. Ook online zijn er verschillende tools die dit voor je kunnen doen, zoals bijvoorbeeld TinyPNG. Je uploadt je afbeelding(en) hierin en je krijgt een geoptimaliseerd bestand terug.

Ook voor WordPress zijn er diverse plugins en tools om afbeeldingen te optimaliseren, nadat je deze hebt geupload naar de mediabibliotheek.

Heb je vragen?

Heb je naar aanleiding van dit blog over hoe optimaliseer ik afbeeldingen voor mijn website vragen? Heb je hulp nodig bij het optimaliseren van je afbeeldingen? Of ben je op zoek naar een professionele partij die een compleet, nieuw, uniek en gebruiksvriendelijk webdesign voor je kan maken? Misschien ben je benieuwd hoe je überhaupt aan goede afbeeldingen voor je website komt. Onlangs hebben wij daar een blog over geschreven: hoe kom je aan goede afbeeldingen voor je website? Met tal van vragen kunnen wij je helpen of je ondersteunen op gebieden als online marketing en WordPress webhosting.

Neem contact met ons op en laat het ons weten!