Foto comprimeren voor je website: praktische gids

Een foto comprimeren zonder dat je het ziet, doe je in drie stappen: schaal hem naar het formaat waarop hij echt wordt getoond, sla hem op in een modern formaat zoals WebP en comprimeer met een kwaliteit tussen 75 en 85. Een foto van een paar megabyte wordt daarmee meestal maar een paar honderd kilobyte. Met het blote oog zie je nauwelijks verschil.

In deze gids leggen we elke stap uit, welk formaat je wanneer gebruikt en hoe je je foto's gratis kleiner maakt met de tool afbeeldingen comprimeren van Pictulab. Alles gebeurt in je browser: je foto's worden niet naar een server geüpload.

Waarom de bestandsgrootte van je afbeeldingen ertoe doet

Afbeeldingen zijn vaak het zwaarste onderdeel van een pagina, zeker in een webshop met veel productpagina's. Hoe zwaarder ze zijn, hoe langer de pagina laadt. Op mobiel merk je dat nog sterker.

Dat heeft invloed op drie dingen:

• Gebruikerservaring: een productpagina waarop de hoofdfoto lang op zich laat wachten, komt slordig over. Veel bezoekers haken af.
• SEO: Google kijkt naar de Core Web Vitals. Een daarvan, LCP (Largest Contentful Paint), meet hoe lang het duurt voordat het grootste element op het scherm verschijnt. Vaak is dat een afbeelding. Google beschouwt een LCP van 2,5 seconden of minder als goed.
• Dataverbruik: wie je shop via mobiele data bezoekt, zit er niet op te wachten om 5 MB te downloaden voor één T-shirt.

De drie knoppen waaraan je draait om een foto kleiner te maken

Bijna alle winst zit in deze drie keuzes. Pas ze het liefst in deze volgorde toe.

1. Pas de afmetingen aan op het echte formaat

Dit is de meest gemaakte fout: de foto uploaden zoals hij uit de camera of telefoon komt, 4.000 pixels breed of meer, om hem vervolgens in een vak van 800 pixels te tonen.

De browser downloadt het hele bestand en verkleint het daarna pas. Je betaalt dus het volledige gewicht en wint er niets aan scherpte mee.

Een paar algemene richtlijnen:

• Productfoto's met zoomfunctie: een lange zijde van 1.500 tot 2.000 pixels is meestal genoeg. Kijk ook wat je platform aanraadt (Shopify, WooCommerce, Lightspeed…).
• Headers en banners over de volle breedte: ongeveer 1.920 pixels breed.
• Thumbnails, iconen en foto's in blogteksten: de breedte waarop ze worden getoond, of het dubbele als je ze scherp wilt hebben op schermen met een hoge pixeldichtheid.

Halveer je de breedte en de hoogte, dan houd je een kwart van de pixels over. Daarom levert deze stap de meeste winst op.

2. Kies het juiste bestandsformaat

Niet elk formaat is voor hetzelfde bedoeld:

Voor een webshop is WebP op dit moment de meest evenwichtige keuze: flinke besparing, transparantie als je die nodig hebt en brede ondersteuning. Heb je je afbeeldingen in PNG of JPEG? Zet ze dan om naar WebP met de formaatconverter van Pictulab.

3. Comprimeer met precies de juiste kwaliteit

Lossy compressie gooit informatie weg die het oog nauwelijks opmerkt. Het draait allemaal om het kwaliteitsniveau:

• Tussen 75 en 85 (in JPEG of WebP) is meestal een goed startpunt voor productfoto's.
• Onder de 60 krijg je zichtbare compressieartefacten: blokjes, randjes rond contouren en kleurverlopen met trapjes.
• Boven de 90 wordt het bestand een stuk groter, terwijl je de verbetering amper ziet.

Een magisch getal bestaat niet. Een foto met veel detail, zoals een stof of een sieraad, kan slechter tegen compressie dan een glad product op een witte achtergrond. Bekijk het resultaat altijd op 100% zoom voordat je het goedkeurt.

Zo comprimeer je een foto gratis met Pictulab

De webtools van Pictulab zijn gratis en doen al het werk in je browser. Je afbeeldingen worden niet naar een server geüpload. Handig als je werkt met productfoto's die nog niet online staan.

1. Open de tool Afbeelding comprimeren en sleep je bestanden erin.
2. Stel de kwaliteit in. Begin rond de 80 en vergelijk het voor en na.
3. Wissel indien nodig van formaat met Afbeelding converteren, bijvoorbeeld van PNG naar WebP.
4. Download het resultaat en zet het op je website of in je webshop.

Omdat alles op je eigen apparaat gebeurt, hangt de snelheid af van je computer en niet van je internetverbinding.

Extra tips voor webshops

Verkoop je online? Dan zijn er nog een paar trucs om je productpagina's licht te houden.

Gebruik strakke, egale achtergronden

Een witte of effen achtergrond laat zich veel beter comprimeren dan een achtergrond met structuur, ruis of onregelmatige schaduwen. Zijn je foto's thuis gemaakt met een rommelige achtergrond? Dan kun je de achtergrond verwijderen en het product op een effen kleur zetten. Dat scheelt in bestandsgrootte én zorgt voor een consistente uitstraling van je catalogus.

Verwijder de metadata

Foto's van je telefoon of camera bevatten EXIF-gegevens: het cameramodel, de datum en soms je gps-locatie. Op het web heb je daar niets aan, ze nemen ruimte in en kunnen informatie prijsgeven die je liever niet deelt.

Zet lazy loading aan

Met het attribuut loading="lazy" worden afbeeldingen die verder naar beneden op de pagina staan pas gedownload als de bezoeker in de buurt scrolt. Veel platforms doen dit al standaard. Let op: gebruik het niet voor de hoofdafbeelding bovenaan de pagina, want dan vertraag je de LCP.

Bied meerdere formaten aan

Met srcset kiest de browser zelf de juiste versie voor het scherm. Een telefoon downloadt een afbeelding van 800 pixels, een groot beeldscherm een van 1.600. De meeste CMS'en en e-commerceplatforms maken die versies automatisch aan als je een afbeelding van goede grootte uploadt.

Veelgemaakte fouten bij het optimaliseren van afbeeldingen

• Dezelfde JPEG meerdere keren comprimeren. Elke lossy ronde gaat ten koste van de kwaliteit. Bewaar altijd het origineel en comprimeer vanaf dat bestand.
• PNG gebruiken voor foto's. Dat heeft alleen zin als je transparantie nodig hebt en geen WebP kunt gebruiken.
• Afbeeldingen alleen met CSS verkleinen. Is de afbeelding 4.000 pixels breed en toon je hem op 400 pixels via CSS, dan downloadt de bezoeker nog steeds alle 4.000.
• Te ver doorschieten bij je belangrijkste product. De hoofdfoto op een productpagina verdient wat meer kwaliteit dan een thumbnail.
• De afbeeldingen in je blog en categoriepagina's vergeten. Niet alleen productpagina's zijn zwaar.

Zo controleer je of het beter is geworden

Heb je je afbeeldingen geoptimaliseerd? Meet dan het resultaat:

• PageSpeed Insights (van Google) analyseert de pagina en wijst afbeeldingen aan die beter geoptimaliseerd kunnen worden of te groot zijn.
• Lighthouse, ingebouwd in de ontwikkelaarstools van Chrome, geeft een vergelijkbaar rapport vanuit je eigen browser.
• In het tabblad Netwerk van diezelfde tools zie je hoe groot elke afbeelding is die de pagina downloadt.

Kijk vooral naar de pagina's met de meeste bezoekers: de homepage, de belangrijkste categorieën en de productpagina's van je bestsellers.

Maak je afbeeldingen vandaag nog lichter

Je foto's comprimeren is een van de eenvoudigste ingrepen met veel effect die je op je website kunt doen. Schaal ze naar het juiste formaat, zet ze om naar WebP en comprimeer met verstand.

De tools van Pictulab om te comprimeren, te converteren en de achtergrond te verwijderen zijn gratis. Wil je daarnaast productfoto's maken of verbeteren met AI? Dan zie je bij elke generatie vooraf hoeveel tokens het kost. Begin gratis — 100 tokens cadeau, zonder creditcard.

Ook interessant:

• [ENLACE: Productfoto's met een witte achtergrond maken voor je webshop]
• [ENLACE: WebP, PNG of JPG: welk afbeeldingsformaat gebruik je op je website?]

Veelgestelde vragen

Hoe groot mag een afbeelding voor een website zijn?

Er bestaat geen officiële norm, maar als richtlijn kun je proberen de meeste productfoto's onder de 200 KB te houden en thumbnails een stuk kleiner. Het belangrijkste is dat de afbeelding de juiste afmetingen heeft en redelijk gecomprimeerd is.

Verlies je kwaliteit als je een foto comprimeert?

Bij lossy compressie gaat er wel informatie verloren, maar met een kwaliteit tussen 75 en 85 zie je het verschil zelden met het blote oog. Een foto verkleinen tot het formaat waarop hij wordt getoond, maakt voor de bezoeker ook geen zichtbaar verschil.

Is WebP of AVIF beter?

AVIF levert meestal kleinere bestanden op, maar het aanmaken duurt langer en sommige platforms en programma's ondersteunen het nog niet. WebP wordt breder ondersteund en is voor de meeste webshops een veilige keuze.

Is het veilig om foto's online te comprimeren?

Dat hangt af van de tool. Bij de webtools van Pictulab gebeuren comprimeren en converteren in je browser en worden je afbeeldingen niet naar een server geüpload.

Kan ik een foto ook op mijn telefoon kleiner maken?

Ja. Omdat de tools in de browser werken, kun je ze op je telefoon gebruiken zonder iets te installeren. Bij veel foto's of hele grote bestanden gaat het op een computer wel sneller.