Het ideale formaat afbeelding voor je duurzame website

Het ideale formaat foto voor op je website

Foto’s maken je site aantrekkelijk — maar grote bestanden maken je website traag en verbruiken meer energie. In deze handleiding loop ik álles met je door: van welke formaten je gebruikt tot precies welke knoppen je aanklikt in gratis tools, hoe je bestandsnamen en alt-teksten invult, en wat je doet als je veel foto’s hebt.

Kort overzicht (snel geheugensteuntje)

Banner / full-width: ± 2400 px breed — target ≤ 500 KB.
Afbeelding naast tekst / deel van pagina: ± 1200 px breed — target ≤ 300 KB.
Kleinere sfeerfoto / thumbnail: ± 900 px breed — target ≤ 200 KB.

Opslaan: bij voorkeur WebP, anders JPG voor foto’s; PNG voor logo’s / transparantie.

Tip: Eerst snijden (crop) → daarna formaat (resize) → daarna compressie / conversie → uploaden.

Probeer altijd het zelfde formaat/vehouding foto te gebruiken dus 4:3 of 3:2 in de praktijk is dit bijvoorbeeld 1200 x 800 pixels schaal 3:2 of 1200 x 900 pixels schaal 4:3

Bestandsgrootte foto’s

De bestandsgrootte is het ‘gewicht’ van de foto en wordt uitgedrukt in Kb (kilobytes) of Mb (megabytes).

Waarom dit belangrijk is

Snellere website = betere ervaring voor je bezoekers.
Snelheid bespaart energie (minder data versturen = minder stroom): duurzaam.
Google vindt snellere sites vaak beter, dus je vergroot je vindbaarheid.
Consistente fotoformaten zorgen voor rust en professionaliteit op je pagina.

Voorbereiding: wat heb je nodig

Computer met je foto’s in één map.
Gratis tools:
Befunky (snijden & formaat formaat aanpassen )
Convertio — File Converter Overzetten naar Webp en als laatste
TinyPNG (compressie) om je bestandsgrootte te verkleinen.
3. WordPress-login voor upload (indien je WordPress gebruikt).
4. Optioneel: bewaar altijd je originele (ongecomprimeerde) foto’s in een aparte map.

Stap-voor-stap — één foto bewerken (concreet voorbeeld)

Situatie: foto van 4000 x 2000 px, 4 MB → doel: 1200 x 750 px, zo klein mogelijk qua KB.

Stap A — Foto croppen (op maat maken) in Befunky

Ga naar Befunky → kies Create → Open → Computer → selecteer je foto.

Links klik je op Crop.

Kies Custom of vul handmatig bij Width: 1200 en Height: 750. Zorg dat Lock aan staat (houdt verhoudingen).

Sleep of verschuif het kader zodat het belangrijkste deel zichtbaar blijft. Klik Apply.

Tip: kies het deel met het gezicht of het belangrijkste object in beeld; dat trekt aandacht.

Stap B — Foto verkleinen (resize) in Befunky

Klik links op Resize.

Vul Width: 1200 en Height: 750 (of alleen width invoeren als Lock aan staat). Klik Apply.

Click Save → Computer. Geef de foto meteen een SEO-vriendelijke naam (zie verder onder ‘bestandsnaam’).

Resultaat: je hebt de foto nu in de juiste afmeting. De bestanden zijn al veel kleiner, maar nog niet geoptimaliseerd voor web.

Stap C — Omzetten naar WebP (optioneel maar aan te raden)

Ga naar Convertio — File Converter → kies Bestanden. → naar: kies WebP.

Converteren → download. Soms geeft de site een zip-bestand; unzip en zet de foto’s in je map.

Stap D — Compressie (TinyPNG)

Ga naar TinyPNG (tinypng.com).

Sleep of klik op Drop your .png or .jpg files here → kies je (WebP of JPG).

Wacht tot de tool zegt dat compressie klaar is → Download.

Vaak scheelt TinyPNG ±40% in grootte zonder zichtbaar kwaliteitsverlies.

Tip: volg altijd deze volgorde: snijden → verkleinen → converteren naar WebP → compressie. Dit levert de beste verhouding scherpte/gewicht.

Naam aanpassen.

Voordat je de foto overzet moet je de naam aanpassen dit is voor de SEO (vindbaarheid op het internet) belangrijk, gebruik dus het zoekwoord waar je op gevonden wilt worden van de blog of de pagina waar je in bezig bent. Houd het kort en relevant: zoekwoord + korte omschrijving.
Bijvoorbeeld in mijn geval: ideale formaat foto

Afbeeldingen in WordPress downloaden

Zet de foto in het juiste mapje op je computer zodat je hem makkelijk terug kunt vinden.

Bestandsnamen & SEO (exact hoe je het invult)

Sleep of selecteer je geoptimaliseerde foto → uploaden.

Alt-tekst, titel en caption — wat zet je waar?

Alt-tekst (alt attribute): korte beschrijving van de afbeelding — belangrijk voor toegankelijkheid en SEO.

Formule: (kort beschrijving) + eventueel zoekwoord als het logisch is.

Maximaal ca. 125 tekens.

Voorbeeld: Vrouw die een foto bewerkt op laptop – instructie ideale formaat.

Title: mag gelijk zijn aan de bestandsnaam of iets korters. Niet cruciaal.

Caption: zichtbaar onder de afbeelding op de pagina — gebruik alleen als het iets toevoegt voor de bezoeker.

Toegankelijkheidstip: Als een afbeelding puur decoratief is, laat je de alt-tekst leeg (alt=””) — dan lezen schermlezers deze niet voor.

Conclusie:

Door deze stappen te volgen heb je niet alleen de ideale foto formaten op je site staan maar blijft je website ook snel doordat we de bestandsgrootte zo klein mogelijk hebben gehouden! Door zoekwoorden toe te voegen aan de naam van je afbeeldingen ben je beter zichtbaar op Google en makkelijker te vinden. Ja het kost je tijd maar ik zou je toch echt aanraden dit te doen.

Kom je er niet uit? laat het me dan weten, domme vragen zijn er niet naar mijn mening dus schroom niet als je iets niet begrijpt.