Het is een veel gestelde vraag: ‘Welk formaat moeten de afbeeldingen op mijn website zijn?’. Overal op internet lees je artikelen met de aanbevolen afmetingen voor afbeeldingen. En je gaat er enthousiast mee aan de slag, maar dan blijken ze toch wazig te zijn. Ik weet precies hoe vervelend dit is. Door middel van trial en error heb ik voor mezelf afmetingen gevonden die ervoor zorgen dat mijn afbeeldingen van goede kwaliteit zijn, maar toch minder ruimte in beslag nemen. In deze blog deel ik wanneer je welk formaat het beste kan gebruiken, zodat je precies weet wat je voortaan moet doen.
Waarom is het belangrijk om je afbeeldingen een goed formaat te geven?
Wanneer je grotere afbeeldingen gebruikt op je website nemen deze ook meer geheugen in beslag en vertragen ze daarmee de laadtijd van je website, dit heeft weer effect op de gebruikerservaring van je klanten en je vindbaarheid. Daarnaast heb je op deze manier meer ruimte nodig op je hostingpakket en moet je wellicht sneller updaten naar een duurder pakket.
Welk formaat afbeelding moet ik wanneer gebruiken?
Headers en banners of afbeeldingen van een volledige breedte
Vaak wordt er in het geval van headers aangeraden om gebruik te maken van een afbeelding van 1980px. Dit kan je ongeveer aanhouden. Zelf maak ik gebruik van gemakkelijke getallen en rond ik het voor mijn eigen gemak af op 2000px. Dit geeft bij mijn goede en scherpe resultaten.
Blog afbeeldingen
Voor de omslagfoto van mijn blogs gebruik ik afbeeldingen met een verhouding 2:3, 3:4 zou eventueel ook kunnen. De lange zijde, in dit geval de breedte, is bij mij altijd 1000px. Wanneer ik een afbeelding in mijn blog gebruik om de tekst op te breken geef ik deze ook een breedte van 1000px.
Wanneer ik gebruik maak van kolommen en 2 afbeeldingen naast elkaar plaats, worden de afbeeldingen 500px. Als je 3 kolommen gebruikt, zou je dit eventueel kunnen verkleinen naar 333px enz.
Woocommerce productfoto’s
Woocommerce raadt voor je productfoto’s afmetingen van 1000px x 1000px aan. Ik heb kleinere formaten uitgeprobeerd, maar deze waren inderdaad niet scherp genoeg, zeker niet wanneer de klant in wilde zoomen op de productfoto. Een afbeelding van 1000px is over het algemeen duidelijk en mooi scherp.
Afbeeldingen in je sidebar
Een afbeelding in je sidebar hoeft niet zo groot te zijn. Vaak neemt je sidebar ongeveer 25% van het scherm in. Zelf kies ik er daarom voor om de afbeeldingen een breedte van 500px te geven.
Overige afbeeldingen op je website
Je kan het ideale formaat van de afbeeldingen gemakkelijk berekenen door 2000px te delen door het aantal kolommen dat je gebruikt. Heb je bijvoorbeeld 4 afbeeldingen naast elkaar geplaatst op je homepagina? Dan is elke afbeelding 2000:4 = 500px
Hoe kan je je afbeeldingen het juiste formaat geven?
Je kan je afbeeldingen aanpassen in WordPress. Dat doe je als volgt. Ga naar Media > Bibiotheek en klik op de afbeelding die je wilt bewerken. Klik vervolgens op ‘Afbeelding bewerken’. Vul het nieuwe formaat in en klik op ‘Schalen’.
Wanneer je een foutje hebt gemaakt kan je de afbeelding terugzetten met de knop ‘Afbeelding herstellen’.
Het is naast het juiste formaat echter ook belangrijk om je afbeeldingen te comprimeren. Daarom bewerk ik zelf al mijn website afbeeldingen in Photoshop.
Ten slotte, alle afmetingen op een rijtje
Nog even een keer alle afmetingen op een rijtje:
- Headers, banners en volledige breedte: 2000px breed
- Blog omslagfoto: 1000px breed, Blog afbeeldingen in kolommen: 1000px : het aantal kolommen
- Productfoto’s 1000px x 1000px
- Sidebar: 500px breed
- Overige formaten berekenen: 2000px : het aantal kolommen
Probeer vooral uit wat voor jou werkt. Dit zijn richtlijnen die ik zelf gebruik voor het formaat van de afbeeldingen op mijn website, en die voor mij goede resultaten geven. Mocht iets anders voor jou beter werken, dan ben je natuurlijk helemaal vrij om je afbeeldingen een ander formaat te geven.
