Afbeeldingen uploaden

Je kunt verschillende soorten afbeeldingen gebruiken, zoals je bedrijfslogo, productafbeeldingen, diavoorstellingen, banners en afbeeldingen van blogposts. Je kunt je afbeeldingen aanpassen met acties voor bijsnijden en formaat wijzigen. Je kunt je media-instellingen in je thema aanpassen om de rand of schaduw te wijzigen van alle media die in je winkel worden weergegeven.

Gebruik de juiste beeldverhouding om afbeeldingen in je webshop precies zo weer te geven als je wil.

Opmerking

afbeeldingen hoeven niet handmatig te worden gecomprimeerd voordat het uploaden gebeurt. Upload altijd de beste afbeeldingen die je kunt bieden.

Een afbeelding in de themabewerker uploaden

Je kunt afbeeldingen aan je thema toevoegen in de themabewerker. Je kunt afbeeldingen uploaden op de pagina Bestanden van het Shopify-beheercentrum. Zie Bestanden uploaden naar je website voor meer informatie.

Stappen

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Klik op Aanpassen naast het thema dat je wilt aanpassen.
3. Selecteer in de vervolgkeuzelijst de template die je wilt bewerken.
4. Klik in de werkbalk van de themabewerker op het gedeelte waaraan je een afbeelding wilt toevoegen.

5. Klik op Afbeelding selecteren en voer een van de volgende dingen uit:

   • Upload de afbeelding van je computer door op Uploaden te klikken.
   • Klik op Gratis afbeeldingen als je een gratis stockafbeelding van Burst wilt gebruiken.

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

7. Klik op Opslaan.

Voeg een afbeelding toe met behulp van metavelden

Als je metavelden voor je afbeeldingen hebt ingesteld, kun je de dynamische bron ophalen om een afbeelding toe te voegen. Raadpleeg metaveldcontenttypen en waarden voor 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 optie Stapelafbeeldingen op mobiel te selecteren in de thema-instellingen van de afbeeldingsbanner. Raadpleeg Best practices voor diavoorstellingen en en afbeeldingsbanners voor meer informatie over afbeeldingsbanners en diavoorstelligen.

Een focuspunt instellen op een thema-afbeelding

Je kan het belangrijkste deel van een afbeelding in het thema van je webshop 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-versie 3.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 gedeelte Bestanden en 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.

Desktop

Stappen

1. Klik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Klik op Bewerken op de afbeelding.
3. Klik op Focuspunt toevoegen.
4. Klik en versleep de blauwe cirkel of klik op het belangrijkste deel van de afbeelding om je focuspunt in te stellen.
5. Klik op Gereed.

iPhone

Stappen

1. Tik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Tik op Bewerken op de afbeelding.
3. Tik op Focuspunt toevoegen.
4. Tik op het belangrijkste deel van de afbeelding om het focuspunt in te stellen.
5. Tik op Gereed.

Android

Stappen

1. Tik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Tik op Bewerken op de afbeelding.
3. Tik op Focuspunt toevoegen.
4. Tik op het belangrijkste deel van de afbeelding om het focuspunt in te stellen.
5. Tik op Gereed.

Opmerking

Je kunt een focuspunt verplaatsen door de afbeelding opnieuw te openen en op een ander gedeelte van de afbeelding te klikken om een nieuw focuspunt in te stellen.

Aandachtspunt verwijderen

Desktop

Stappen

1. Klik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Tik op Bewerken op de afbeelding.
3. Klik op Focuspunt verwijderen.
4. Klik op Gereed.

iPhone

Stappen

1. Tik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Tik op Bewerken op de afbeelding.
3. Tik op Focuspunt verwijderen.
4. Tik op Gereed.

Android

Stappen

1. Tik in de themabewerker op een gedeelte of blok met een afbeelding.
2. Tik op Bewerken op de afbeelding.
3. Tik op Focuspunt verwijderen.
4. Tik op Gereed.

Opmerking

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

Afbeeldingsindelingen

Shopify ondersteunt de volgende afbeeldingsindelingen:

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

Opmerking

Shopify detecteert automatisch welke afbeeldingsindelingen worden ondersteund door de browser van je klant en geeft de afbeelding vervolgens automatisch weer in de beste beschikbare indeling. Meer informatie over de mogelijkheden van Shopify voor het transformeren van afbeeldingen.

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 webshop 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 klant 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:

• 25 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.

Opmerking

Er zijn verschillende limieten voor afbeeldingen en bestandsgroottes voor het uploaden van productafbeeldingen.

Kleurprofielen

Wanneer je een afbeelding in je webshop 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 .ICC of .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 webshop, 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. Selecteer Geen 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-profiel Negeren (huidige werkruimte gebruiken).

3. Klik op*OK*.

Zie de Adobe-documentatie over kleurprofielen voor 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 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 themabewerker om tekst en links aan je diavoorstellingen toe te voegen.

• 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 een focuspunt plaatsen 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 het focuspunt aan de onderkant van de afbeelding plaatsen om te voorkomen dat dit gedeelte wordt bijgesneden: