Afbeeldingen optimaliseren Shopify: sneller laden én hoger ranken in 2026

Slecht geoptimaliseerde Shopify-afbeeldingen vertragen je webshop en kosten je organisch verkeer. Door bestandsformaat, bestandsgrootte, alt-tekst en laadvolgorde correct in te stellen, verbeter je zowel de Google Core Web Vitals als de vindbaarheid in AI-gestuurde zoekmachines zoals Google AI Overviews en Perplexity. Deze gids geeft een concrete aanpak voor 2026.

Waarom beeldoptimalisatie direct invloed heeft op je Shopify-prestaties

Ongeoptimaliseerde productafbeeldingen zijn in 2026 de grootste oorzaak van trage Shopify-winkels. Google PageSpeed Insights laat consistent zien dat afbeeldingen tot 60–70% van het totale paginagewicht uitmaken. Een trage winkel scoort lager op de Core Web Vitals-meting Largest Contentful Paint (LCP), die Google direct verwerkt in zijn rankingalgoritme.

Shopify laadt thema's via zijn eigen CDN (het Shopify Content Delivery Network), maar dat neemt het werk van goede beeldoptimalisatie niet over. Een JPEG van 4 MB blijft zwaar, ongeacht het CDN. De Shopify-documentatie uit 2025 bevestigt dat afbeeldingen automatisch worden geconverteerd naar WebP wanneer de browser dat ondersteunt, maar de uitgangsresolutie en het uitgangsformaat bij het uploaden bepaal jij zelf.

De juiste bestandsformaten kiezen voor productfoto's en banners

WebP is in 2026 het standaard aanbevolen formaat voor Shopify-productafbeeldingen. WebP levert gemiddeld 30% kleinere bestanden dan JPEG bij vergelijkbare visuele kwaliteit, volgens Google's eigen benchmarks. Voor afbeeldingen met transparantie kies je WebP boven PNG, omdat PNG-bestanden aanzienlijk groter zijn.

AVIF is de opvolger van WebP en wordt ondersteund door Chrome 85+, Firefox 93+ en Safari 16+. Voor doelgroepen op moderne browsers levert AVIF nog compactere bestanden op. Shopify converteert geüploade JPEG- en PNG-bestanden automatisch naar WebP via zijn beeldpipeline, maar AVIF-conversie vereist in 2026 een externe app of een handmatige workflow.

SVG is de beste keuze voor logo's, iconen en grafische elementen met harde lijnen. SVG-bestanden schalen verliesvrij en zijn doorgaans kleiner dan 10 KB, wat de paginasnelheid ten goede komt.

Afbeeldingen comprimeren zonder zichtbaar kwaliteitsverlies

Compressie is de snelste manier om de laadtijd van een Shopify-winkel te verbeteren. Tools zoals Squoosh (van Google), ImageOptim (macOS) en TinyPNG comprimeren bestanden zonder merkbaar kwaliteitsverlies bij een instelling van 75–85% kwaliteit voor JPEG of WebP. Voor de meeste productafbeeldingen volstaat een resolutie van 2048 × 2048 pixels; hogere resoluties voegen geen zichtbare waarde toe op een standaard 27-inch monitor bij 2x retina.

Als vuistregel voor het optimaliseren van Shopify-productafbeeldingen geldt: houd productfoto's onder de 200 KB en bannerafbeeldingen onder de 400 KB. Lifestyle- en hero-afbeeldingen mogen iets groter zijn, maar overschrijd de 500 KB niet. Shopify's eigen Theme Inspector-tool (beschikbaar via de Shopify CLI) toont precies welke afbeeldingen de LCP-score verlagen.

Batch-compressie via de app Crush.pics of via een Node.js-script op basis van de Sharp-bibliotheek (versie 0.33, uitgebracht in november 2023) maakt het mogelijk honderden afbeeldingen in één keer te verwerken. Sharp ondersteunt AVIF-output natively en is daarmee een efficiënte keuze voor grotere catalogi.

Alt-tekst schrijven die zowel Google als AI-zoekmachines begrijpt

Alt-tekst is de tekstuele beschrijving die schermlezers en zoekmachines gebruiken om een afbeelding te interpreteren. Google's John Mueller bevestigde in zijn Search Central-sessie van september 2024 dat alt-tekst een directe rankingfactor is voor Google Afbeeldingen zoeken en een indirecte factor voor organische webzoekresultaten.

Schrijf alt-tekst als een beknopte, beschrijvende zin van maximaal 125 tekens. Keyword-stuffing in alt-tekst vermijd je; beschrijf wat er feitelijk op de afbeelding staat. Voor een productafbeelding van een houten snijplank schrijf je: "Houten snijplank van acaciahout met sapgroef, 40 × 30 cm." Dat is concreet, entiteitrijk en bruikbaar voor zowel Google als Perplexity.

In Shopify pas je alt-tekst aan via het beheerpaneel onder Producten → [productnaam] → Media, of via de Storefront API bij een headless Shopify-configuratie. Automatische alt-tekst via ChatGPT-API-integraties — zoals de Shopify Magic-functie uit 2024 — levert een bruikbaar startpunt, maar controleer de output altijd op nauwkeurigheid.

Lazy loading en laadprioriteit instellen in Shopify-thema's

Lazy loading zorgt ervoor dat afbeeldingen buiten het zichtbare schermgebied pas laden wanneer de gebruiker ernaar toe scrolt. Shopify Dawn (het standaardthema, versie 14 uitgebracht in 2025) implementeert lazy loading standaard via het HTML-attribuut loading="lazy" op alle afbeeldingen buiten de viewport.

De hero-afbeelding bovenaan de pagina krijgt het attribuut loading="eager" en fetchpriority="high". Dit vertelt de browser dat deze afbeelding prioriteit heeft, wat de LCP-score direct verbetert. Controleer via de Chrome DevTools-tab "Network" of de hero-afbeelding inderdaad met hoge prioriteit wordt geladen; een lage prioriteit leidt tot een LCP van meer dan 2,5 seconden, wat Google als "needs improvement" classificeert.

Responsive images vormen een tweede pijler van goede laadprestaties. Shopify genereert automatisch meerdere formaten van elke afbeelding (klein, medium, groot, master) en het Liquid-filter image_url geeft toegang tot die formaten. Gebruik het srcset-attribuut in combinatie met sizes om de browser het juiste formaat te laten kiezen op basis van de werkelijke breedte van de container:

<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="{{ product.featured_image.alt }}"
  loading="lazy"
  width="800"
  height="800"
>

Het expliciet opgeven van width en height voorkomt Cumulative Layout Shift (CLS), een tweede Core Web Vitals-factor.

Bestandsnamen en gestructureerde data als extra SEO-signalen

Bestandsnamen zijn een onderschat SEO-element bij het optimaliseren van productafbeeldingen in Shopify. Google Afbeeldingen gebruikt de bestandsnaam als signaal om de inhoud van een afbeelding te bepalen. Hernoem bestanden van IMG_4821.jpg naar beschrijvende namen zoals acacia-snijplank-40x30cm-sapgroef.webp vóór het uploaden.

Gebruik koppeltekens als scheidingsteken, geen underscores — Google behandelt koppeltekens als woordscheidingsteken en underscores niet. Dit staat al jaren gedocumenteerd in de Google Search Central-documentatie en blijft in 2026 van kracht.

Gestructureerde data (Schema.org Product-markup) versterkt de beeldoptimalisatie verder. Voeg een image-property toe aan het Product-schema met de volledige URL van de primaire productafbeelding. Shopify-thema's zoals Dawn bevatten al basisschema's, maar je kunt deze uitbreiden via een thema-aanpassing of een app als JSON-LD for SEO (compatibel met Shopify 2.0-thema's).

Google's Rich Results Test (beschikbaar via search.google.com/test/rich-results) valideert de schema-implementatie en toont welke eigenschappen Google herkent. Een correcte Product-markup met afbeelding vergroot de kans op een rich snippet in de zoekresultaten, inclusief Google Lens-zichtbaarheid.

Voor grote catalogi (meer dan 500 productafbeeldingen) is een XML-sitemap met afbeeldingen een efficiënte manier om Google te informeren over nieuwe en gewijzigde afbeeldingen. Shopify genereert automatisch een sitemap.xml, maar voegt geen afbeelding-specifieke tags toe. Apps zoals Yoast SEO voor Shopify (gelanceerd in 2023) of een aangepaste Liquid-template voegen <image:image>-tags toe aan de sitemap.

Veelgestelde vragen

Wat is de maximale afbeeldingsgrootte in Shopify? Shopify accepteert afbeeldingen tot 20 MB per bestand en een maximale resolutie van 5000 × 5000 pixels. Voor optimale prestaties houd je productafbeeldingen onder de 200 KB met een maximale resolutie van 2048 × 2048 pixels.

Converteert Shopify mijn JPEG automatisch naar WebP? Ja. Shopify converteert JPEG- en PNG-bestanden automatisch naar WebP voor browsers die dat formaat ondersteunen. AVIF-conversie is in 2026 niet standaard ingebakken in Shopify's native beeldpipeline en vereist een externe oplossing.

Hoe pas ik alt-tekst aan voor meerdere afbeeldingen tegelijk in Shopify? Via de Shopify Admin API (REST of GraphQL) update je alt-tekst in bulk. Voor niet-technische gebruikers bieden apps zoals Bulk Image Edit (beschikbaar in de Shopify App Store) een spreadsheet-interface voor het massaal aanpassen van alt-tekst.

Heeft lazy loading een negatieve invloed op SEO? Nee, zolang je loading="lazy" niet toepast op de hero-afbeelding of andere afbeeldingen boven de vouw. Googlebot crawlt lazy-loaded afbeeldingen zonder problemen, zoals Google bevestigde in zijn Search Central-documentatie van 2021 — een standpunt dat in 2026 ongewijzigd blijft.

Wat is het verschil tussen WebP en AVIF voor Shopify-productafbeeldingen? WebP biedt gemiddeld 30% betere compressie dan JPEG; AVIF biedt nog eens 20–30% betere compressie dan WebP bij vergelijkbare kwaliteit. AVIF heeft hogere decodeerkosten op oudere apparaten. Voor een brede doelgroep is WebP in 2026 de meest compatibele keuze.

Hoe controleer ik of afbeeldingen de LCP-score verlagen? Gebruik Google PageSpeed Insights (pagespeed.web.dev) of de Chrome DevTools Lighthouse-audit. Beide tools tonen welke afbeelding de LCP veroorzaakt en geven concrete aanbevelingen. Voor doorlopende monitoring integreert Google Search Console de Core Web Vitals-rapportage rechtstreeks in het dashboard onder "Ervaring".