“Wat is de juiste grootte van de foto’s die ik gebruik op mijn website?”

Een vraag die ik regelmatig krijg. Een terechte vraag, want te zware afbeeldingen zorgen ervoor dat je website traag wordt. Dat is niet alleen heel vervelend voor je bezoeker, maar ook Google vindt dat niet leuk. Het is heel slecht voor je SEO. Maar je wilt ze ook niet te klein maken, want dan worden ze onscherp. Voor je website kun je beter geen hele grote foto’s gebruiken.
En nog belangrijker. Hoe doe je dat zonder grafisch programma?

Niet groter dan nodig

Wanneer we over de afmeting van een afbeelding praten, hebben we het vaak over pixels. Een pixel is het kleinste deel van een scherm dat een bepaalde kleur kan aannemen. Een afbeelding wordt opgebouwd door allemaal (éénkleurige) pixels die dan samen het beeld vormen. Hoe hoger de resolutie van je scherm, hoe groter de dichtheid van pixels, hoe scherper het beeld. Een beeld van 350 bij 350 pixels zal op een scherm met een hogere resolutie dus kleiner uitvallen dan op een scherm met een lagere resolutie. De pixels zijn namelijk kleiner.

Over het algemeen geldt dat je afbeeldingen beter niet groter kunt uploaden dan nodig is. Dat wil zeggen niet groter dan ze getoond worden op je website. Hoe groot een afbeelding wordt getoond, hangt af van de hoeveelheid ruimte die een afbeelding krijgt in het ontwerp. Oftewel van de breedte van de kolom waarin je de afbeelding plaatst.

Hiernaast zie je overzicht van de indelingen die jouw website kan hebben. Daarbij zie je ook de breedte van de afbeelding in pixels staan.

klik op de afbeelding om te vergroten

Afmetingen Premium Theme
Foto verkleine voor web online

Eerst aanpassen dan uploaden

In WordPress kun je heel gemakkelijk de afmeting aanpassen. Maar dit is niet de optimale manier om ze te verkleinen, omdat WordPress er miniaturen van maakt. Het is beter om ze eerst te optimaliseren voordat je ze uploadt.

Nu werk ik zelf met Photoshop, waarin ik mijn afbeeldingen kan aanpassen en optimaliseren voor het web. Heb je zelf geen grafisch programma, dan zou je Squoosh kunnen gebruiken. Je sleept hier heel gemakkelijk jouw foto naar de webpagina en vult bij width het juiste aantal pixels in. Hierbij kun je bovenstaande indelingsopties aanhouden. Wanneer je twijfelt over de grootte pak je datgene wat het dichts bij komt.

Je krijgt meteen het verschil te zien met de originele foto. Schrik niet als het wat onscherp wordt. Je foto wordt beeldvullend weergegeven. Wanneer jouw foto straks maar in 225px weergegeven wordt is dat natuurlijk veel kleiner en zul je weinig zien van de (on)scherpte.

Kiezen voor .png of .jpg

Tenslotte is er nog een verschil in hoe je een afbeelding opslaat. Het verschil tussen een jpg en een png is dat een png een transparante achtergrond kan hebben.

Jpg’s zijn het meest geschikt voor het opslaan van foto’s, omdat ze veel kleuren bevatten. Png is minder geschikt voor foto’s omdat ze gebruik maken van een compressietechniek zonder verlies. De kwaliteit is dus hoger, maar dat betekent ook een grotere bestandsgrootte. Een png gebruik je vooral voor logo’s, pictogrammen en tekeningen met een transparante achtergrond.

Een ander formaat wat je nog wel eens ziet is een .gif. Tegenwoordig wordt dit formaat vaak gebruikt voor geanimeerde plaatjes. Gif-afbeeldingen gebruiken maar een paar kleuren en kun je daarom voor foto’s of afbeeldingen beter vermijden.

Heb ik je geholpen?

Hopelijk heb ik voor jou gemakkelijker gemaakt om een afbeelding te verkleinen voor je website. Stuur me gerust een berichtje om te laten weten hoe het gaat!