Wat zijn goede afmetingen voor afbeeldingen op je website?
Foto’s dragen veel bij aan de uitstraling van je website. Ze maken je verhaal compleet, geven sfeer en helpen je bezoeker om zich verbonden te voelen met wat je vertelt. Maar alleen als ze goed geoptimaliseerd zijn. Een te zware afbeelding vertraagt je website. Een te kleine afbeelding oogt onscherp en onprofessioneel.
Het juiste formaat kiezen is dus essentieel voor een snelle, mooie en gebruiksvriendelijke website.
Hoe bepaal je wat groot of klein is
Het formaat van een foto gaat altijd over twee zaken.
-
Het aantal pixels
-
De bestandsgrootte in KB of MB
De kunst is om een foto precies groot genoeg te maken voor de plek waar hij wordt gebruikt. Zo zorg je voor kwaliteit zonder dat je website trager wordt.
Richtlijnen voor veelvoorkomende situaties
Schermvullende beelden zoals headers of banners
- Breedte ongeveer 2400 pixels
- Bestandsgrootte bij voorkeur onder de 500 KB
Beelden binnen pagina's of blogartikelen
- Breedte ongeveer 1200 pixels
- Bestandsgrootte rond 300 KB
Kleine beelden of miniaturen
-
Breedte tussen 400 en 800 pixels
-
Bestandsgrootte 100 tot 150 KB
Welk bestandsformaat kies je
Voor foto’s met veel kleur en detail kun je het beste JPG gebruiken. Dit biedt een goede balans tussen kwaliteit en bestandsgrootte.
Gebruik PNG alleen voor beelden met transparantie, zoals logo’s of illustraties.
Let op: werk je veel met Canva dan is de standaardinstelling bij het opslaan PNG. Het is dus belangrijk dat je die instelling even aanpast naar JPG.
Beter nog: WebP
WebP is een modern afbeeldingsformaat dat speciaal is ontwikkeld voor het web. Het zorgt voor dramatisch kleinere bestandsgroottes (vaak 30% tot 40% lichter) in vergelijking met traditionele formaten zoals JPEG en PNG, zonder dat dit ten koste gaat van de beeldkwaliteit.
Hier zijn de belangrijkste redenen waarom WebP ideaal is voor websites:
- Snellere laadtijden: Doordat de bestanden lichter zijn, hoeven browsers minder data te downloaden. Dit leidt direct tot een snellere paginasnelheid.
- Betere SEO-resultaten: Google hecht veel waarde aan een snelle website. Een hogere laadtijd resulteert doorgaans in een betere ranking in zoekmachines.
- Lagere bandbreedtekosten: Omdat bezoekers minder data verbruiken, bespaar je als website-eigenaar op hosting- en datatransportkosten.
- Ondersteuning voor moderne functies: In tegenstelling tot JPEG ondersteunt WebP ook transparantie (vergelijkbaar met PNG) en animaties (vergelijkbaar met GIF).
Hoe maak je WebP-afbeeldingen?
- Handmatig converteren: Gebruik online tools zoals CloudConvert of Squoosh, ontwikkeld door Google.
- Design software: Exporteer je afbeeldingen vanuit Photoshop of Figma direct als WebP.
- Automatisch: Veel moderne CMS-systemen (zoals WordPress, via plugins zoals Imagify of WP Rocket) converteren geüploade foto’s automatisch naar WebP.
Hoe verklein je het formaat van een afbeelding
Er zijn twee redenen om een afbeelding te verkleinen. Je wilt minder pixels of je wilt een kleinere bestandsgrootte. Vaak is het allebei.
Pixels verkleinen
Je past dan de fysieke afmetingen van de foto aan.
Dit kun je doen met:
-
Iloveimg.com
-
Photopea (gratis online)
-
Canva
-
Photoshop
-
Elementor of Divi heeft soms ook een automatische optimalisatie, maar handmatig werkt het nauwkeuriger
Je opent de foto, kiest voor formaat wijzigen en voert de gewenste breedte in. De hoogte schaalt automatisch mee.
Bestandsgrootte verkleinen
Je houdt dezelfde afmetingen, maar je comprimeert de foto zodat hij lichter wordt.
Handige tools:
-
Iloveimg.com
-
TinyJPG of TinyPNG
-
ImageOptim
-
Squoosh
Sleep de foto in de tool en je krijgt dezelfde afbeelding terug met minder KB’s zonder zichtbaar kwaliteitsverlies.
Pixels én KB's optimaliseren
De beste volgorde is:
- Eerst het formaat in pixels aanpassen
- Daarna de geoptimaliseerde foto comprimeren
Op die manier haal je het maximale uit je beeld zonder dat het zichtbaar in kwaliteit achteruit gaat.
Maar er zijn toch plugins die afbeeldingen kleiner maken op mijn website?
Er bestaan plugins zoals Imsanity die automatisch te grote afbeeldingen verkleinen zodra je ze uploadt. Dat kan handig zijn als extra vangnet, vooral wanneer meerdere mensen toegang hebben tot je mediabibliotheek. Toch is het goed om te weten dat zo’n plugin niet bepaalt wat het juiste formaat is voor de plek waar de foto komt te staan. Hij maakt het bestand alleen kleiner dan een ingestelde maximale grootte. De echte kwaliteit en snelheid van je website krijg je wanneer je zelf vooraf al de juiste afmetingen en compressie toepast. Zie een plugin daarom als een aanvullende beveiliging en niet als de basis van je optimalisatie.
Waarom dit belangrijk is voor jouw online uitstraling
Een snelle website voelt professioneel en prettig. Bezoekers blijven langer en hebben meer aandacht voor jouw inhoud. Jij wilt een online presentatie die klopt met wie je bent en die vertrouwen uitstraalt. Optimale beeldformaten helpen je daarbij.
Download de checklist
Ik heb een checklist gemaakt waar al deze informatie in staat. Lekker praktisch om bij de hand te hebben. Je hoeft er geen naam en e-mailadres voor in te vullen om te ontvangen, je kunt hem gewoon hieronder downloaden 🙂
Meer tips?
Ik deel regelmatig artikelen met praktische informatie over websites, online leeromgevingen, branding, techniek en ondernemerschap. Dit zijn gerelateerde artikelen:
