Te grote of te zware afbeeldingen op je website maken je website traag. En 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 welk formaat foto’s moet ik gebruiken voor mijn website?

Maten

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.

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

2. Bestandsafmeting
De bestandsafmeting van je foto meten we in pixels.

Een foto is bijvoorbeeld 600 pixels breed en 400 pixels hoog en weegt 41 Kb als je hem opslaat als jpg.

Wat is een pixel eigenlijk?

Een pixel is een enkele gekleurde punt (Eng.: dot) op het beeldscherm van de computer of in een digitaal beeld. Veel pixels bij elkaar vormen samen een beeld. Alles wat op het scherm te zien is, is opgebouwd uit pixels. Het aantal pixels op een scherm is bepalend voor de resolutie van het beeldscherm. Beeldschermen bestaan uit bijvoorbeeld 1280 × 1024 pixels of 1920 × 1080 pixels. Hoe meer pixels beschikbaar zijn per oppervlakte-eenheid, hoe scherper het beeld kan zijn.

Kwaliteit

Het is wenselijk om je afbeeldingen zo klein mogelijk te maken, dus zo weinig mogelijk kb, zonder dat het de kwaliteit van je foto aantast. Hoe minder aantal pixels, hoe kleiner de afbeelding hoe sneller deze laadt. Als je in je foto’s een goede verhouding hebt tussen gewicht en kwaliteit, heb je je foto goed geoptimaliseerd.

Je wilt dat je beelden op alle beeldschermen goed gezien worden, op grote computers, laptops, tablets en telefoons. Je wilt dat je beelden op alle beeldschermen mooi vertoond worden. Als je je afbeeldingen voor  het grootste scherm optimaliseert, zorgt je WordPress-thema ervoor dat grotere afbeeldingen automatisch worden aangepast om ze in kleinere schermen ook goed zichtbaar te laten zijn.

Ideaal

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

2200 pixels breedte en niet meer dan 450 Kb.

Alleen hele grote schermen die breder zijn dan 2200 px in de breedte zal de kwaliteit minimaal beïnvloeden.

Als je een afbeelding hebt die de helft van de breedte heeft bijvoorbeeld een blogpost, dan is een breedte van 1100 pixels en een grootte van 250Kb helemaal goed.

Stress niet

Gebruik je een keer een te groot beeld, vrees dan niet. Je website gaat pas vertragend laden als je altijd zware afbeeldingen gebruikt.

png of jpg 

Ik welk bestand moet je de afbeeldingen dan opslaan om ze goed op je website te hebben staan?
De keuze of je voor .jpg of .png moet kiezen heeft met verschillende voorwaarden te maken.

1. Schaalbaarheid
.png is beter tegen schaling bestand dan jpg, dit komt door de opbouw van de afbeelding. Dit schalen gebeurt bijvoorbeeld als je een foto groter is dan bijvoorbeeld de ruimte waar je hem inzet.

2. Transparantie
Een groot verschil tussen .jpg en .png is dat png een transparante achtergrond kan hebben. Als je je logo bijvoorbeeld op een gekleurde achtergrond wilt zetten, dan kun je je logo als png opslaan en dan krijg je geen wit vlakje om het logo heen. Dit gebeurd wel met een jpg bestand.

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

Conclusie
Gebruik.jpg voor gewone afbeeldingen en .png als je transparante achtergrond van de afbeelding wil gebruiken.

Er zijn allerlei programma’s in de omloop die je foto’s kunnen verkleinen, ook kun je dit in WordPress zelf doen. Al pleit ik er voor om dit toch zelf in de hand te houden. Je kan dit doen door bijvoorbeeld een gratis fotobewerkingsprogramma te gebruiken zoals deze:

IrfanView

Gimp

Getpaint