Het optimaliseren van je afbeeldingen is belangrijk om te voorkomen dat bezoekers onnodig grote bestanden in moeten laden bij het bezoeken van je website. Hoewel we bij nieuwe websites allerlei technieken implementeren om afbeeldingen pas te laden als deze getoond moeten worden bijvoorbeeld, blijft het belangrijk dat er geen afbeeldingsbestanden van 10MB geüpload worden.

Afbeeldingen dienen op drie manieren geoptimaliseerd te worden: bestandstype, bestandsafmetingen (resolutie) en bestandsgrootte/compressie.

Bestandstype

Voor afbeeldingen op het web raden we aan het nieuwe .webp bestandstype te gebruiken. Dit modernere bestandstype is gemiddeld 25% kleiner dan zowel .jpg als .png afbeeldingen (bron). Net als .png bestanden ondersteunt .webp ook transparantie. Nog niet alle programma’s kunnen dit bestandstype exporteren (zie tools verderop).

Bestandsafmetingen

In basis dient de resolutie van een afbeelding dubbel zo groot te zijn als de afmetingen waarop de afbeelding op de website getoond wordt. Dit is belangrijk om de afbeelding ook scherp weer te geven op hoge resolutieschermen, zoals Apple’s retina schermen. Als een foto op 100 bij 100 pixels wordt weergegeven op de website, dient de afmeting dus 200 bij 200 pixels te zijn (en niet groter). Mocht je niet weten hoe je de afmetingen van een afbeelding kunt controleren (via ‘Element inspecteren’), is de volgende vuistregel voldoende: voor afbeeldingen die niet op volledige breedte weergegeven worden houden we 2000 pixels voor de lange zijde aan, voor afbeeldingen die wel op volledige breedte worden weergegeven 3500 pixels voor de lange zijde. Op deze resoluties is 72 DPI voldoende.

Bestandsgrootte/compressie

Als laatste dient het bestand niet te groot te zijn. De voorgaande optimalisaties hebben al invloed op de bestandsgrootte, maar door een afbeelding te comprimeren kan de bestandsgrootte nog verder beperkt worden. Het doel is om een afbeeldingsbestand een grootte te geven van maximaal 400kb. Comprimeren kan lossless (zonder kwaliteitsverlies) of lossy (met kwaliteitsverlies). Vaak is 75% van de originele kwaliteit niet te onderscheiden van de originele kwaliteit op web, en daarom raden we aan altijd voor 75% kwaliteit te gaan.

Voor het optimaliseren van je afbeeldingen kun je tools als Adobe Photoshop, Adobe Lightroom of Mac Foto’s gebruiken. Die ondersteunen alle stappen voor optimalisatie. Op Mac raden we imageOptim aan voor de compressie. Ook zijn er online tools, zoals cloudconvert voor de conversie naar het .webp bestand.

Mocht je met veel beeld of juist met veel redacteuren werken, is het wellicht interessant om het optimaliseren op serverniveau in te regelen. Dat is makkelijker voor de gebruiker maar zorgt wel voor additionele kosten. Mocht je daarin geïnteresseerd zijn, neem dan vooral even contact met ons op.