Afbeeldingen optimaliseren voor je website: grootte, formaat en kwaliteit

Kort antwoord: om een afbeelding voor het web te optimaliseren, (1) wijzig je het formaat naar de grootte waarop hij echt wordt getoond, (2) sla je hem op in een efficiënt formaat zoals WebP, (3) gebruik je een kwaliteit van ongeveer 75–85% en (4) verwijder je metagegevens. In de afbeeldingscompressor van Imgovo kun je dit allemaal in één stap doen en wordt er niets geüpload.

Waarom het ertoe doet

Afbeeldingen zijn vaak het grootste deel van een webpagina. Grote afbeeldingen vertragen het laden, wat de ervaring van bezoekers en de vindbaarheid in zoekmachines kan schaden. De Core Web Vitals van Google meten Largest Contentful Paint (LCP) en een goede LCP is 2,5 seconden of minder. Op veel pagina’s is het LCP-element een afbeelding.

Kleinere bestanden gebruiken ook minder mobiele data en opslagruimte.

De vier hefbomen

1. Afmetingen

Een foto van 6000 × 4000 pixels die op 800 pixels breed wordt getoond, verspilt de meeste pixels. Pas het formaat aan tot ongeveer de getoonde breedte, of tot ongeveer twee keer de getoonde breedte voor scherpe weergave op schermen met hoge dichtheid.

De compressor heeft een instelling “Max. breedte / hoogte” met voorinstellingen: oorspronkelijk formaat behouden, 3840, 2560, 1920, 1600, 1280, 1080, 800 en 640 px, plus een eigen waarde. Het formaat wordt proportioneel gewijzigd en een kleinere afbeelding wordt nooit vergroot.

2. Bestandstype

Formaat	Het best voor	Opmerkingen
JPG	Foto’s	Werkt overal
WebP	Foto’s en afbeeldingen	Kleine bestanden, breed ondersteund door moderne browsers
AVIF	Foto’s	Meestal de kleinste bestanden, maar het coderen is langzamer en oudere software kan het mogelijk niet openen
PNG	Screenshots, logo’s, afbeeldingen, transparantie	Verliesvrij; de kwaliteitsregelaar is niet van toepassing, alleen het formaat wijzigen maakt het kleiner

Logo’s en iconen die als SVG bestaan, kunnen vaak kleiner worden gemaakt met de SVG-optimalisatie; zie Een SVG optimaliseren.

Een goede combinatie is een kleiner formaat (bijvoorbeeld 1920 px breed) in WebP of AVIF. Voor hulp bij het kiezen zie je JPG, PNG, WebP of AVIF.

3. Kwaliteit

Kwaliteit	Gebruiken
75–85%	Web en sociale media
60–70%	Zeer kleine bestanden
Boven 85%	Afdrukken

JPG en WebP op 70–85% verkleinen foto’s doorgaans met ongeveer 50–80%. Compressie is onomkeerbaar voor JPG, WebP en AVIF, zelfs bij kwaliteit 100, dus bewaar je originele bestanden.

4. Metagegevens

De uitvoer van de compressor bevat alleen pixelgegevens, dus EXIF-gegevens zoals cameragegevens en gps-locatie worden verwijderd. Dat maakt het bestand kleiner en beschermt je privacy. Zie Gps-locatie en EXIF-gegevens verwijderen.

Stap voor stap in de afbeeldingscompressor

1. Open de afbeeldingscompressor en voeg een of meer afbeeldingen toe door ze erin te slepen, bestanden te kiezen of te plakken.
2. Kies Comprimeren op: Kwaliteit (regelaar, standaard 80%) of Doelbestandsgrootte (bijvoorbeeld 100 KB).
3. Stel de maximale breedte of hoogte in.
4. Kies het uitvoerformaat: JPG, WebP, AVIF (met het label “kleinste”) of PNG.
5. Vergelijk de originele en de gecomprimeerde voorbeelden naast elkaar.
6. Download het resultaat. Is het nieuwe bestand groter dan het origineel, dan waarschuwt de tool je en kun je het origineel downloaden.

Kan de limiet voor de bestandsgrootte niet worden gehaald, dan meldt de tool dat en geeft hij je het kleinste resultaat dat hij kon maken. Voor kleine limieten zie je Een afbeelding comprimeren tot onder 100 KB.

Een praktische checklist voor webafbeeldingen

• Wijzig het formaat voordat je comprimeert. Kleinere afmetingen besparen vaak meer dan een lagere kwaliteit.
• Kies het juiste bestandstype. Foto’s: WebP of AVIF met JPG als terugvaloptie waar nodig. Afbeeldingen: PNG of WebP.
• Mik op verstandige groottes. Als vuistregel kunnen veel inhoudsfoto’s onder ongeveer 150 KB blijven en grote kopafbeeldingen onder ongeveer 300 KB, maar het hangt af van de afbeelding en het ontwerp. Controleer het resultaat met je eigen ogen.
• Beschrijf de afbeelding. Voeg een zinvolle alt-tekst en een beschrijvende bestandsnaam toe, zoals red-bicycle-leaning-on-wall.webp.
• Reserveer de ruimte. Stel de breedte en hoogte in op je pagina, zodat de opmaak niet verspringt terwijl de afbeelding laadt.
• Laad afbeeldingen buiten beeld met uitgestelde weergave, maar niet de hoofdafbeelding bovenaan de pagina.
• Bewaar je originelen op een veilige plek, zodat je later nieuwe versies kunt exporteren.

Veelgemaakte fouten

• Camera-originelen uploaden. Een foto van 6 MB is op een webpagina bijna nooit nodig.
• Steeds hetzelfde JPG opnieuw opslaan. Elke opslag met verlies kan de kwaliteit verminderen. Begin altijd vanaf het origineel.
• PNG voor foto’s gebruiken. De bestanden zijn veel groter dan JPG of WebP.
• Te sterk comprimeren. Onder ongeveer 60% kun je blokjes en vervaging zien. Controleer het voorbeeld.

Privacy

Het comprimeren gebeurt in je browser. Je afbeeldingen worden niet geüpload en hoe Imgovo met bestanden omgaat, lees je in Zijn online afbeeldingsomzetters veilig?

Probeer het nu

Open de afbeeldingscompressor, voeg je afbeelding toe en vergelijk het voorbeeld. Voor alleen een snelle formaatwijziging gebruik je Afbeelding verkleinen; om het bestandstype te wijzigen gebruik je Afbeelding omzetten.