Foto's optimaliseren voor je website: tools en tips voor 2026

Tegenwoordig bezoeken steeds meer mensen websites vanaf mobiele apparaten in plaats van op een desktop-scherm. Maar als afbeeldingen niet goed zijn geoptimaliseerd, kunnen ze wazig uitpakken of je website zelfs vertragen. Vooral op mobiele apparaten is het belangrijk dat afbeeldingen goed worden weergegeven. Te kleine afbeeldingen kunnen onscherp worden en grote bestanden kunnen juist voor langere laadtijden zorgen.

Door de juiste afmetingen en bestandsgrootte te kiezen, zorg je ervoor dat je afbeeldingen op verschillende schermformaten goed tot hun recht komen.

In deze handleiding lees je hoe je foto's optimaliseert voor je website, voor zowel desktop als mobiel. Ook ontdek je waar je op moet letten bij het kiezen van de juiste afmetingen en bestandsgrootte.

Beste afbeeldingsgrootte voor websites

De beste afbeeldingsgrootte hangt af van waar je de afbeelding op je website gebruikt. Een achtergrondafbeelding heeft bijvoorbeeld andere afmetingen nodig dan een afbeelding in een blogpost. Let daarbij op de volgende punten:

• Pixelbreedte: Voor een schermvullende afbeelding is een breedte van ongeveer 2500 pixels meestal voldoende. Een kleinere afbeelding kan onscherp worden wanneer deze over de volledige breedte van het scherm wordt weergegeven.
• Afmetingen: Kies de afmetingen op basis van het type afbeelding en de plek waar deze op je website komt te staan.
• Bestandsgrootte: Grote bestanden kunnen de snelheid van je website beïnvloeden. Houd afbeeldingen daarom zo klein mogelijk zonder zichtbaar kwaliteitsverlies.
• Bestandstype: JPEG is geschikt voor foto's, terwijl PNG handig is voor bijvoorbeeld logo's, lijntekeningen en afbeeldingen met een transparante achtergrond. Shopify kan afbeeldingen automatisch in moderne formaten zoals WebP en AVIF weergeven wanneer de browser van de bezoeker deze ondersteunt.
• Alt-tekst: Een alt-tekst beschrijft wat er op een afbeelding te zien is en maakt je website toegankelijker voor bezoekers die een schermlezer gebruiken. Houd de beschrijving kort en duidelijk.

Beste afmetingen van foto's voor desktop en mobiel

In de onderstaande tabel vind je aanbevolen afmetingen voor verschillende soorten afbeeldingen:

Zie deze afmetingen vooral als richtlijnen. Bij een responsief webdesign wordt de weergave automatisch aangepast aan het scherm van de bezoeker. Het is daarom meestal niet nodig om voor ieder schermformaat een aparte afbeelding te uploaden.

Richtlijnen voor afbeeldingsgrootte op websites

Op websites kom je verschillende soorten afbeeldingen tegen. De vijf meest voorkomende zijn:

1. Achtergrondafbeeldingen
2. Hero-afbeeldingen
3. Website banners
4. Blog-afbeeldingen
5. Logo's

Voor elk type afbeelding gelden andere aanbevolen afmetingen en bestandsgroottes.

Achtergrondafbeeldingen

Achtergrondafbeeldingen zijn meestal de grootste afbeeldingen op een website. Ze worden bijvoorbeeld gebruikt als achtergrond op een homepage of landingspagina.

Fietsenmerk Cowboy gebruikt bijvoorbeeld een grote achtergrondafbeelding op de homepage om het product centraal te zetten. De afbeelding vult het scherm, ongeacht het apparaat waarop je de website bekijkt.

Aanbevolen afbeeldingsbreedte: 2560 pixels

Aanbevolen afbeeldingshoogte: 1400 pixels

Beeldverhouding: 16:9

Aanbevolen maximale bestandsgrootte: 20 MB

Hero-afbeeldingen

Hero-afbeeldingen lijken op achtergrondafbeeldingen, maar nemen meestal minder ruimte in de hoogte in. Daardoor kun je naast de afbeelding meer tekst of andere content boven de vouw laten zien.

In het voorbeeld hierboven gebruikt Veloretti een brede hero-afbeelding die het scherm vult, maar ook voldoende ruimte overlaat voor de content eronder.

Aanbevolen afbeeldingsbreedte: 1280 tot 2500 pixels
Aanbevolen afbeeldingshoogte: 720 tot 900 pixels
Beeldverhouding: 16:9
Aanbevolen maximale bestandsgrootte: 10 MB

Website banners

Bannerafbeeldingen zijn er in verschillende formaten. Welk formaat het beste werkt, hangt af van waar je de banner plaatst en wat je ermee wilt laten zien. Een bekend voorbeeld is een advertentiebanner.

Voor advertenties via Google Ads gelden verschillende formaten. Google maakt daarbij onderscheid tussen statische beeldadvertenties en responsieve display-advertenties. Responsieve advertenties worden automatisch aangepast aan de beschikbare advertentieruimte. Voor statische beeldadvertenties kun je de richtlijnen van Google Ads raadplegen.

Aanbevolen afbeeldingsbreedte: afhankelijk van het advertentieplatform

Aanbevolen afbeeldingshoogte: afhankelijk van het advertentieplatform

Beeldverhouding: verschillend

Aanbevolen maximale bestandsgrootte: afhankelijk van het advertentieplatform

Blog-afbeeldingen

Blogafbeeldingen kunnen verschillende formaten hebben. Voor de belangrijkste afbeelding bovenaan een blogpost is het vooral belangrijk dat je steeds dezelfde afmetingen gebruikt. Zo krijgt je blog een consistente uitstraling.

Het instellen van de juiste weergavegrootte helpt daarnaast om afbeeldingen goed in je ontwerp te laten passen.

Aanbevolen afbeeldingsbreedte: 1200 pixels
Aanbevolen afbeeldingshoogte: 800 pixels
Beeldverhouding: 3:2
Aanbevolen maximale bestandsgrootte: 3 MB

Logo's

Je logo is meestal een van de kleinste afbeeldingen op je website, afgezien van het favicon in je browser. Welke afmetingen het beste werken, hangt af van het ontwerp van je logo.

Een vierkant formaat van 1:1 werkt goed voor veel logo's. Voor langere merknamen of logo's die vooral uit tekst bestaan, kan een rechthoekig formaat beter werken.

Aanbevolen afbeeldingsbreedte: 100 pixels
Aanbevolen afbeeldingshoogte: 100 pixels
Beeldverhouding: 1:1, 2:3 of 4:1
Aanbevolen maximale bestandsgrootte: 1 MB

Foto's optimaliseren voor mobiele websites

1. Kies de juiste afmetingen

Op een klein scherm moeten afbeeldingen scherp blijven, ook wanneer bezoekers erop inzoomen. Kies daarom afbeeldingen met een hoge resolutie, maar houd tegelijkertijd rekening met de bestandsgrootte. Zo voorkom je dat grote afbeeldingen je website onnodig vertragen.

Gebruik voor vergelijkbare afbeeldingen bij voorkeur dezelfde beeldverhouding. Je kunt productafbeeldingen bijvoorbeeld allemaal vierkant maken. Dat zorgt voor een consistente uitstraling en werkt goed op verschillende schermformaten.

💡 Op Shopify kunnen product- en collectieafbeeldingen maximaal 5000 x 5000 pixels of 25 megapixels zijn en moet de bestandsgrootte onder de 20 MB blijven. Voor vierkante productafbeeldingen wordt 2048 x 2048 pixels aanbevolen. Bekijk ook richtlijnen voor productafbeeldingen.

2. Houd rekening met de bestandsgrootte

Grote afbeeldingsbestanden kunnen ervoor zorgen dat je website langzamer laadt, vooral op mobiele apparaten. Probeer daarom een goede balans te vinden tussen beeldkwaliteit en bestandsgrootte.

Wil je een afbeelding kleiner maken? Dan kun je een online tool gebruiken om de afmetingen aan te passen. Shopify optimaliseert afbeeldingen daarnaast automatisch voor verschillende schermformaten.

3. Controleer hoe afbeeldingen op mobiel worden weergegeven

Shopify past afbeeldingen automatisch aan verschillende schermformaten aan. Dat is belangrijk, omdat een afbeelding op een liggend desktopscherm heel anders kan worden weergegeven dan op het staande scherm van een smartphone. Controleer daarom altijd hoe je afbeeldingen er op beide apparaten uitzien.

Let daarbij ook op de bestandsgrootte. Afbeeldingen met een hoge resolutie zien er scherp uit, maar grote bestanden kunnen je website vertragen. Kies daarom voor de kleinst mogelijke bestandsgrootte waarbij de beeldkwaliteit goed blijft.

Hoewel Shopify-themes responsive zijn en afbeeldingen automatisch aanpassen aan het scherm van de bezoeker, blijft het dus belangrijk om zelf te controleren of alles goed wordt weergegeven. Zo voorkom je bijvoorbeeld dat belangrijke delen van een afbeelding op mobiel wegvallen en zorg je voor een prettige winkelervaring.

Waarom is de afbeeldingsgrootte belangrijk voor websites?

Voor websites is de afbeeldingsgrootte om drie redenen belangrijk:

• Het zorgt voor een betere gebruikerservaring.
• Het verbetert de laadsnelheid van je website.
• Het kan bijdragen aan een betere vindbaarheid in zoekmachines.

1. Een betere gebruikerservaring

Afbeeldingen met de juiste afmetingen dragen bij aan een goede gebruikerservaring. Bezoekers kunnen belangrijke details goed bekijken, zonder dat afbeeldingen onscherp, korrelig of verkeerd uitgesneden worden weergegeven.

Afbeeldingen van slechte kwaliteit kunnen je website minder professioneel laten overkomen. Klanten kunnen daardoor zelfs gaan twijfelen aan de kwaliteit van je producten of de betrouwbaarheid van je website. Scherpe afbeeldingen met de juiste afmetingen helpen juist om je producten goed te presenteren en vertrouwen te wekken.

Bekijk bijvoorbeeld hoe duurzame schoenenwinkel Allbirds afbeeldingen gebruikt om verschillende kenmerken van producten duidelijk te laten zien:

2. Verbeter de laadsnelheid van je website

Grote afbeeldingsbestanden kunnen ervoor zorgen dat een pagina langer nodig heeft om te laden. Door afbeeldingen goed te optimaliseren, kun je de bestandsgrootte verkleinen zonder onnodig veel beeldkwaliteit te verliezen.

Met Google PageSpeed Insights kun je de snelheid van je website controleren. Een belangrijke meetwaarde is Largest Contentful Paint (LCP). Deze meet hoe lang het duurt voordat het grootste zichtbare element op een pagina is geladen. Google adviseert een LCP van maximaal 2,5 seconden voor een goede gebruikerservaring.

Hieronder zie je een voorbeeld uit PageSpeed Insights, waarin onder andere de laadtijd van de grootste afbeelding wordt gemeten.

De helft van de klanten zegt af te haken als het laden van een webpagina langer dan drie seconden duurt. Dit laat zien hoe belangrijk het is om je paginasnelheid te optimaliseren en te voorkomen dat bezoekers afhaken.

3. Verbeter de rankings van je website

De snelheid en gebruiksvriendelijkheid van een pagina kunnen ook een rol spelen bij de vindbaarheid in zoekmachines. Google gebruikt onder andere Core Web Vitals bij het beoordelen van de gebruikerservaring van een pagina. Goede scores alleen zorgen niet automatisch voor een hogere positie, maar maken wel deel uit van het grotere geheel.

Door afbeeldingen te optimaliseren, kun je de laadtijd en gebruikerservaring van je website verbeteren. Daarnaast helpen bijvoorbeeld beschrijvende bestandsnamen en alt-teksten zoekmachines om afbeeldingen beter te begrijpen. Lees meer over SEO en het optimaliseren van afbeeldingen voor Google.

Wat is het beste type afbeeldingsbestand om te gebruiken?

Het juiste bestandsformaat helpt om de beeldkwaliteit hoog en de bestandsgrootte zo klein mogelijk te houden. Welk formaat het beste werkt, hangt af van het soort afbeelding en waarvoor je deze gebruikt.

JPEG

JPEG (of JPG) is een veelgebruikt bestandsformaat voor digitale afbeeldingen. Het biedt een goede balans tussen bestandsgrootte en beeldkwaliteit en is vooral geschikt voor foto's en andere afbeeldingen met veel kleuren.

JPEG gebruikt lossy compressie. Daarbij gaat tijdens het comprimeren een deel van de beeldinformatie verloren, waardoor het bestand kleiner wordt.

PNG

PNG gebruikt lossless compressie, waarbij er geen beeldinformatie verloren gaat door de compressie. Het formaat ondersteunt ook transparantie en is daarom geschikt voor bijvoorbeeld logo's, iconen en afbeeldingen met een transparante achtergrond.

PNG-bestanden zijn vaak groter dan JPEG-bestanden, maar zijn vooral handig voor afbeeldingen waarbij scherpe lijnen en transparantie belangrijk zijn.

SVG

SVG (Scalable Vector Graphics) is een vectorformaat. In tegenstelling tot afbeeldingen die uit pixels bestaan, kan een SVG zonder kwaliteitsverlies groter of kleiner worden gemaakt.

Dat maakt SVG vooral geschikt voor logo's, iconen en andere eenvoudige grafische elementen die in verschillende formaten worden weergegeven.

HEIC

HEIC (High Efficiency Image Container) is een efficiënt afbeeldingsformaat dat onder andere door Apple-apparaten wordt gebruikt. Het kan afbeeldingen van hoge kwaliteit opslaan in relatief kleine bestanden.

De ondersteuning op het web is echter beperkter dan bij veel andere afbeeldingsformaten. Voor afbeeldingen die rechtstreeks op een website worden gebruikt, zijn formaten zoals JPEG, PNG en WebP daarom vaak praktischer.

WebP

WebP is een modern afbeeldingsformaat dat door Google is ontwikkeld. Het ondersteunt zowel lossy als lossless compressie en kan een goede beeldkwaliteit combineren met een relatief kleine bestandsgrootte.

WebP wordt inmiddels door de belangrijkste moderne browsers ondersteund. Shopify kan afbeeldingen bovendien automatisch in WebP of AVIF aanbieden wanneer de browser van de bezoeker dit ondersteunt.

GIF

GIF is vooral bekend vanwege de ondersteuning van eenvoudige animaties. Het formaat ondersteunt maximaal 256 kleuren en is daardoor minder geschikt voor foto's en andere afbeeldingen met veel kleurnuances.

Voor statische afbeeldingen zijn modernere formaten meestal een betere keuze, maar GIF wordt nog steeds gebruikt voor korte animaties. Shopify kan GIF's automatisch als geanimeerde WebP-bestanden aanbieden om de bestandsgrootte te verkleinen.

TIFF

TIFF (Tagged Image File Format) is een afbeeldingsformaat van hoge kwaliteit dat vooral wordt gebruikt voor beeldbewerking en drukwerk. De bestanden zijn vaak groot en TIFF is daarom minder geschikt voor afbeeldingen die rechtstreeks op een website worden weergegeven.

Shopify accepteert TIFF voor onder andere productafbeeldingen, maar TIFF-bestanden die als thema-afbeelding worden geüpload, worden omgezet naar JPEG of PNG.

Hoe vind je de afbeeldingsgrootte op een website?

De snelste manier om de grootte van een afbeelding op een webpagina te bekijken zonder deze te downloaden, is via de Inspecteer-tool van je browser. Deze methode werkt op Mac en Windows en kun je onder andere gebruiken in Chrome, Firefox en Safari.

Ga naar de webpagina en klik met de rechtermuisknop op de afbeelding die je wilt controleren. Kies vervolgens Inspecteren.

Vervolgens krijg je de HTML-code van de pagina te zien. In het inspectiepaneel wordt de code van de geselecteerde afbeelding gemarkeerd. Beweeg je met de muis over de relevante code, dan wordt ook de bijbehorende afbeelding op de pagina gemarkeerd.

Hier kun je onder andere zien hoeveel pixels de afbeelding op dat moment op de pagina inneemt. Pas je de grootte van het browservenster aan, dan kan ook het weergegeven formaat veranderen.

Wil je de oorspronkelijke afmetingen van de afbeelding bekijken? Beweeg dan met je muis over de afbeeldingslink in de HTML-code. Klik op het kruisje (X) rechtsboven om de Inspecteer-tool weer te sluiten.

Tools om foto's te optimaliseren voor websites

Online tools maken het makkelijk om afbeeldingen te verkleinen, comprimeren of op een andere manier te optimaliseren. Sommige tools werken met losse afbeeldingen, terwijl Shopify-apps meerdere afbeeldingen in je webshop automatisch kunnen optimaliseren.

Een aantal opties zijn:

• Shopify Image Resizer
• Squirai Image Optimizer
• LoyaltyHarbour Image Optimizer

Image Resizer

Met Shopify's gratis Image Resizer kun je snel de afmetingen van afbeeldingen aanpassen. Dat is bijvoorbeeld handig als je afbeeldingen wilt gebruiken voor verschillende marketingkanalen of sociale media.

Je kunt afbeeldingen uploaden en vervolgens het gewenste formaat kiezen, zodat je ze niet handmatig hoeft bij te snijden of te verkleinen.

Squirai Image Optimizer

Squirai Image Optimizer is een Shopify-app waarmee je afbeeldingen in je webshop kunt optimaliseren. De app kan onder andere afbeeldingen comprimeren en SEO-elementen van afbeeldingen optimaliseren.

Afhankelijk van de instellingen kun je de optimalisatie van afbeeldingen automatiseren, zodat je niet iedere afbeelding afzonderlijk hoeft aan te passen.

LoyaltyHarbour Image Optimizer

LoyaltyHarbour Image Optimizer kan afbeeldingen automatisch comprimeren en regelmatig controleren of er nieuwe afbeeldingen zijn toegevoegd die geoptimaliseerd moeten worden.

Je kunt met de app ook alt-teksten en bestandsnamen optimaliseren en PNG-bestanden converteren naar JPEG.

Heb je toegang tot Photoshop, dan kun je afbeeldingen daar ook mee verkleinen en comprimeren. Dit vraagt wel wat meer handmatig werk dan bij de bovenstaande tools.

Problemen met foto's op je website oplossen

Als je een website beheert, kun je af en toe problemen tegenkomen met de weergave van afbeeldingen. Denk aan verkeerde afmetingen, trage laadtijden, een slechte beeldkwaliteit of afbeeldingen die helemaal niet worden weergegeven. Hieronder vind je oplossingen voor een aantal veelvoorkomende problemen.

Verkeerde afbeeldingsgrootte

Probleem: Afbeeldingen worden te groot of te klein weergegeven, waardoor de lay-out van een pagina wordt verstoord.

Oplossing: Gebruik je een websitethema of template? Controleer dan welke afbeeldingsformaten voor het ontwerp worden aanbevolen. Bekijk je website vervolgens op verschillende schermformaten om te controleren of de afbeeldingen goed worden weergegeven.

Trage laadtijden

Probleem: Afbeeldingen laden langzaam of zorgen ervoor dat de rest van de pagina langer nodig heeft om te laden.

Oplossing: Controleer eerst de bestandsgrootte en het bestandsformaat van je afbeeldingen. Grote bestanden kun je comprimeren of verkleinen. Voor foto's zijn JPEG en WebP bijvoorbeeld geschikte formaten, terwijl SVG vooral geschikt is voor logo's en eenvoudige grafische elementen.

Slechte beeldkwaliteit

Probleem: Afbeeldingen zien er korrelig of wazig uit.

Oplossing: Controleer of de afbeelding groot genoeg is voor het formaat waarin deze op je website wordt weergegeven. Een kleine afbeelding die sterk wordt uitvergroot, kan onscherp worden. Gebruik in dat geval een grotere versie van de oorspronkelijke afbeelding.

Gaat er door compressie te veel kwaliteit verloren? Pas dan de compressie-instellingen aan of kies een bestandsformaat dat beter past bij de afbeelding.

Afbeeldingen worden helemaal niet weergegeven

Probleem: Een afbeelding wordt niet geladen of er verschijnt een gebroken afbeeldingslink.

Oplossing: Controleer de bron-URL van de afbeelding. Deze moet naar het juiste afbeeldingsbestand verwijzen. Controleer ook of de bestandsnaam en bestandsextensie in de URL overeenkomen met het oorspronkelijke bestand.

Afbeeldingsgrootte optimaliseren voor websites

Afbeeldingen hebben niet alleen invloed op hoe je website eruitziet, maar ook op de gebruikerservaring en de snelheid van je website.

Grote afbeeldingsbestanden kunnen pagina's vertragen, terwijl te kleine afbeeldingen onscherp of korrelig kunnen worden weergegeven. Kies daarom de juiste afmetingen en een geschikt bestandsformaat en probeer een goede balans te vinden tussen beeldkwaliteit en bestandsgrootte.