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?
