“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 als je ze groter wilt gebruiken dan dat ze zijn.

Maar wat is dan te groot en wat is te klein?

En wat is nu het ideale formaat 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.

Melissa benoemde deze twee eenheden al.

1. Bestandsafmeting
De bestandsafmeting van je foto meet je in pixels.

2. Bestandsgrootte
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

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.

Ideaal

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 is (bijvoorbeeld de helft van een blogpost), dan 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.

Grootte checken

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 >>

.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
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
.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
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
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 >>

Het ideale formaat foto’s bij de hand.

Met de gratis Spiek Sheet.
Overzichtelijk de formaten op een rijtje.

Paas actie

Web it Like a Pro

Maak 5x zo snel een waardevolle website met de formule die professionele webbouwers gebruiken.

Met 250,- korting

Je website is een krachtige tool in het aantrekken van waardevolle klanten en het laten groeien van je bedrijf. De kennis die ik de afgelopen 14 jaar heb opgedaan met het maken en inzetten van websites deel ik hier.
Mok Heijmerink

Ken je mensen voor wie deze blog van waarde kan zijn?
Deel deze hier:

Vul je e-mailadres in,
dan mail ik je de link naar de training:

You have Successfully Subscribed!

Ontdek 9 voordelen van een website

en hoe je deze inzet voor meer klanten.

Schrijf je direct in om het e-Book te downloaden

Check je mail voor het e-Book!

Ja, ik schrijf me in voor de gratis online workshop

Starten met je website

Donderdag 18 april 10:00 uur

Privacy verklaring

You have Successfully Subscribed!

Ja, ik schrijf me in voor de gratis online workshop

Starten met je website

maandag 17 december 10:00 uur

Privacy verklaring

You have Successfully Subscribed!

Ja, ik schrijf me in voor de gratis training (in Amersfoort)

Starten met je website

Zaterdag 18 mei 10:00 uur

Privacy verklaring

You have Successfully Subscribed!

Ja, ik kom naar de gratis aanschuif ochtend

op vrijdag 08 maart

Privacy verklaring

Je bent succesvol aangemeld voor de volgende aanschuif ochtend in Amersfoort. Check je mail voor meer info.

gratis worksheet, bezoekers website, stappen website, beginnen aan je website, eerste stap website

Ja, ik ontvang graag de worksheet

om van m'n bezoekers m'n beste klanten te maken

Privacy verklaring

Je bent succesvol aangemeld voor de volgende aanschuif ochtend in Amersfoort. Check je mail voor meer info.

Ja, ik ontvang graag de Spiek Sheet

voor de goede formaten foto's op m'n website

Privacy verklaring

You have Successfully Subscribed!