Anders dan social media, met zijn vaste en goed gedocumenteerde specificaties, hebben websites wisselende, responsieve layouts en heel uiteenlopende situaties. Een homepagebanner beslaat de volle schermbreedte. Een productfoto verschijnt op 400 px of op 800 px, afhankelijk van het apparaat. Een blogafbeelding staat binnen een tekstkolom.
Er bestaat dus geen enkel juist formaat voor "een website-afbeelding" — wel aanbevolen marges per situatie. Die kennen maakt het verschil tussen een snelle site die er scherp uitziet en een trage site met wazige of veel te zware afbeeldingen.
Waarom het afbeeldingsformaat je site beïnvloedt
Bij niet-geoptimaliseerde afbeeldingen spelen twee verschillende problemen:
- Te veel pixels: de browser downloadt een foto van 4000 px om hem op 800 px te tonen — 80% van de overgedragen data wordt meteen weggegooid. De site wordt trager zonder dat je er iets voor terugkrijgt.
- Te veel KB's of MB's: zelfs met de juiste afmetingen kan een ongecomprimeerde foto 3 MB wegen, terwijl 150 KB op het scherm er precies hetzelfde uitziet.
Elk probleem heeft zijn eigen oplossing: het eerste vraagt om verkleinen (het aantal pixels aanpassen), het tweede om comprimeren (het bestand lichter maken zonder de pixels te wijzigen). In de praktijk levert de combinatie van beide, in die volgorde, het beste resultaat op.
💡 Vuistregel: een webafbeelding hoeft zelden breder te zijn dan 1920 px — de breedte van een Full HD-monitor. Voor afbeeldingen die nooit het hele scherm vullen (kolommen, productrasters, thumbnails) ligt de grens nog lager. Alles daarboven kost bandbreedte en vertraagt het laden.
Referentietabel — formaten per type afbeelding
| Type afbeelding | Aanbevolen afmetingen | Ideale bestandsgrootte | Formaat |
|---|---|---|---|
| Banner / hero (volle breedte) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Banner desktop (boxed layout) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Banner mobile | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Productfoto (e-commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Productthumbnail | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Artikel- of blogafbeelding | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Postthumbnail (overzicht) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo in de header | 200–400 px breed | 5–30 KB | SVG / PNG / WebP |
| Interface-iconen | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB per stuk | .ico + PNG |
| Open Graph (socialepreview) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Achtergrond van een sectie | 1920 × variabele hoogte | 100–300 KB | WebP / JPG |
| Profielfoto / avatar (site) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Foto bij een klantreview | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Afmetingen per type website
Bedrijfswebsites en portfolio's
Bedrijfswebsites hebben meestal een maximale contentbreedte tussen 960 en 1440 px. Banner- of heroafbeeldingen beslaan doorgaans de volle breedte van de layout, dus 1440–1920 px breed volstaat voor moderne monitoren. Sectiefoto's (team, kantoor, diensten) hoeven zelden breder te zijn dan 800 px.
- Hoofdbanner: 1920 × 700–900 px, onder 200 KB
- Teamfoto: 400–600 × 400–600 px, onder 60 KB
- Dienst- of sectiefoto: 800–1200 × 500–700 px, onder 100 KB
Blogs en contentplatforms
Op blogs is de tekstkolom zelden breder dan 760–800 px. Een uitgelichte afbeelding van 1200 px dekt elke responsieve layout ruimschoots, zonder verspilling. Thumbnails in het postoverzicht zijn nog kleiner: meestal 300–500 px.
- Uitgelichte afbeelding: 1200 × 630 px, onder 100 KB
- Afbeeldingen in het artikel: 800–1200 px breed, onder 80 KB per stuk
- Thumbnail in het overzicht: 400 × 250 px, onder 30 KB
E-commerce en webshops
In een webshop zijn productfoto's het belangrijkste element: ze moeten de klant overtuigen. De resolutie moet hoog genoeg zijn voor de zoomfunctie (als je site die heeft), maar de bestandsgrootte moet in de hand blijven, anders worden overzichtspagina's traag — die laden immers tientallen afbeeldingen tegelijk.
- Hoofdfoto van het product (vierkant): 800–1200 × 800–1200 px, 80–150 KB in WebP
- Extra productfoto's: zelfde formaat als de hoofdfoto
- Thumbnail in het productraster: 300–500 × 300–500 px, 20–50 KB
- Categorie- of actiebanner: 1440 × 400–600 px, 80–150 KB
🛍️ Voor webshops: gebruik altijd een witte of neutrale achtergrond bij productfoto's. Dat comprimeert beter (grote vlakken met één kleur laten zich prima samenpersen), zorgt voor een consistente look tussen producten van verschillende leveranciers en maakt vergelijken in de winkelwagen prettiger.
Landingspagina's
Een landingspagina is gebouwd rond één conversiedoel, en snelheid is daarbij cruciaal: onderzoek laat zien dat elke extra seconde laadtijd de conversie met 7 tot 12% verlaagt. Afbeeldingen op zo'n pagina mag je stevig optimaliseren.
- Hero of achtergrond: 1440–1920 px breed, onder 150 KB — hoogste prioriteit
- Product- of dienstfoto: 600–800 px, onder 80 KB
- Iconen bij de voordelen: SVG waar het kan
- Foto bij een review: 80–120 px rond, onder 15 KB
De factor 2× (Retina- en HiDPI-schermen)
Retina-schermen (Apple) en HiDPI-schermen (andere fabrikanten) hebben een dubbele pixeldichtheid: ze tonen meer pixels per inch dan gewone monitoren. Wil een afbeelding daar scherp ogen, dan heeft die twee keer zo veel pixels nodig als de ruimte waarin hij wordt getoond.
Een voorbeeld: een afbeelding die op 400 px breed wordt getoond, heeft op een Retina-scherm 800 px nodig om scherp te zijn. Upload je alleen 400 px, dan oogt hij licht wazig op iPhones en MacBooks.
De praktische oplossing is om twee keer de maximale weergavebreedte aan te houden, en dat op te vangen met stevige compressie zodat het bestand niet meteen verdubbelt. Een goed gecomprimeerde WebP van 800 px is vaak lichter dan een niet-geoptimaliseerde PNG van 400 px.
Het juiste formaat per situatie
| Situatie | Beste formaat | Waarom |
|---|---|---|
| Foto's (product, banner, team) | WebP lossy | 25–35% lichter dan JPG bij vergelijkbare kwaliteit |
| Logo in de header | SVG | Vectorieel, schaalt zonder verlies, kleinste bestand |
| Logo als SVG niet werkt | PNG met transparante achtergrond | Behoudt de nodige transparantie |
| Interface-iconen | SVG | Schaalbaar, te animeren met CSS, minieme bestanden |
| Schermafbeelding met tekst | WebP lossless of PNG | Scherpe tekst — JPG geeft artefacten rond de letters |
| Open Graph / socialepreview | JPG of WebP | Werkt op zo veel mogelijk previewplatforms |
| Achtergrond met transparantie | WebP met alfakanaal of PNG | Het enige formaat naast PNG dat transparantie aankan |
Zo bereid je afbeeldingen voor op het uploaden
De aanbevolen werkwijze voor elke afbeelding die naar een website gaat:
- Bepaal de weergaveafmetingen. Hoeveel ruimte krijgt deze afbeelding maximaal in de layout? Gebruik de referentietabel hierboven of inspecteer het element in je browser (F12 → de plek van de afbeelding aanklikken).
- Verklein naar twee keer die weergaveruimte. Zo dek je Retina-schermen af zonder onnodige ballast. Met Verkleinen stel je de breedte exact in pixels in.
- Zet om naar WebP. Ondersteunt je site of CMS WebP (bij moderne systemen bijna altijd), doe de omzetting dan vóór het uploaden. Converteren doet dat in een paar seconden.
- Comprimeer. Breng het bestand terug binnen de aanbevolen marges. Met Comprimeren optimaliseer je JPG, PNG en WebP zonder zichtbaar kwaliteitsverlies.
- Controleer het resultaat. Open de gecomprimeerde afbeelding naast het origineel. Zie je geen verschil, dan zit je goed.
Maak je afbeeldingen nu klaar voor je site
Verklein en comprimeer de afbeeldingen van je site in seconden — zonder installatie, zonder account.
Controleren hoe zwaar je huidige afbeeldingen zijn
Wil je weten of de afbeeldingen op je site al geoptimaliseerd zijn, gebruik dan deze tools:
- Google PageSpeed Insights (pagespeed.web.dev): analyseert je URL en somt de afbeeldingen op die lichter kunnen, met per afbeelding de geschatte winst in KB.
- Chrome DevTools → Network → Img: filter de verzoeken op afbeeldingen en bekijk de grootte van elk geladen bestand. Sorteer op grootte om de zwaarste eruit te pikken.
- WebPageTest.org: uitgebreide analyse met een waterfall die laat zien welke afbeeldingen als eerste laden en hoe lang dat duurt.
De meestgemaakte fouten met afbeeldingsformaten
- Camerafoto's rechtstreeks uploaden: die zijn 3 tot 12 MB groot en 4000 tot 8000 px breed. Geen enkele site heeft zoiets nodig zonder eerst te verkleinen en comprimeren.
- PNG gebruiken voor foto's: een foto in PNG is 5 tot 10 keer zwaarder dan in JPG of WebP, zonder zichtbare winst. Bewaar PNG voor afbeeldingen met transparantie of graphics met scherpe randen.
- Geen mobiele versie van je afbeeldingen: een afbeelding van 1920 px serveren aan een telefoon van 390 px is pure verspilling. Het HTML-attribuut
srcsetlost dat automatisch op. - De Open Graph-afbeelding vergeten: deelt iemand je pagina op WhatsApp of LinkedIn zonder ingestelde previewafbeelding, dan toont het platform een generieke of lege thumbnail. Stel altijd de metatag
og:imagein met een afbeelding van 1200×630 px. - Een logo als JPG: JPG dwingt een witte achtergrond af, en die valt op zodra de ondergrond gekleurd of transparant is. Een logo hoort in SVG of PNG.