Afbeeldingen optimaliseren

In dit artikel leest u hoe u uw afbeeldingen en foto’s kunt optimaliseren voordat u ze uploadt naar uw website. Eén van de meest voorkomende oorzaken van een trage website blijkt vaak grote foto’s te zijn.

Zo ook foto’s die u met uw smartphone maakt zijn tegenwoordig van dusdanige hoge kwaliteit dat deze uw website enorm traag kunnen maken.

De stappen om een foto te optimaliseren zijn:

  1. Formaat wijzigen
  2. Bestandsgrootte verkleinen

1.1 Voorbeeld foto vóór optimalisatie

Een normale foto gemaakt op bijv. een iPhone 13 heeft de volgende afmetingen:

  • Resolutie: 4032 x 3024 pixels
  • Bestandsgrootte: 1.9MB

Zoals u kunt lezen is het formaat van een hedendaagse smartphone camera bijna gelijk aan het formaat van een kleine spiegelreflexcamera (DSLR). Dit is echter zonde van uw website aangezien deze volledige resolutie eigenlijk nooit volledig benut wordt terwijl deze wel heel lang duurt om te laden.

1.2 Voorbeeld foto na optimalisatie

Stel dat u de foto als achtergrond wilt gebruiken dan raden wij een maximum breedte aan van 1920 pixels. Wanneer we de foto ook nog eens comprimeren zodat de bestandsgrootte kleiner wordt dan komen we al gauw uit op bijvoorbeeld onderstaande resolutie:

  • Resolutie: 1920 x 1440 pixels
  • Bestandsgrootte: 259kb

Zoals u kunt lezen was het formaat van de foto uit dit voorbeeld is de resolutie circa 2 keer kleiner maar is de bestandsgrootte maar liefst 7 keer kleiner. Alleen deze foto zal nu dus 7x zo snel laden. Wanneer u dit voor alle foto’s doet alvorens u ze uploadt dan is de snelheidswinst gigantisch!

2.1 Ideale formaat voor Achtergrondfoto’s

Voor achtergrondfoto’s raden wij dus altijd een maximum breedte aan van 1920 pixels. De meeste fotobewerkingsprogramma’s hebben standaard een optie om de foto in verhouding te verkleinen waardoor u alleen de breedte van 1920 pixels hoeft in te voeren. Hierna zal de hoogte automatisch aanpast worden. Verder op deze pagina leggen wij uit hoe u uw foto kunt verkleinen op zowel Windows als Mac.

2.2 Ideale formaat voor gewone foto’s

Voor foto’s die u bij uw teksten wilt plaatsen, dus géén achtergrondfoto’s, raden wij een maximale breedte aan van 800px. Om een snelle website te garanderen leggen wij in dit artikel uit hoe u makkelijk en snel uw foto’s kunt verkleinen en optimaliseren.

Klik op ‘Formaat aanpassen (Mac)‘ voor als u MacOS gebruikt.


3.1 Formaat aanpassen (Windows)

Op Windows 10 kunt u eenvoudig foto’s aanpassen met de standaard foto app genaamd ‘Photos’. Dit is dé standaard Fotobewerkingsprogramma op Windows 10 en 11. Wanneer u een foto opent door te dubbelklikken ziet u een soortgelijk scherm als hieronder:

Zodra uw foto is geopend in de Photo’s app dan kunt u deze verkleinen door op het icoont met de drie horizontale puntjes te klikken. Zie onderstaande schermafbeelding:

Vervolgens verschijnt er een uitklapmenu waar u de optie: ‘Resize image‘ selecteert. Zie onderstaande schermafbeelding. Let op, in de Nederlandse versie heet dit ‘Formaat wijzigen‘.

In het volgende scherm kunt u vervolgens de breedte aanpassen, zie onderstaande schermafbeelding. Zodra u de breedte aanpast dan zal de hoogte automatisch meeveranderen. De kwaliteit kunt u meestal op 90% laten. Vervolgens klikt u op ‘Save‘ (‘Opslaan‘ bij de Nederlandse versie).

Wanneer u de foto heeft opgeslagen en het formaat heeft aangepast, is het tijd voor de volgende stap. Namelijk het verkleinen van de bestandsgrootte. Lees verder bij ‘Afbeeldingen comprimeren met TinyPNG‘ hoe u dit kunt doen.


3.1 Formaat aanpassen (Mac)

Op Mac kunt u eenvoudig uw foto’s verkleinen met de Voorvertoning app, deze zit standaard op alle Mac’s. Zodra u een foto hiermee opent ziet u een scherm zoals in onderstaande schermafbeelding.

Zodra u de foto heeft geopend in Voorvertoning, navigeert u naar de menubalk bovenin uw scherm. Zie onderstaande schermafbeelding:

Hier klikt u op ‘Extra’s‘ en selecteert u vervolgens ‘Pas grootte aan‘. Zie onderstaande schermafbeelding:

In het volgende scherm wat dan verschijnt (Zie schermafbeelding hieronder) kunt u het formaat aanpassen. Wanneer u de breedte aanpast zal de hoogte automatisch in verhouding meeschalen en klikt u op OK. De afbeelding is nu verkleint maar dient nog wel opgeslagen te worden!

Om de afbeelding op te slaan klikt u linksboven op ‘Archief‘ => ‘Bewaar‘ om de foto te overschrijven. Wilt u een kopie bewaren? Selecteer dan de optie ‘Dupliceer‘.

U bent nu klaar voor de laatste stap, het verkleinen van de bestandsgrootte.


Afbeeldingen comprimeren met TinyPNG

Op het internet zijn diverse websites waarmee u uw afbeeldingen kunt comprimeren. Maar de website die wij intern het vaakst gebruiken is TinyPNG. Ondanks de naam kunt u hier ook JPG bestanden uploaden en comprimeren. Het voordeel van deze website is dat u gratis afbeeldingen kunt verkleinen zonder dat dit ten kostte gaat van de kwaliteit, zogenaamde Lossless compressie.

Het enige wat u hoeft te doen is uw foto’s hiernaartoe te slepen en ze zullen automatisch gecomprimeerd worden waarna u ze kunt downloaden. Zie onderstaande schermafbeelding:

Tip! U kunt bij TinyPNG tot wel 20 foto’s per keer comprimeren. Daarna herlaad u de pagina en kunt u opnieuw een batch van max. 20 foto’s comprimeren.

Zodra u voorgaande stappen hebt doorlopen dan kunt u uw foto’s uploaden naar uw website zonder bang te zijn dat deze de laadtijd van uw website tegenwerkt.

©2026 Sitework • DisclaimerPrivacyverklaring