Afbeeldingen uploaden

Deze pagina is afgedrukt op Sep 16, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/online-store/images/theme-images.

Je kunt verschillende soorten afbeeldingen gebruiken, zoals je bedrijfslogo, productafbeeldingen, diavoorstellingen, banners en afbeeldingen van blogposts. Je kunt je afbeeldingen ook bijsnijden en groter of kleiner maken en je kunt de media-instellingen in je thema aanpassen om de randen en schaduwen van alle media in je winkel te wijzigen.

Gebruik de juiste beeldverhouding om afbeeldingen in je webshop precies zo weer te geven als je wil. Afbeeldingen worden automatisch geoptimaliseerd voor je webshop met het Shopify Content Delivery Network (CDN).

Op deze pagina

Een afbeelding in de themabewerker uploaden

Je kunt afbeeldingen aan je thema toevoegen in de themabewerker. Je kunt afbeeldingen uploaden in de sectie Content > Bestanden van het Shopify-beheercentrum. Meer informatie vind je bij Bestanden uploaden en beheren.

Stappen

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Klik op Aanpassen voor het thema waarvoor je een afbeelding wil uploaden.
  3. Optioneel: Als je een afbeelding wil toevoegen aan een andere pagina in je winkel dan de homepage, klik je op de vervolgkeuzelijst Homepage en selecteer je de template die je wil bewerken.
  4. Klik in de werkbalk van de themabewerker op de sectie of het blok waaraan je een afbeelding wil toevoegen.
  5. Ga naar het veld Afbeelding en doe een van de volgende dingen:
    • Volg deze stappen om een afbeelding vanaf je computer te uploaden:
      1. Klik op Afbeelding selecteren > Afbeeldingen toevoegen.
      2. Zoek en open de afbeelding op je computer.
      3. Klik op Gereed.

- Volg deze stappen om een gratis stockafbeelding van Burst te gebruiken: 1. Klik op*Gratis afbeeldingen ontdekken. 2. Zoek een afbeelding die je wil gebruiken. 3. Klik op **Selecteren*.

  1. Klik op Opslaan.

  1. Tik in de Shopify-app op de knop ….

  2. Tik in de sectie Verkoopkanalen op webshop.

  3. Tik op Alle thema's beheren.

  4. Tik op Aanpassen voor het thema waarvoor je een afbeelding wil uploaden.

  5. Optioneel: Als je een afbeelding aan een andere pagina dan de homepage van je winkel wil toevoegen, tik je op de vervolgkeuzelijst Homepage en selecteer je de template die je wil bewerken.

  6. Tik op Secties en daarna op de sectie of het blok waaraan je een afbeelding wil toevoegen.

  7. Ga naar het veld Afbeelding en doe een van de volgende dingen:

    • Voer de volgende stappen uit om een afbeelding van je apparaat te uploaden:
      1. Tik op Afbeelding selecteren > Afbeeldingen toevoegen.
      2. Zoek en open de afbeelding op je apparaat.
      3. Tik op Gereed.

- Volg deze stappen om een gratis stockafbeelding van Burst te gebruiken: 1. Tik op Gratis afbeeldingen ontdekken. 2. Zoek een afbeelding die je wil gebruiken. 3. Tik op Gereed.

  1. Tik op Opslaan.

  1. Tik in de Shopify-app op de knop ☰.

  2. Tik in de sectie Verkoopkanalen op webshop.

  3. Tik op Alle thema's beheren.

  4. Tik op Aanpassen voor het thema waarvoor je een afbeelding wil uploaden.

  5. Optioneel: Als je een afbeelding aan een andere pagina dan de homepage van je winkel wil toevoegen, tik je op de vervolgkeuzelijst Homepage en selecteer je de template die je wil bewerken.

  6. Tik op Secties en daarna op de sectie of het blok waaraan je een afbeelding wil toevoegen.

  7. Ga naar het veld Afbeelding en doe een van de volgende dingen:

    • Voer de volgende stappen uit om een afbeelding van je apparaat te uploaden:
      1. Tik op Afbeelding selecteren > Afbeeldingen toevoegen.
      2. Zoek en open de afbeelding op je apparaat.
      3. Tik op Gereed.

- Volg deze stappen om een gratis stockafbeelding van Burst te gebruiken: 1. Tik op Gratis afbeeldingen ontdekken. 2. Zoek een afbeelding die je wil gebruiken. 3. Tik op Gereed.

  1. Tik op ✓.

Afbeeldingen toevoegen met behulp van metavelden

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

Een focuspunt instellen op een afbeelding

Je kunt focuspunten gebruiken om het belangrijkste deel van een afbeelding in je webshop te definiëren. Wanneer je een focuspunt op een afbeelding instelt, richt je de aandacht daarop. Focuspunten worden altijd binnen het frame weergegeven, ook als je een thema hebt dat je afbeelding bijsnijdt zodat deze in de opmaak past. Met focuspunten kun je beter bepalen hoe je afbeelding op schermen van verschillende grootten wordt weergegeven en wanneer thema's verschillende beeldverhoudingen gebruiken.

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

De compatibiliteit van focuspunten met gratis Shopify-thema's

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

Als je een thema van derden gebruikt, kijk dan in de documentatie van je thema om te zien of het thema focuspunten ondersteunt.

Een focuspunt aan een afbeelding toevoegen

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

Afhankelijk van de manier waarop je thema afbeeldingen bijsnijdt en het formaat aanpast, staat het focuspunt mogelijk niet altijd in het midden.

Stappen

  1. Klik op een afbeelding uit een van de volgende locaties in het Shopify-beheercentrum:

    • In de sectie Content > Bestanden.
    • In de themabewerker.
    • In de sectie Media van je productvermeldingen in de sectie Producten.
    • In de Shopify Email-editor.
    • In de sectie Metavelden van elke bron die beschikt over het metaveldtype Bestandsreferentie voor het toevoegen van een afbeelding.

  2. Klik op de afbeelding of sleep de blauwe stip om het deel van de afbeelding te selecteren waar je een focuspunt wil instellen.

  3. Klik op Opslaan.

Een focuspunt uit een afbeelding verwijderen

Stappen

  1. Klik op een afbeelding uit een van de volgende locaties in het Shopify-beheercentrum:

    • In de sectie Content > Bestanden.
    • In de themabewerker.
    • In de sectie Media van je productvermeldingen in de sectie Producten.
    • In de Shopify Email-editor.
    • In de sectie Metavelden van elke bron die beschikt over het metaveldtype Bestandsreferentie voor het toevoegen van een afbeelding.

  2. Klik op Verwijderen.

  3. Klik op Opslaan als nieuw.

Afbeeldingsindelingen

De volgende afbeeldingsindelingen worden ondersteund:

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

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

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 in je webshop worden door Shopify automatisch gecomprimeerd om laadtijden te verbeteren. Bij compressie worden bestanden verkleind, zodat pagina's sneller worden geladen.

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, worden je afbeeldingen in die indelingen aangeleverd.

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

Uploadlimieten voor afbeeldingen

Bij het uploaden van afbeeldingen naar Shopify gelden beperkingen wat megapixels en bestandsgrootte betreft (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

Bereken de megapixelwaarde van je afbeelding aan de hand van de volgende vergelijking:

(pixel width x pixel height)/1,000,000

Volgens deze vergelijking is een afbeelding met een resolutie van 4900 px bij 6930 px bijvoorbeeld 33,9 megapixel: (4900x6930)/1,000,000 = 33.9 MP.

Kleurprofielen van afbeeldingen

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 .ICC- of .ICM-extensie.

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 de volgende 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, gaat de webbrowser ervan uit dat het om sRGB gaat (het meest gebruikte kleurenprofiel dat wordt gebruikt om afbeeldingen op internet weer te geven). Dit zorgt ervoor dat je afbeeldingen bij alle belangrijke webbrowsers en apparaten hetzelfde worden weergegeven.
  • Kleurprofielen kunnen veel schijfruimte in beslag nemen, waardoor het langer kan duren om pagina's te laden.

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.

In de Adobe-documentatie kun je vinden hoe je een kleurprofiel toewijst of verwijdert in Illustrator en Photoshop en een kleurprofiel toewijst of verwijdert in InDesign.

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 het best worden weergegeven.

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.

Aandachtspunten bij het gebruik van afbeeldingen voor diavoorstellingen of afbeeldingsbanners

Hou rekening met de volgende punten om er zeker van te zijn dat je afbeeldingen goed werken met je thema:

  • Afbeeldingen die je voor diavoorstellingen of achtergronden gebruikt, mogen geen tekst bevatten. Als de tekst deel uitmaakt van de afbeelding zelf, kan deze worden verplaatst, bijgesneden of aangepast, afhankelijk van je thema. In de themabewerker kun je tekst en links aan diavoorstellingen en achtergronden toevoegen.

  • 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 ze op een apparaat met een hoog scherm worden bekeken, zoals een mobiele telefoon of tablet in portretmodus. Als de mensen in het onderstaande voorbeeld het belangrijkste onderdeel van de afbeelding zijn, kun je aan de rechterkant van de afbeelding een focuspunt plaatsen.

Brede afbeeldingen op hoge schermen

Hoge afbeeldingen op brede schermen

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

Hoge afbeeldingen op brede schermen

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis