Afbeeldingen uploaden

Je kunt veel verschillende soorten afbeeldingen in je onlinewinkel gebruiken, waaronder je bedrijfslogo, productafbeeldingen, diavoorstellingen, banners en afbeeldingen van blogposts. Shopify biedt de mogelijkheid om je afbeeldingen dynamisch te transformeren met bijsnijden en aanpassen van de grootte, en er bovendien automatisch voor te zorgen dat de best mogelijke afbeeldingsindeling wordt gebruikt bij het presenteren van afbeeldingen in je onlinewinkel.

Afbeeldingen uploaden

Er zijn twee verschillende plaatsen waar je afbeeldingen voor je onlinewinkel kunt uploaden:

Afbeeldingen op de pagina Bestanden uploaden

Je kunt afbeeldingen uploaden op de paginaBestandenvan het Shopify-beheercentrum. Dit is handig omdat je toegang tot deze afbeeldingen hebt tijdens het bewerken van thema's. ZieBestanden uploaden naar je websitevoor meer informatie.

Afbeeldingen uploaden in de themabewerker

Je kunt afbeeldingen aan je thema toevoegen in de themabewerker.

Stappen

1. Gebruik de vervolgkeuzelijst om het template te selecteren die je wilt bewerken.
2. Klik in de werkbalk van de themabewerker op het gedeelte waaraan je een afbeelding wilt toevoegen.

3. Klik opAfbeelding selecterenen voer een van de volgende dingen uit:

   • Upload de afbeelding van je computer door opUploadente klikken.
   • Klik opGratis afbeeldingenals je een gratis stockafbeelding vanBurstwilt gebruiken.

4. Klik op een afbeelding om een voorbeeld van de afbeelding in je thema te zien. Klik opSelecterenals je de gewenste afbeelding hebt gevonden.

5. Klik opOpslaan.

Voeg een afbeelding toe met behulp van metavelden

Als jemetaveldenvoor je afbeeldingen hebt ingesteld, kun je de dynamische bron ophalen om een afbeelding toe te voegen. Raadpleegmetaveldcontenttypen en waardenvoor meer informatie over metavelden en ondersteunde afbeeldingsindelingen.

Bannerafbeelding

Je kunt afbeeldingsbanners maken met de volgende elementen:

• één of twee afbeeldingen
• tekst
• een actieknop

Op desktopcomputers worden bannerafbeeldingen naast elkaar weergegeven. Omdat deze indeling niet geschikt is voor mobiele apparaten, kun je je afbeeldingsbannerafbeeldingen stapelen door de optieStapelafbeeldingen op mobielte selecteren in dethema-instellingenvan deafbeeldingsbanner. RaadpleegBest practices voor diavoorstellingen en en afbeeldingsbannersvoor meer informatie overafbeeldingsbannersendiavoorstelligen.

Een focuspunt instellen op een thema-afbeelding

Je kan het belangrijkste deel van een afbeelding in het thema van je onlinewinkel definiëren door een focuspunt te gebruiken. Als je een focuspunt instelt voor een afbeelding, leg je hier de focus op. Focuspunten worden altijd binnen het frame weergegeven, zelfs als je een thema hebt dat je afbeelding bijsnijdt zodat deze in de lay-out past. Met focuspunten heb je meer controle over de manier waarop je afbeelding wordt weergegeven wanneer thema's in verschillende beeldverhoudingen en schermformaten worden weergegeven.

Er is slechts één focuspunt per afbeelding mogelijk, maar je kunt het op elk moment wijzigen of verwijderen.

Het instellen van een focuspunt is beschikbaar voor de volgende gratis versies van Shopify-thema's:

• Craft-versie 5.0.0 of hoger
• Crave-versie 5.0.0 of hoger
• Colorblock-versie3.0.0 of hoger
• Dawn-versie 7.0.0 of hoger
• Refresh-versie 2.0.0 of hoger
• Ride-versie 3.0.0 of hoger
• Sense-versie 5.0.0 of hoger
• Studio-versie 4.0.0 of hoger
• Taste-versie 4.0.0 of hoger

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

Een focuspunt aan een afbeelding toevoegen

Je kunt een focuspunt toevoegen aan een afbeelding via het gedeelteBestandenen via je themabewerker. Als je een focuspunt aan een afbeelding toevoegt en de afbeelding vervolgens op meerdere plaatsen gebruikt, wordt overal hetzelfde focuspunt gebruikt.

Je kunt alleen een focuspunt toevoegen aan thema-afbeeldingen. Je kunt geen focuspunt toevoegen aan product-, blog- of collectieafbeeldingen.

Aandachtspunt verwijderen

Afbeeldingsindelingen

Shopify ondersteunt de volgende afbeeldingsindelingen:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP
• AVIF

Wanneer JPEG-afbeeldingen gebruiken

JPEG-afbeeldingen zijn ideaal voor fotografie en andere stilstaande beelden met complexe kleuren. De JPEG-indeling heeft een palet met miljoenen kleuren. JPEG-afbeeldingen hebben ook een niet-exact omkeerbare compressie (ook wel lossy compression genoemd), wat kan helpen om pagina's zo snel mogelijk te laden zonder een merkbaar verlies aan beeldkwaliteit.

Gebruik de JPEG-indeling voor de volgende soorten afbeeldingen:

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

Wanneer PNG-afbeeldingen gebruiken

PNG-afbeeldingen zijn ideaal voor afbeeldingen en pictogrammen met vlakke kleuren en zonder verlopen. De PNG-indeling ondersteunt ook transparantie.

Gebruik de PNG-indeling voor de volgende soorten afbeeldingen:

• logo's
• pictogrammen
• randen en bijsnijdingen

Automatische selectie van compressie en indeling van afbeeldingen

Afbeeldingen worden door Shopify automatisch gecomprimeerd wanneer ze in je onlinewinkel worden weergegeven ten behoeve van snelle laadtijden. Bij het comprimeren van een afbeelding is de bestandsgrootte verkleind om pagina's sneller te kunnen laden.

Verder bepaalt Shopify automatisch in welke indeling je afbeeldingen het best kunnen worden aangeleverd. Wanneer we bijvoorbeeld merken dat de webbrowser van een koper moderne afbeeldingsindelingen als WebP en AV1 Image File Format (AVIF) ondersteunen, levert Shopify je afbeeldingen in die indelingen aan.

GIF's worden automatisch geconverteerd naar de geanimeerde WebP-indeling om de prestaties te verbeteren door de bestandsgrootte te verkleinen.

Limieten voor het uploaden

Bij het uploaden van afbeeldingen naar Shopify gelden beperkingen wat betreft megapixels en bestandsgrootte (gemeten in megabytes). Megapixels worden gebruikt om aan te geven hoeveel miljoenen pixels een afbeelding vormen. Megabytes worden gebruikt om aan te geven hoeveel miljoenen bytes geheugen of schijfruimte een afbeelding in beslag neemt.

Bij afbeeldingen die zijn geüpload naar Shopify, kunnen de volgende limieten niet worden overschreden:

• 20 megapixels
• 20 megabytes

Als je de megapixels van je afbeelding wilt vinden, kun je de volgende vergelijking gebruiken:(pixel width x pixel height)/1,000,000. Een afbeelding met een resolutie van 4900x6930 zou bijvoorbeeld 33,9 megapixels zijn op basis van de vergelijking:(4900x6930)/1,000,000 = 33.9 MP.

Kleurprofielen

Wanneer je een afbeelding in je onlinewinkel bekijkt, zien de kleuren in de afbeelding er mogelijk anders uit dan in het origineel dat je naar Shopify hebt geüpload. Dit kan gebeuren wanneer een afbeelding een kleurprofiel heeft, wat een set gegevens is die is opgeslagen in een bestand met een extensie.ICCof.ICM. Kleurprofielen worden vaak ingesloten in afbeeldingen om te helpen bij het standaardiseren van de manier waarop de kleuren op verschillende apparaten worden weergegeven. Wanneer afbeeldingen worden weergegeven in je onlinewinkel, worden hun kleurprofielen verwijderd.

Kleurprofielen worden om een paar redenen verwijderd:

• Niet alle apparaten kunnen.ICC- of.ICM-kleurprofielen lezen, dus als ze intact blijven, kan dit leiden tot inconsistenties in de afbeeldingskleuren op verschillende apparaten.
• Wanneer een geüploade afbeelding geen kleurprofiel bevat, wordt sRGB (het meest gebruikte kleurenprofiel dat wordt gebruikt om afbeeldingen op internet weer te geven) aangenomen door de webbrowser. Dit zorgt ervoor dat je afbeeldingen er bij alle belangrijke webbrowsers en apparaten hetzelfde uitzien.
• Kleurprofielen kunnen veel schijfruimte in beslag nemen, wat kan resulteren in lange laadtijden.

Het kleurprofiel uit een afbeelding verwijderen

Je kunt het kleurprofiel uit je afbeelding verwijderen door de afbeelding op te slaan zonder het kleurprofiel voordat je deze naar Shopify uploadt. Dit proces varieert, afhankelijk van je beeldbewerkingsprogramma.

Een kleurprofiel verwijderen met Adobe Illustrator of Adobe Photoshop

Verwijder als volgt een kleurprofiel met Adobe Illustrator of Adobe Photoshop:

1. Klik op*Bewerken* >Profiel toewijzen.

2. SelecteerGeen kleurbeheer voor dit document gebruiken.

3. Klik op*OK*.

Een kleurprofiel verwijderen met Adobe InDesign

Verwijder als volgt een kleurprofiel met Adobe InDesign:

1. Klik op*Bewerken* >Profiel toewijzen.

2. Selecteer voor een RGB-profiel en CMYK-profielNegeren (huidige werkruimte gebruiken).

3. Klik op*OK*.

Zie deAdobe-documentatie over kleurprofielenvoor meer informatie.

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

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

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

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

Aanbevelingen

Om er zeker van te zijn dat je afbeeldingen goed werken met je thema moet je met het volgende rekening houden:

• Afbeeldingen死我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. Gebruikde themabewerkerom tekst河畔链接我diavoorstellingen脚趾tevoegen.

• Kies eenvoudige afbeeldingen zodat de tekst er bovenop gemakkelijk te lezen is voor afbeeldingen die je in diavoorstellingen of als achtergrond gebruikt.

Brede afbeeldingen op hoge schermen

Brede afbeeldingen kunnen aan de linker- en rechterkant worden bijgesneden wanneer het apparaat waarop ze worden bekeken een hoog scherm heeft (zoals een mobiele telefoon of tablet). Als de mensen in het onderstaande voorbeeld het belangrijkste onderdeel van de afbeelding zijn, kun je eenfocuspuntplaatsen aan de rechterkant van de afbeelding:

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 desktop). Als de schoenen in het onderstaande voorbeeld het belangrijkste onderdeel van de afbeelding zijn, kun je hetfocuspuntaan de onderkant van de afbeelding plaatsen om te voorkomen dat dit gedeelte wordt bijgesneden: