Afbeeldingen uploaden

Je kunt verschillende soorten afbeeldingen gebruiken, zoals je bedrijfslogo, productafbeeldingen, diavoorstellingen, banners en afbeeldingen van blogposts. Je kunt je afbeeldingen ook transformeren met bijsnijd- en formaatwijzigingsacties en je media-instellingen in je thema aanpassen om de rand of schaduw te wijzigen van alle media die in je winkel wordt weergegeven.

Om afbeeldingen in je webshop precies zo weer te geven als je wilt, moet je de juiste beeldverhouding gebruiken. Afbeeldingen worden automatisch geoptimaliseerd voor je webshop met het Shopify Content Delivery Network (CDN).

Een afbeelding uploaden in de themabewerker

Je kunt afbeeldingen aan je thema toevoegen in de themabewerker. Je kunt ook afbeeldingen uploaden in de sectie Content > Bestanden van het Shopify-beheercentrum. Raadpleeg voor meer informatie Bestanden uploaden en beheren.

Stappen:

Afbeeldingen toevoegen met metavelden

Als je metavelden hebt ingesteld voor je afbeeldingen, kun je de dynamische bronkiezer gebruiken om een afbeelding aan je webshop toe te voegen. Raadpleeg Waarden toevoegen aan metavelden voor meer informatie over metavelden en ondersteunde afbeeldingsindelingen.

Een focuspunt instellen voor een afbeelding

Je kunt focuspunten gebruiken om het belangrijkste deel van een afbeelding in je webshop te definiëren. Als je een focuspunt voor een afbeelding instelt, maak je dit het aandachtsgebied. Focuspunten worden altijd in het kader weergegeven, zelfs als je een thema hebt dat je afbeelding bijsnijdt zodat deze in de opmaak past. Focuspunten geven je meer controle over hoe je afbeelding op verschillende schermgroottes wordt weergegeven en in gevallen waarin thema's verschillende beeldverhoudingen gebruiken.

Je kunt maar één focuspunt per afbeelding hebben, maar je kunt het focuspunt op elk moment wijzigen of verwijderen.

Compatibiliteit van focuspunten met gratis Shopify-thema's

Je kunt een focuspunt instellen voor de volgende versies van de gratis thema's van Shopify:

• Alle thema's in de Horizon-familie
• Colorblock versie 3.0.0 en hoger
• Craft versie 5.0.0 en hoger
• Crave versie 5.0.0 en hoger
• Dawn versie 7.0.0 en hoger
• Origin versie 1.0.0 en hoger
• Publisher versie 1.0.0 en hoger
• Refresh versie 2.0.0 en hoger
• Ride versie 3.0.0 en hoger
• Rise versie 1.0.0 en hoger
• Sense versie 5.0.0 en hoger
• Spotlight versie 0.0.1 en hoger
• Studio versie 4.0.0 en hoger
• Taste versie 4.0.0 en hoger
• Trade versie 1.0.0 en hoger

Als je een thema van een externe partij gebruikt, controleer dan de documentatie van je thema om te zien of je thema het gebruik van focuspunten ondersteunt.

Een focuspunt toevoegen aan een afbeelding

Als je een focuspunt aan een afbeelding toevoegt en de afbeelding vervolgens op meerdere plaatsen in je webshop gebruikt, is hetzelfde focuspunt van toepassing waar je de afbeelding ook gebruikt.

Afhankelijk van de manier waarop je thema je afbeeldingen bijsnijdt en het formaat ervan wijzigt, is het focuspunt mogelijk niet altijd visueel gecentreerd.

Stappen:

1. Klik op een afbeelding op een van de volgende locaties in je Shopify-beheercentrum:
   • In de sectie Content > Bestanden.
   • In de themathema-editor.
   • In de sectie Media van je productvermeldingen in de sectie Producten.
   • In de e-maileditor van Shopify Messaging.
   • In de sectie Metavelden van elke resource met een metaveld van het type Bestandsreferentie voor het toevoegen van een afbeelding.
2. Klik op de afbeelding of versleep de blauwe stip om het deel van de afbeelding te selecteren waar je een focuspunt wilt instellen.
3. Klik op Opslaan.

Een focuspunt verwijderen uit een afbeelding

Stappen:

1. Klik op een afbeelding op een van de volgende locaties in je Shopify-beheercentrum:
   • In de sectie Content > Bestanden.
   • In de themathema-editor.
   • In de sectie Media van je productvermeldingen in de sectie Producten.
   • In de e-maileditor van Shopify Messaging.
   • In de sectie Metavelden van elke resource met een metaveld van het type Bestandsreferentie voor het toevoegen van een afbeelding.
2. Klik op Verwijderen.
3. Klik op Opslaan als nieuw.

Afbeeldingsindelingen

De volgende afbeeldingsindelingen worden ondersteund:

• JPEG
• Progressieve JPEG
• PNG
• GIF
• HEIC
• WebP

JPEG-afbeeldingen gebruiken

JPEG-afbeeldingen zijn ideaal voor fotografie en andere stilstaande afbeeldingen met complexe kleuren. De JPEG-indeling heeft een palet met miljoenen kleuren. JPEG heeft ook compressie met verlies, wat kan helpen om de laadtijden van pagina's snel te houden zonder een merkbaar verlies in afbeeldingskwaliteit. Gebruik de JPEG-indeling voor de volgende typen afbeeldingen:

• producten
• banners of diavoorstellingen
• pagina's en blogposts

PNG-afbeeldingen gebruiken

PNG-afbeeldingen zijn ideaal voor afbeeldingen en pictogrammen met effen kleuren en zonder verlopen. Het PNG-formaat ondersteunt ook transparantie in afbeeldingen. Gebruik het PNG-formaat voor de volgende soorten afbeeldingen:

• logo's
• pictogrammen
• randen en omlijstingen

Automatische afbeeldingscompressie en formaatselectie

Afbeeldingen worden niet gecomprimeerd wanneer je ze uploadt naar het Shopify-beheercentrum, waardoor de oorspronkelijke kwaliteit behouden blijft. Het volgende kan echter gebeuren om de laadtijden van pagina's voor je klanten snel te houden:

• Wanneer afbeeldingen via je winkelthema worden weergegeven, kunnen ze worden gecomprimeerd voor afbeeldingen van hoge kwaliteit
• Shopify bepaalt automatisch het best mogelijke bestandsformaat dat moet worden gebruikt bij het leveren van je afbeeldingen
• Wanneer de webbrowser van een klant moderne afbeeldingsformaten ondersteunt, zoals WebP en AVIF (AV1 Image File Format), worden je afbeeldingen in die formaten geleverd
• GIF's worden automatisch omgezet naar het geanimeerde WebP-formaat om de prestaties te verbeteren door de bestandsgrootte te verkleinen

Overweeg de volgende acties voor de beste afbeeldingskwaliteit:

• Upload afbeeldingen met een hogere resolutie tot 5000 x 5000 px of 25 megapixels
• Kies voor afbeeldingstypen met minder kwaliteitsverlies, zoals PNG voor lijntekeningen, tekst en iconische afbeeldingen met transparantie
• Gebruik JPEG voor productafbeeldingen of diavoorstellingen
• SVG-bestanden worden ondersteund, maar hebben beperkingen: ze kunnen niet worden getransformeerd (formaat wijzigen, bijsnijden, enz.) zonder een gerasteriseerd formaat (JPEG, WebP, PNG) aan te vragen

Andere bestandstypen zoals PSD (Photoshop Document), TIFF (Tagged Image File Format) en BMP (Bitmap) worden geaccepteerd, maar worden bij het uploaden geconverteerd naar JPEG/PNG.

Afbeeldingsuploadlimieten

Afbeeldingsuploads naar Shopify hebben beperkingen in zowel megapixels (MP) als bestandsgrootte, die wordt gemeten in megabytes (MB). Megapixels worden gebruikt om aan te geven uit hoeveel miljoenen pixels een afbeelding bestaat. Megabytes worden gebruikt om aan te geven hoeveel miljoenen bytes aan geheugen of schijfruimte een afbeelding in beslag neemt.

Afbeeldingen die naar Shopify worden geüpload, mogen geen van de volgende limieten overschrijden:

• 20 megapixels
• 20 megabytes

Gebruik de volgende vergelijking om het aantal megapixels van je afbeelding te bepalen:

(pixelbreedte x pixelhoogte)/1.000.000

Een afbeelding met een resolutie van 4900 x 6930 px is bijvoorbeeld 33,9 megapixels op basis van de vergelijking: (4900x6930)/1.000.000 = 33,9 MP.

Afbeeldingskleurprofielen

Wanneer je een afbeelding in je webshop bekijkt, kunnen de kleuren in de afbeelding anders worden weergegeven dan in de oorspronkelijke afbeelding die je naar Shopify uploadt. Dit kan gebeuren wanneer een afbeelding een kleurprofiel heeft. Dat is een set gegevens die is opgeslagen in een bestand met een .ICC- of .ICM-extensie.

Kleurprofielen worden vaak ingesloten in afbeeldingen om de weergave van kleuren op verschillende apparaten te standaardiseren. Wanneer afbeeldingen in je webshop worden weergegeven, worden hun kleurprofielen verwijderd.

Kleurprofielen worden om de volgende redenen verwijderd:

• Niet alle apparaten kunnen .ICC- of .ICM-kleurprofielen lezen, dus als je ze intact laat, kan dit leiden tot inconsistenties in afbeeldingskleuren op verschillende apparaten.
• Wanneer een geüploade afbeelding geen kleurprofiel bevat, gaat de webbrowser uit van sRGB, het meest gangbare kleurprofiel voor de weergave van afbeeldingen op het web. Dit zorgt ervoor dat je afbeeldingen op alle gangbare webbrowsers en apparaten hetzelfde worden weergegeven.
• Kleurprofielen kunnen veel schijfruimte in beslag nemen, wat kan leiden tot langere laadtijden van pagina's.

Het kleurprofiel uit een afbeelding verwijderen

Je kunt het kleurprofiel uit je afbeelding verwijderen door de afbeelding zonder het kleurprofiel op te slaan voordat je deze naar Shopify uploadt. Dit proces verschilt per beeldbewerkingsprogramma.

Bekijk de documentatie van Adobe over hoe je een kleurprofiel toewijst of verwijdert (Illustrator, Photoshop) en een kleurprofiel toewijst of verwijdert (InDesign).

Best practices voor diavoorstellingen, afbeeldingsbanners en afbeeldingen over de volledige breedte

Veel Shopify-thema's hebben grote afbeeldingen of diavoorstellingen die zich aanpassen aan de hoogte van je browser of je schermgrootte.

Als je een van deze thema's gebruikt of een grote diavoorstelling of achtergrondafbeelding hebt, is het belangrijk om te weten welke soorten afbeeldingen het best worden weergegeven.

Omdat grote afbeeldingen niet op alle apparaten passen, geeft Shopify soms maar een deel van de afbeelding weer, afhankelijk van het apparaat dat je gebruikt. Als je diavoorstelling veel grote afbeeldingen bevat, kan het zijn dat delen van de afbeeldingen niet zichtbaar zijn.

Aandachtspunten voor het gebruik van afbeeldingen voor diavoorstellingen of afbeeldingsbanners

Houd rekening met de volgende punten om ervoor te zorgen dat je afbeeldingen goed werken met je thema:

• Afbeeldingen die je gebruikt voor diavoorstellingen of achtergronden, mogen geen tekst bevatten. Als de tekst deel uitmaakt van de afbeelding zelf, kan deze worden verplaatst, bijgesneden of aangepast op basis van je thema. Gebruik de thema-editor om tekst en links toe te voegen aan je diavoorstellingen en achtergronden.

• Kies voor diavoorstellingen of achtergronden eenvoudige afbeeldingen, zodat de tekst die eroverheen wordt gelegd, gemakkelijk te lezen is.

Brede afbeeldingen op hoge schermen

Brede afbeeldingen kunnen links en rechts worden bijgesneden wanneer het apparaat waarop ze worden bekeken een hoog scherm heeft, zoals een mobiele telefoon of een tablet in de staande modus. Als in het onderstaande voorbeeld de mensen het belangrijkste deel van de afbeelding zijn, kun je een focuspunt aan de rechterkant van de afbeelding plaatsen.

Hoge afbeeldingen op brede schermen

Hoge afbeeldingen kunnen aan de boven- en onderkant worden bijgesneden wanneer het apparaat waarop ze worden bekeken een breed scherm heeft, zoals een laptop- of desktopmonitor. Als in het onderstaande voorbeeld de schoenen het belangrijkste deel van de afbeelding zijn, kun je een focuspunt aan de onderkant van de afbeelding plaatsen.

Laadgedrag van afbeeldingen

Wanneer je een pagina in je webshop bezoekt, zie je misschien dat afbeeldingen eerst een beetje wazig zijn en na een ogenblik scherp worden. Dit is normaal gedrag dat de laadsnelheid en gebruikerservaring van je winkel verbetert.

Shopify-thema's gebruiken een techniek die 'lazy loading' wordt genoemd, waarbij eerst een kleinere versie van een afbeelding wordt geladen terwijl de afbeelding met volledige resolutie op de achtergrond wordt geladen. Hierdoor kunnen klanten de content direct bekijken in plaats van te moeten wachten tot grote afbeeldingen volledig zijn geladen. Dit proces duurt meestal minder dan een seconde, maar wekt de indruk dat je winkel sneller laadt.

Deze techniek is met name gunstig voor winkels met veel afbeeldingen, omdat de laadtijden van pagina's aanzienlijk worden verbeterd en klanten direct visuele feedback krijgen.

Problemen met afbeeldingen oplossen