fbpx

Ideale formaat foto’s op je website

Hoe groot moeten afbeeldingen op je website zijn?

“Hey Mok,
Welke grootte van afbeeldingen adviseer je dat ik gebruik op m’n website?
Hoeveel pixels, mb?
En is een .jpg of .png beter?”

Kort en to the point, dit mailtje van Melissa. En belangrijk!

Te grote, te zware afbeeldingen maken je website traag.
Te kleine afbeeldingen worden pixelachtig en zien er dus lelijk uit op je website.

Maar wat is dan te groot en wat is te klein? En wat is nu het ideale formaat foto’s voor op je website?

Om antwoord te geven op de vraag wat te groot en te klein is moet je eerst weten met welke maten je de grootte van een afbeelding meet.

Hoe meet je de grootte van een afbeelding?

Melissa benoemde deze twee eenheden al.

1. Bestandsafmeting foto’s

De bestandsafmeting van je foto meet je in pixels.

2. Bestandsgrootte foto’s

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

Een foto is bijvoorbeeld 900 pixels breed en 400 pixels hoog en weegt 120 Kb.

Wat is een pixel eigenlijk?

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.

Kwaliteit van foto’s op je website

Op je website wil je je beelden zo licht mogelijk maken, dus zo weinig mogelijk KB, zonder dat je kwaliteit van de foto verliest. Het optimaliseren van je foto’s is dus een afweging tussen gewicht en kwaliteit.

Je wilt dat je beelden op alle beeldschermen mooi vertoond worden. Dus op de kleinste: de smartphones en ook op de grootste.

Je optimaliseert je afbeeldingen dan voor de grootste monitoren. Je WordPress-theme zorgt ervoor dat grotere afbeeldingen automatisch worden aangepast om ze in kleinere monitoren te passen.

Ideale formaat foto’s op je website

Voor een beeld dat de hele breedte van het scherm inneemt houd ik het volgende aan:

2400 pixels breedte en niet meer dan 500 Kb.

Alleen hele grote schermen zijn breder dan 2400 px breedte en het groter afbeelden van deze beelden zal de kwaliteit minimaal beïnvloeden.

Voor een afbeelding die slechts een deel van een pagina inneemt (bijvoorbeeld de helft van een blogpost), is een breedte van 1200 pixels en een grootte van 300Kb prima.

Je kunt 2-3 MB beelden naar 300kb terug brengen en niet echt een verandering in kwaliteit merken. Test het zelf maar eens uit.

Om te controleren of je beelden goed geoptimaliseerd hebt, open je originele afbeelding en het geoptimaliseerde beeld en bekijk ze naast elkaar. Kijk uit voor ‘jaggies’, dit zijn van die vlekkerige, pixelachtige gebieden op de foto. Deze wil je niet hebben!

Stress niet

Maak je geen zorgen als je afbeelding iets boven de aangegeven aantal Kb’s uitkomt. Wat ik hier neerzet is een globale indicatie zodat je een besef krijgt van wat té groot of té zwaar is. Je website gaat pas traag lopen als je beelden structureel boven de 1MB zitten.

Check de grootte van de foto’s op je website

Om te zien hoe groot je afbeeldingsbestanden zijn, gebruik Windows Verkenner of de Mac Finder en controleer het bestand. Op een Mac kunt je direct in de Finder bekijken:

Je ziet hier dat de afbeelding 4,6 MB is en een afmeting heeft van  5360 x 3560.

Ook in WordPress zelf kun je je foto afmeting en zwaarte zien. 
Hiervoor ga je naar je Media en klik je op de foto. Rechts zie je dan het formaat.

Hoe je het formaat van de foto in WordPress zelf aan kunt passen laat ik in de volgende video zien >>

Wat te gebruiken: jpg of png?

Nu je weet hoe groot je ideale beelden ongeveer moeten zijn op je website kijken we in welk bestandsformat je ze het beste kunt opslaan.

Of je voor .jpg of .png kiest heeft met verschillende dingen te maken.

1. Transparantie van je foto

Een groot verschil tussen .jpg en .png is dat png een transparante achtergrond kan hebben. Als je bijvoorbeeld op een blauwe achtergrond werkt en je wilt er een logo overheen zetten, dan kun je je logo als png opslaan en dan krijg je geen wit vlakje eromheen. Iets wat je met een jpg wel zou krijgen.

2. Grootte van je foto

.jpg geeft je een lichter bestandsformaat dan .png. Om nog extra op zwaarte van je afbeelding te besparen kun je voor .jpg kiezen.

3. Schaling van je foto

Door de opbouw van de .png is deze beter bestand tegen kwaliteitsverlies bij het automatisch herschalen van een afbeelding. Dit gebeurt bijvoorbeeld als de originele foto groter is dan bijvoorbeeld de breedte van de kolom waar je hem in neerzet. WordPress schaalt het beeld dan automatisch.

Conclusie ideale formaat foto op je website

Zoals ik al eerder aangaf is het ideale bestandsformaat een spel tussen kwaliteit en grootte. Om het makkelijk te houden zou ik je beeldmateriaal als .jpg opslaan voor web. Is het belangrijk dat de achtergrond van je beeld transparant is, gebruik dan .png.

Kanttekening: Voor facebook moet je je beelden altijd als .png opslaan. Het maakt hier niet uit dat het bestand zwaar is en de .png wint het op facebook op kwaliteit van de .jpg.

Het verkleinen van je beelden

Wist je dat je foto’s heel makkelijk kunt verkleinen in WordPress zelf?

Bekijk hier hoe je dat doet >>

Oude nieuwe keukentafel

Oude nieuwe keukentafel

Drie weken geleden, gebeurde er een wonder. Mijn broer deelde toen namelijk een post in onze familie app. Deze post ging over een boek dat net uit was. Dat boek was geschreven in het huis waar mijn vader is opgegroeid. Een prachtig huis waar mijn oudste oom nog met...

Lees meer
“Je moet een e-maillijst opbouwen!”

“Je moet een e-maillijst opbouwen!”

Dit heb je vast wel om je heen gehoord. Van een online marketing guru, je business coach of van andere startende zelfstandige ondernemers die actief met hun online marketing aan de slag gaan. Aan m’n keukentafel zitten vaak ondernemers die wel weten dat je een...

Lees meer
Hordes bezoekers in je winkel

Hordes bezoekers in je winkel

Hoe meer bezoekers op je website hoe meer klanten je krijgt. Dit is gewoon een statistisch feit. Stel je een winkel voor in een achteraf steegje. Laten we zeggen een wol-winkel. Niemand loopt er langs. Niemand ziet het dus. En niemand gaat naar binnen. Hoeveel zullen...

Lees meer

Voor groei en bloei

Water je website

Ontvang wekelijkse inspiratie om je website in te zetten voor de bloei van je bedrijf.

Je email gebruik ik om je wekelijks waardevolle tips te sturen. Bij inschrijving ga je hiermee akkoord. Je kunt je elk moment weer uitschrijven.

GRATIS CHECKLIST

Dit heb je nodig voor een nieuwe website

Je bent er maar 17 vinkjes van verwijderd :)

You have Successfully Subscribed!

GRATIS EBOOK

Bespaar direct tijd op het bouwen van je website

Ontdek de 7 geheimen naar sneller een betere website online

You have Successfully Subscribed!

Chat openen
Heb je een vraag? Stel hem hier gerust