Kort antwoord: Afbeelding SEO op Shopify is vooral een snelheidsprobleem, geen trefwoordprobleem. Productfoto's zijn het grootste element op de pagina en meestal het Largest Contentful Paint-element, dus de bestandsgrootte van de afbeelding, de pixeldimensies en de laadprioriteit beïnvloeden de rankings meer dan bestandsnamen. Upload op 2048 px aan de langste zijde, houd de eerste afbeelding onder ongeveer 200 KB, stel breedte en hoogte in, laadt alleen onder de vouw lui, en laat Shopify’s CDN de verkleinde WebP-varianten serveren. Deze gids behandelt formaten, bestandsgroottes, resolutie, aanpassen van formaat en formaten; voor alt-tekst zie product image alt text, voor de deelvoorbeeldweergave zie social sharing images.

Shopify levert afbeeldingen via zijn eigen CDN en genereert automatisch responsieve varianten, wat betekent dat veel generiek advies over afbeelding-SEO hier niet van toepassing is. Wat overblijft is een korte lijst, en het meeste gaat over gewicht en afmetingen.

Waarom afbeeldingen domineren in Shopify Core Web Vitals

Op een typische productpagina is de hero-afbeelding het LCP-element — het grootste element in het viewport, en het element dat Google meet. Als het 3,5 seconden duurt om te laden, faalt de pagina voor LCP, ongeacht hoe snel de rest van het thema is.

Twee dingen maken het traag: het bestand is groter dan de ruimte waarin het wordt weergegeven, en het heeft geen prioriteit. Een afbeelding van 2400 px die op 800 px wordt weergegeven, verspilt driekwart van de bytes. Shopify's image_url filter met een breedteparameter lost dit op, en de meeste moderne thema's gebruiken het al — maar afbeeldingen die in rich-text velden, blogteksten en aangepaste secties worden ingevoegd, omzeilen het meestal volledig.

Afbeeldingsgrootte, bestandsgrootte en resolutie zijn drie verschillende dingen

Het meeste advies over afbeeldingen faalt omdat het deze door elkaar haalt.

  • Afbeeldingsgrootte is pixeldimensies — 2048 × 2048. Het bepaalt hoe scherp de afbeelding kan zijn en hoe groot deze kan worden weergegeven.
  • Bestandsgrootte is bytes op schijf — 180 KB. Het bepaalt hoe lang het duurt om de afbeelding te downloaden. Het hangt af van dimensies, formaat, compressie en hoeveel detail de foto bevat.
  • Resolutie (DPI) is een printinstructie. Browsers negeren het. Een afbeelding van 1600 px bij 72 DPI en dezelfde afbeelding bij 300 DPI zijn dezelfde webafbeelding; de regel "opslaan op 72 DPI voor web" verandert niets behalve de metadata.

De variabele die er wel toe doet naast pixels is device pixel ratio. Een telefoon met een 2× scherm heeft ongeveer twee keer de CSS-breedte in echte pixels nodig om er scherp uit te zien: een productkaart van 400 px breed wil een afbeelding van 800 px op dat apparaat en een afbeelding van 400 px op een 1× monitor. Daar zijn srcset en sizes voor — het thema vermeldt de varianten die Shopify kan genereren en de browser kiest degene die past. Thema's die zijn gebouwd op Shopify's image_tag filter genereren deze automatisch; een handgeschreven img tag in een aangepaste sectie krijgt één formaat voor iedereen.

Doelen voor afbeeldingsbestandsgrootte per plaatsing

Een enkele "houd afbeeldingen onder 100 KB" regel is in beide richtingen verkeerd — te los voor miniaturen, te strak voor een banner over de volledige breedte. Werk per plaatsing:

Plaatsing Typische weergavebreedte Doel voor bestandsgrootte Waarom
Homepage hero / banner over de volledige breedte 1600–2000 px ≤ 200 KB (WebP), ≤ 300 KB (JPEG) Bijna altijd het LCP-element op de homepage
Eerste productafbeelding (galerij leidend) 800–1200 px ≤ 200 KB LCP-element op de productpagina
Extra galerijafbeeldingen 800–1200 px ≤ 100–150 KB Geladen bij interactie of lui
Collectie-grid kaarten 300–500 px ≤ 50 KB Dozijnen per pagina; de som is wat pijn doet
Blog inline afbeeldingen 700–900 px ≤ 100 KB Omzeilen meestal de variantlogica van het thema
Logo's, iconen, badges ≤ 300 px ≤ 10 KB, SVG waar mogelijk Herhaald op elke pagina

Dit zijn werkdoelen, geen wetten: een gedetailleerde stof close-up heeft meer bytes nodig dan een product op een witte achtergrond met dezelfde afmetingen. De test die ertoe doet is of de eerste afbeelding op de pagina binnen het LCP-budget blijft.

Formaten: JPEG, PNG, WebP en wat Shopify voor je doet

  • JPEG voor foto's. Exporteer kwaliteit 75–82 is het bereik waarin een productfoto zichtbaar stopt met veranderen, maar het bestand blijft krimpen.
  • PNG alleen voor platte grafieken die transparantie nodig hebben — logo's, badges, illustraties met harde randen. Een PNG-foto is routinematig vijf keer zo groot als dezelfde JPEG.
  • WebP is kleiner dan beide voor dezelfde visuele kwaliteit, en Shopify's CDN levert WebP automatisch aan browsers die het accepteren. Vooraf converteren voor uploaden levert daarom niets op in de winkel; wat wel helpt is dat een app die een te groot origineel vervangt door een WebP-versie elke variant verkleint die Shopify ervan genereert.
  • SVG voor logo's en iconen: resolutie-onafhankelijk en meestal een paar kilobytes.

Afbeeldingen aanpassen voor Shopify: waar te doen

Er zijn drie plaatsen om aan te passen, en ze zijn niet inwisselbaar.

Voor uploaden (voorkeur voor nieuwe afbeeldingen). Pas aan naar 2048 px aan de langste zijde, comprimeer dan. Elke afbeeldingseditor of een gratis webcompressor doet dit, en het betekent dat het origineel dat Shopify bewaart al slank is. Exporteer een hele shoot in batch op dezelfde grootte en beeldverhouding zodat het collectiegrid gelijk blijft.

Binnen Shopify, door het thema. Shopify's varianten zijn de leveringslaag: het thema vraagt om een breedte en het CDN levert die grootte. Dit is automatisch en correct, maar het verkleint alleen dimensies — een zwaar, ruisend origineel produceert nog steeds zwaardere varianten dan een schoon origineel zou doen.

Door een app die het origineel herschrijft. Dit is de enige route die afbeeldingen in de catalogus repareert zonder opnieuw te uploaden. RankEngine's Autopilot heeft een Auto Image Compression regel die te grote productafbeeldingen naar WebP converteert en het origineel vervangt via de Admin API (productCreateMedia, dan productDeleteMedia), en zijn activiteitenlogboek registreert elke conversie met de grootte ervoor en erna — zie Instellen van Autopilot-regels. Handmatig opnieuw uploaden heeft een kost die de app-route vermijdt: het verandert de afbeeldings-URL, wat links en gecachte verwijzingen naar het oude bestand verbreekt.

De prestatie- versus kwaliteitshandels-off, eerlijk gezegd

Compressiegidsen beloven vaak geen zichtbaar verlies. De eerlijke versie: er is een verlies, en de vraag is of een shopper het kan zien op de grootte waarin de afbeelding wordt weergegeven. Controleer het resultaat op de echte productpagina op 100%, op een telefoon, niet in de editor's ingezoomde voorbeeld. Banding in een gladde gradiënt, halo's op harde randen en wazige stoftextuur zijn de drie aanwijzingen; als je ze ziet, verhoog de kwaliteit met vijf punten en exporteer opnieuw. De winst van 82 naar 60 is klein in bytes en groot in artefacten, daarom is het nuttige bereik smal.

Wat daadwerkelijk te doen

Upload op 2048 px aan de langste zijde. Shopify genereert kleinere varianten van het origineel, dus groter uploaden verspilt opslag zonder iets te verbeteren. Kleiner uploaden betekent dat de zoomweergave zacht is.

Laat Shopify WebP serveren. Het doet dit automatisch op basis van de Accept-header van de browser. Handmatig converteren voor uploaden levert niets op en kost je de JPEG-terugval.

Stel breedte- en hoogteattributen in. Ontbrekende dimensies veroorzaken lay-outverschuivingen terwijl de afbeelding laadt, wat een directe CLS-straf is. Thema's die image_tag gebruiken krijgen dit gratis; handgeschreven img tags in een aangepaste sectie meestal niet.

Laad alles onder de vouw lui — en niets erboven. Een lazy-attribuut op de hero-afbeelding vertraagt het LCP-element en maakt de score slechter. De eerste afbeelding moet een hoge ophaalprioriteit hebben.

Afbeeldingspositie Laadstrategie Reden
Boven de vouw (hero / LCP-element) fetchpriority="high", geen lazy loading Lazy-loading verplaatst het grootste zichtbare schilderij-element later en maakt de score slechter
Boven de vouw (andere afbeeldingen) Eager (de standaard) Zichtbare afbeeldingen mogen niet worden uitgesteld
Onder de vouw loading="lazy" Off-screen afbeeldingen worden uitgesteld, waardoor het initiële paginagewicht wordt verminderd en bandbreedte wordt vrijgemaakt voor het LCP-element

Comprimeer voor uploaden als de bron een camerabestand is. Shopify's verwerking is niet agressief. Een 6 MB DSLR JPEG wordt een 900 KB variant; dezelfde afbeelding die eerst door een compressor wordt gehaald, wordt 200 KB zonder zichtbaar verschil.

Bestandsnamen en alt-tekst: de eerlijke versie

Bestandsnamen zijn een zwak signaal. Het hernoemen van IMG_4821.jpg naar blauwe-merino-sjaal.jpg is de moeite waard als je toch aan het uploaden bent, en is niet de moeite waard voor een bulk heruploadproject — heruploaden verbreekt bestaande afbeeldings-URL's en eventuele links ernaar.

Alt-tekst is belangrijker, vooral voor toegankelijkheid en Google Afbeeldingen, en het wordt goed behandeld in product image alt text. De gratis alt-tekstgenerator schrijft het één afbeelding tegelijk in de browser.

Het enige dat de moeite waard is om te meten

Voer een productpagina door PageSpeed Insights en kijk alleen naar twee getallen: het LCP-element (het zal de afbeelding benoemen) en de grootte ervan. Als het LCP-element een afbeelding van meer dan 200 KB is, is dat het hele project.

Alles anders — bestandsnamen, sitemaps, EXIF-gegevens — is afrondingsfout naast de afbeelding die twee seconden nodig heeft om te laden.

Het doen over een catalogus

De versie per pagina hiervan is eenvoudig. De catalogusversie is dat niet: bij 800 producten zijn de te grote afbeeldingen een subset, meestal de oudste of een batch geïmporteerd uit een leveranciersfeed.

RankEngine's snelheidsaudit rapporteert per-URL LCP met de naam van de overtredende afbeelding, en zijn afbeeldingshulpmiddelen markeren te grote bestanden en ontbrekende dimensies in de hele catalogus in plaats van per pagina; de compressie- en alt-tekstenregels repareren ze vervolgens tijdens de dagelijkse Autopilot-run binnen de per-winkel reparatielimiet, waarbij elke wijziging wordt geverifieerd tegen de winkel en omkeerbaar is vanuit het logboek.

Checklist voor je volgende afbeeldingsbatch

  1. Dezelfde beeldverhouding voor elke afbeelding in de collectie.
  2. 2048 px aan de langste zijde, geëxporteerd op JPEG-kwaliteit 75–82 (of WebP).
  3. Eerste afbeelding op de pagina onder 200 KB; grid-miniaturen onder 50 KB.
  4. Beschrijvende bestandsnaam als je toch aan het uploaden bent; nooit een herupload alleen om te hernoemen.
  5. Alt-tekst geschreven voor het product, niet het trefwoord.
  6. Na publicatie: PageSpeed Insights op één productpagina — bevestig het LCP-element en de grootte ervan.

Gerelateerd

  • Product image alt text — wat alt-tekst doet, wat het niet doet, en hoe je het schrijft.
  • Social sharing images — de Open Graph-voorbeeldweergave, die een andere afbeelding is met andere regels.
  • Gratis SEO-audit — wat de winkelcontrole controleert naast afbeeldingen, inclusief per-URL LCP.