Bestandsformaten

Je levert je logo aan als JPG, je ontwerper stuurt een PNG terug, en je webbureau vraagt om een SVG. Ondertussen staat de afbeelding op je homepage als WebP. Welk formaat gebruik je wanneer, en maakt het eigenlijk iets uit? Ja, het maakt veel uit. Het verkeerde bestandsformaat kiezen kost je laadtijd, beeldkwaliteit en zoekmachineposities.

De gereedschapskist van je beeldbibliotheek

Denk aan bestandsformaten als soorten verfkwasten. Een brede kwast voor grote vlakken, een fijne voor details, een spuitbus voor texturen. Elke kwast heeft een doel. Gebruik je de verkeerde, krijg je een rommelig resultaat.

De vijf formaten die je op het web tegenkomt:

• JPG: de standaard voor foto's. Comprimeert goed, maar verliest bij elk opslaan een beetje kwaliteit. Gebruik JPG voor realistische beelden met veel tinten, niet voor logo's met harde randen of tekst.
• PNG: ondersteunt transparantie en verliest geen kwaliteit bij opslaan. Bestanden zijn groter dan JPG. Goed voor logo's en illustraties op gekleurde achtergronden, of als je een transparante laag nodig hebt.
• WebP: de moderne vervanger voor JPG en PNG, ontwikkeld door Google. Kleinere bestanden bij gelijke kwaliteit. Alle huidige browsers ondersteunen het. Gebruik dit als standaard voor alle afbeeldingen op je website.
• SVG: geen pixels, maar wiskundige beschrijvingen van lijnen en vlakken. Schaalt zonder kwaliteitsverlies op elke schermgrootte. Verplicht voor logo's en iconen op een professionele website.
• AVIF: nog nieuwer dan WebP, nog kleinere bestanden. Browserondersteuning groeit snel en wordt steeds relevanter voor snelheidsoptimalisatie.

Verkeerd formaat, kapotte website

Een PNG-foto van 4 MB op je homepage trekt 3 seconden extra laadtijd . Google straft dat af. Bezoekers haken eerder af. De Core Web Vitals zakken onder de drempelwaarden. Hetzelfde geldt voor een JPG-logo: scherp op een laptop van 2015, wazig op het retinescherm van een moderne smartphone.

De meest gemaakte fouten:

• JPG-logo aanleveren → wazig op retineschermen en donkere achtergronden.
• PNG gebruiken voor foto's → bestand 3x zo groot als nodig.
• Geen WebP serveren → je laat gratis prestatiewinst liggen.
• SVG gebruiken voor foto's → SVG is voor vectorafbeeldingen, niet voor realistische beelden.

Een verkeerd bestandsformaat is ook een SEO-probleem. Google Lighthouse meet de afbeeldingsefficiëntie en trekt punten af als je verouderde formaten gebruikt. Dat raakt direct je positie in zoekresultaten. Goed webdesign begint dus bij de juiste bestandskeuze.

Zo kies je het juiste formaat

Een simpele vuistregel die in de meeste situaties klopt:

1. Logo of icoon? Altijd SVG. Vraag je ontwerper om het originele vectorbestand (AI, EPS of SVG), niet een export als PNG.
2. Foto of realistische afbeelding? Gebruik WebP. Heb je nog geen WebP-export? Converteer met Squoosh.app (gratis, in de browser) of Imagemin voor geautomatiseerde workflows.
3. Afbeelding met transparantie maar geen foto? Gebruik PNG of WebP met alpha-kanaal.
4. Illustratie of grafiek? SVG als de bron beschikbaar is, anders WebP.

Tooling die je webbureau of jijzelf kan inzetten:

• Squoosh.app voor handmatige conversie en kwaliteitsvergelijking.
• ImageOptim (Mac) voor bulkcompressie van JPG en PNG.
• Google Lighthouse om te meten welke afbeeldingen achterblijven.
• Screaming Frog om afbeeldingen zonder alt-tekst of met verkeerd formaat te vinden.
• Sharp (Node.js) of Imagemin voor geautomatiseerde conversie in je bouwproces.

Als je een website laat maken , vraag dan aan je bureau of ze automatisch WebP serveren. De meeste moderne CMS -systemen doen dit al van zichzelf. Lever jij het bronmateriaal aan? Stuur foto's als JPG of RAW in hoge resolutie (minstens 2000 pixels breed). Het bureau past de afmetingen aan en converteert naar WebP. Lever logo's altijd als SVG of AI aan.

Klein verschil, groot effect

Bestandsformaten lijken een technisch detail, maar ze bepalen hoe je branding overkomt op elk scherm en hoe snel je website laadt. Een SVG-logo is altijd scherp, op een horloge én een 4K-scherm. WebP-foto's laden 30 tot 70 procent sneller dan hun PNG-equivalenten. Dat vertaalt zich direct naar meer bezoekers die blijven, een betere conversieratio en hogere posities in Google.

Heb je twijfels over de afbeeldingen op je bestaande website? Met website care van Laanify controleren en optimaliseren we je volledige afbeeldingsbibliotheek, inclusief formaatconversie en alt-teksten.

Veelgestelde vragen

Wat is het beste bestandsformaat voor afbeeldingen op een website?

WebP is momenteel het beste formaat voor de meeste afbeeldingen op het web. Het biedt kleinere bestanden dan JPG en PNG bij vergelijkbare kwaliteit, en alle moderne browsers ondersteunen het. Voor logo's en iconen gebruik je altijd SVG vanwege de onbeperkte schaalbaarheid.

Kan ik mijn PNG-logo omzetten naar SVG?

Niet zinvol. Een SVG-export van een PNG is een bitmap-tracing: de computer probeert pixels na te tekenen als vectorvormen. Het resultaat is nooit zo scherp als een echt vectorbestand. Vraag je ontwerper om het originele AI- of EPS-bestand, of om een echte SVG-export vanuit het ontwerpprogramma.

Wat is het verschil tussen JPG en JPEG?

Niets. JPEG is de volledige naam (Joint Photographic Experts Group), JPG is de kortere bestandsextensie die Windows vroeger gebruikte vanwege de limiet van drie tekens. Ze zijn identiek.

Heeft het bestandsformaat invloed op mijn SEO?

Ja, indirect. Google Lighthouse en de Core Web Vitals meten laadsnelheid en afbeeldingsefficiëntie. Zware afbeeldingen in verouderde formaten vertragen je pagina en drukken je score omlaag. Pagina's die langzaam laden ranken slechter in zoekresultaten.

Welk formaat lever ik aan bij mijn webbureau?

Logo's en iconen als SVG of AI (Adobe Illustrator). Foto's en andere afbeeldingen als JPG of RAW in hoge resolutie, minstens 2000 pixels breed. Lever nooit gecomprimeerde kleine bestanden aan: kwaliteit die er niet in zit, kan het bureau er niet meer in terugbrengen.