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.
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:
