Het kiezen en klaarmaken van afbeeldingen voor je website kan best een uitdaging zijn als je dit niet dagelijks doet. In deze blog helpen we je op weg. Je leert:
- Welke soorten afbeeldingen je vaak nodig hebt.
- Welke formaten en verhoudingen handig zijn.
- In welk bestandstype je het beste kunt opslaan.
- Hoe je afbeeldingen op maat maakt met Figma of een gratis online tool.
Veelvoorkomende afbeeldingen op je website
Voor een professionele uitstraling is het belangrijk dat je afbeeldingen het juiste formaat en de juiste verhouding hebben. Hieronder zie je veelgebruikte soorten afbeeldingen en bijbehorende formaten die je kunt aanhouden voor een goede kwaliteit op je WordPress-website:
Hero-afbeelding (volledig schermvullend)
Gebruik je vaak bovenaan een pagina als blikvanger.
Verhouding: 16:9
Aanbevolen formaat: 1920 x 1080 pixels (of 2400 x 1350 pixels voor extra scherp beeld)
Banner-afbeelding (gedeeltelijk schermvullend)
Wordt vaak gebruikt in secties waar tekst en afbeelding naast elkaar staan.
Verhouding: ongeveer 16:6
Aanbevolen formaat: 1600 x 600 pixels (of 2000 x 750 pixels voor retina-schermen)
Afbeelding in 4:3 verhouding
Geschikt voor blogoverzichten, nieuwsitems of naast tekst.
Aanbevolen formaat: 800 x 600 pixels (of 1200 x 900 pixels)
Afbeelding in 3:2 verhouding
Wordt veel gebruikt bij artikelen, kaarten of diensten.
Aanbevolen formaat: 900 x 600 pixels (of 1350 x 900 pixels)
Afbeelding in 1:1 verhouding (vierkant)
Ideaal voor productfoto’s of teamfoto’s.
Aanbevolen formaat: 1000 x 1000 pixels (of 1500 x 1500 pixels)
Zorg dat je bestand niet groter is dan 500 KB, zodat je website snel blijft laden. Voor foto’s is JPG meestal het handigste formaat. Alleen bij transparantie (zoals logo’s) kies je voor PNG.
Afbeeldingen maken in Figma
Figma is een gratis tool waarmee je afbeeldingen eenvoudig kunt bijsnijden en exporteren in het juiste formaat. Dit werkt als volgt:
- Maak een gratis account aan op figma.com.
- Start een nieuw canvas of project.
- Druk op de F-toets om een frame toe te voegen en geef dit het gewenste formaat (bijvoorbeeld 1200 x 900 px).
- Teken een rechthoek die het hele frame vult.
- Upload je afbeelding vanaf je computer en plaats deze in de rechthoek.
- Pas de afbeelding aan zodat hij goed binnen het frame valt.
- Exporteer het frame als JPEG via de exportoptie.
Nu kun je de afbeelding direct uploaden naar je WordPress-website.
Afbeeldingen bijsnijden met een online tool
Gebruik je liever geen Figma? Dan kun je ook een gratis online tool gebruiken om je afbeelding op maat te maken. Zoek in Google op “Online tool image crop” en je komt al snel bij bijvoorbeeld de tool van Adobe Express.
- Open de tool en upload je afbeelding.
- Kies de gewenste verhouding, zoals 4:3 of 1:1.
- Versleep het kader zodat het juiste deel van je afbeelding zichtbaar is.
- Download de afbeelding (vaak als PNG).
- Wil je liever een JPG? Zet de afbeelding dan om via een site zoals cloudconvert.com.
Voor gebruik op je website is JPG bijna altijd de beste keuze: dit laadt sneller en is vaak kleiner qua bestandsgrootte.
Tot slot
Met de juiste formaten en tools voorkom je dat je website traag wordt of afbeeldingen onscherp zijn. Of je nu werkt met een designprogramma zoals Figma of een eenvoudige online tool, het is vooral belangrijk dat je weet welke verhouding en afmetingen je moet gebruiken.
Wil je hulp bij het kiezen van de juiste formaten, of wil je dat we alvast voorbeeldbestanden voor je klaarzetten? Laat het ons weten, we helpen je graag op weg.