Geoptimaliseerde afbeeldingen maken je webshop sneller en beter vindbaar

Shopify-afbeeldingen optimaliseren betekent dat je productfoto's, banners en andere beelden zo klein mogelijk maakt zonder zichtbaar kwaliteitsverlies, en ze zo beschrijft dat zoekmachines begrijpen wat erop staat. Dat heeft direct effect op twee dingen die voor elke webshop tellen: snelheid en vindbaarheid.

Afbeeldingen zijn het zwaarste onderdeel van de meeste productpagina's. Volgens Shopify's eigen ontwikkelaarsdocumentatie is een afbeelding doorgaans het Largest Contentful Paint-element, de meetwaarde die aangeeft wanneer de grootste zichtbare content klaar is met laden en die direct samenhangt met hoe snel een pagina aanvoelt. Laadt je hoofdfoto traag, dan voelt je hele webshop traag.

Daarnaast bepalen alt-teksten en bestandsnamen of je producten gevonden worden via Google Afbeeldingen, en of AI-zoekmachines begrijpen wat je verkoopt.

Het aanbevolen afbeeldingsformaat voor Shopify is 2048 x 2048 pixels

Voor vierkante productfoto's is 2048 x 2048 pixels het formaat dat in Shopify meestal het beste wordt weergegeven. Product- en collectieafbeeldingen mogen maximaal 5000 x 5000 pixels (25 megapixel) groot zijn en moeten onder de 20 MB blijven om geüpload te kunnen worden, terwijl Shopify voor vierkante productfoto's 2048 x 2048 pixels als best werkend formaat noemt.

Minstens zo belangrijk als het formaat is consistentie. Wil je dat productfoto's op collectiepagina's even groot worden weergegeven, dan gebruik je voor alle hoofdafbeeldingen dezelfde beeldverhouding. Een mix van staande, liggende en vierkante foto's zorgt voor een onrustig raster en verspringende kaarten. Vierkant is de veiligste keuze, maar een staande verhouding kan prima werken voor bijvoorbeeld mode, zolang je hem overal aanhoudt.

Het juiste bestandstype hangt af van het soort afbeelding

Voor productfoto's en sfeerbeelden gebruik je JPEG, voor logo's, iconen en afbeeldingen met een transparante achtergrond PNG of SVG. Shopify accepteert daarnaast meer bestandstypes: ook PSD, TIFF, BMP, GIF, SVG, HEIC en WebP worden geaccepteerd.

Je hoeft je afbeeldingen dus niet zelf naar WebP of AVIF om te zetten. Upload een goed verkleinde JPEG of PNG en laat Shopify de rest doen, zoals hieronder uitgelegd.

Dit regelt Shopify automatisch voor je afbeeldingen

Shopify optimaliseert afbeeldingen voor een groot deel automatisch via zijn eigen afbeeldings-CDN. Bij het uploaden wordt de bestandsgrootte automatisch geoptimaliseerd, en het CDN herkent welke bestandsformaten de browser van de bezoeker ondersteunt. Daarnaast maakt Shopify bij elke upload automatisch verschillende formaten aan voor verschillende plekken in je thema, zoals een grote versie voor de productpagina en een compacte versie voor collectiepagina's.

Volgens Shopify's ontwikkelaarsdocumentatie levert het CDN automatisch WebP of AVIF wanneer de browser dat ondersteunt, wat de bestandsgrootte met 25 tot 35 procent verkleint. Een compressie-app die precies dit belooft, doet voor een modern thema dus grotendeels dubbel werk.

Het woord "thema" komt in die tabel niet voor niets vaak terug. Shopify levert de techniek, maar je thema bepaalt of die techniek ook echt wordt gebruikt.

De automatische optimalisatie werkt niet voor elke afbeelding

Shopify optimaliseert alleen afbeeldingen die het thema via de eigen Liquid-filters image_url en image_tag inlaadt. Wie afbeeldings-URL's handmatig opbouwt, slaat de automatische optimalisaties over, waaronder responsieve formaten, breedte- en hoogte-attributen, focuspunten, omzetting naar WebP en AVIF en de CDN-instellingen.

In de praktijk betekent dit dat de volgende afbeeldingen vaak buiten de optimalisatie vallen:

• Hardcoded afbeeldingen in maatwerkcode, bijvoorbeeld een banner die met een vaste URL in een custom sectie is geplakt.

• Achtergrondafbeeldingen via CSS, die niet via de filters van Shopify lopen.

• Extern gehoste afbeeldingen, zoals beelden die via Dropbox, Google Drive, een eigen server of een extern CDN worden ingeladen.

• Afbeeldingen die door apps worden toegevoegd, bijvoorbeeld in reviewwidgets, pop-ups of sliders die hun eigen code meebrengen.

• Afbeeldingen in metafields die zonder de image_url-filter in het thema worden getoond.

Juist in webshops met veel maatwerk of een flinke stapel apps is dit het eerste waar je naar kijkt als de laadtijd tegenvalt. Het gaat dan niet om de foto zelf, maar om de manier waarop hij op de pagina terechtkomt, en dat los je op in de themacode in plaats van met nog een app.

Lazy loading helpt, behalve bij je belangrijkste afbeelding

Lazy loading betekent dat afbeeldingen pas worden geladen zodra een bezoeker er in de buurt van scrollt, waardoor het eerste deel van de pagina sneller verschijnt. Shopify doet dit grotendeels al zelf: elke afbeelding die via image_tag wordt ingeladen na de eerste drie secties van een template, krijgt automatisch lazy loading als het thema dat niet zelf al heeft ingesteld.

Daar zit ook direct de valkuil. Shopify noemt het lazy laden van de LCP-afbeelding een van de meest voorkomende en schadelijkste performancefouten in Shopify-thema's. De afbeelding die bovenaan de pagina direct in beeld is, zoals je hero-banner of de hoofdfoto op een productpagina, moet juist zo snel mogelijk laden. Shopify raadt aan om precies één afbeelding per pagina, de LCP-afbeelding, een hoge laadprioriteit te geven en die combinatie nooit met lazy loading te gebruiken.

Meer lazy loading is dus niet automatisch beter. Een app of script dat alle afbeeldingen lazy laadt, inclusief je hoofdafbeelding, kan je webshop juist trager laten aanvoelen. Ook animaties die je hero-afbeelding laten infaden vertragen dat moment: fade-in- en onthul-animaties stellen het LCP-moment uit, zelfs als de afbeelding al volledig is gedownload.

Alt-tekst en bestandsnamen bepalen of Google je afbeeldingen begrijpt

Alt-tekst is een korte beschrijving van wat er op een afbeelding staat. Zoekmachines gebruiken die tekst om je afbeeldingen te begrijpen, en schermlezers lezen hem voor aan slechtziende bezoekers. Shopify vult alt-tekst niet automatisch in, dus dat blijft een taak voor jou.

Je voegt alt-tekst toe door in je Shopify-admin een product te openen, op de afbeelding te klikken en het veld voor de alt-tekst in te vullen. Een goede alt-tekst beschrijft concreet wat je ziet, met de productnaam en het belangrijkste kenmerk, zonder een opsomming van zoekwoorden.

Hetzelfde geldt voor bestandsnamen. Een foto die rechtstreeks van je camera komt heet al snel IMG_4821.jpg. Hernoem hem vóór het uploaden naar iets als zwarte-leren-herensneaker.jpg, met kleine letters en koppeltekens tussen de woorden. Dat kost per foto een paar seconden en helpt zoekmachines én AI-systemen om te begrijpen wat je verkoopt.

Heb je een grote catalogus met honderden producten zonder alt-tekst, dan kan een app uitkomst bieden. De Shopify App Store heeft diverse apps die dit in bulk doen, zoals Alt Text Pro, dat alle afbeeldingen in je winkel scant op ontbrekende alt-tekst en die met AI of met templates aanvult. Controleer de uitkomst wel altijd even, want een AI-beschrijving die net niet klopt helpt niemand.

Productfoto's bewerken met AI kan direct in de Shopify-admin

Voor eenvoudige beeldbewerking heb je geen extern programma meer nodig. Met Shopify Magic verwijder je de achtergrond van een productfoto of maak je nieuwe banners, en deze mediageneratie is beschikbaar in Sidekick, in de bestandseditor en in de bestandskiezer door de hele admin. De functie werkt op de abonnementen Basic, Grow, Advanced en Shopify Plus, en biedt onder meer een effen achtergrondkleur met automatische onderwerpherkenning en het aanpassen van achtergrond of belichting via een simpele tekstinstructie.

Dat is handig om een reeks productfoto's snel dezelfde witte of gekleurde achtergrond te geven, wat meteen bijdraagt aan een rustig en consistent collectieraster. Begin wel altijd met een echte foto van je product. Een AI-gegenereerde sfeer rondom je product is prima, maar het product zelf moet eruitzien zoals de klant het straks thuis ontvangt.

Een aparte optimalisatie-app is lang niet altijd nodig

Voor de meeste webshops met een modern, goed gebouwd thema is een losse app voor compressie of formaatconversie overbodig, omdat Shopify dat al zelf regelt. Een app wordt pas interessant bij specifieke situaties, zoals een grote bestaande catalogus met te zware originelen of honderden afbeeldingen zonder alt-tekst.

Houd daarbij in gedachten dat elke app code toevoegt aan je webshop. Ironisch genoeg kan een snelheidsapp je winkel zo ook trager maken, zeker als hij zijn eigen scripts inlaadt of afbeeldingen buiten Shopify's CDN om serveert.

Samen kijken naar de snelheid van je webshop

Heb je je afbeeldingen netjes op orde, maar blijft je webshop toch traag aanvoelen? Dan zit het probleem vaak in het thema, in maatwerkcode of in apps die afbeeldingen buiten Shopify om inladen. Daar kijken we graag met je naar. Neem contact met ons op, dan bekijken we samen waar in jouw webshop de meeste snelheidswinst te halen is.