Ladda upp bilder

Du kan använda många olika typer av bilder i din webbshop, inklusive din företagslogotyp, dina produktbilder, bildspel, banners och bloggpostbilder. Shopifys bildtjänst hanterar dina bilder och ser till att bildformatet visas på rätt ställe i din webbshop.

Ladda upp bilder

Det finns två olika platser där du kan ladda upp bilder till din webbutik:

Ladda upp bilder på sidan "Filer"

Du kan ladda upp bilder på sidan Filer i din Shopify-administrator. Det här är användbart eftersom du kan komma åt dessa bilder medan du redigerar ditt tema. Se Ladda upp filer till din webbplats om du vill ha mer information.

Ladda upp bilder i temredigeraren

Du kan lägga till bilder till ditt tema i temredigeraren.

Steg:

  1. Använd rullgardinsmenyn för att välja den mall du vill redigera.
  2. Gå till temaredigerarens sidofält och klicka på det avsnitt eller block som du vill lägga till en bild till.
  3. Klicka på Välj bild och gör sedan något av följande:

    • Klicka på Ladda upp för att ladda upp en bild från din dator.
    • Klicka på Utforska gratisbilder om du vill använda kostnadsfria arkivbilder från Burst.
  4. Klicka på en bild för att förhandsgranska bilden i ditt tema. När du har hitta en bild som du vill använda klickar du på Välj.

  5. Klicka på Spara.

Lägg till en bild med hjälp av metafält

Om du har ställt in metafält för dina bilder kan du använda väljaren för dynamiska källor för att lägga till en bild. Om du vill ha mer information om metafält och bildformat som stöds, se innehållstyper och värden för metafält.

Bildbanner

Du kan skapa bildbanners med följande element:

  • en eller två bilder
  • text
  • en åtgärdsknapp

På datorer visas bannerbilder sida vid sida. Eftersom det här formatet inte lämpar sig för mobila enheter kan du stapla dina bilder på bildbannern genom att välja alternativet Stapla bilder i mobil i Bildbannerns temainställningar. För mer information om bildbanners och bildspel, se bästa praxis för bildspel och bildbanners.

Bildformat

Shopify stöder följande bildformat:

  • JPEG
  • Progressiv JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

Användning av JPEG-bilder

JPEG-bilder är idealiska för fotografier och andra stillbilder med komplexa färger. JPEG-formatet har en palett med miljontals färger. JPEG har även destruktiv komprimering, vilket kan bidra till att vidmakthålla snabb sidhämtning utan en märkbar försämring av bildkvaliteten.

Använd JPEG-formatet för följande typer av bilder:

  • produkter
  • banners eller bildspel
  • sidor och blogginlägg

Användning av PNG-bilder

PNG-bilder är idealiska för grafik och ikoner med matta färger och utan toningar. PNG-formatet kan också stödja transparens.

Använd PNG-formatet för följande typer av bilder:

  • loggor
  • ikoner
  • ramar och kanter

Automatisk bildkomprimering och formatval

Shopify komprimerar bilder automatiskt när de visas i din webbshop för att hålla inläsningstiderna snabba. Att komprimera en bild innebär att man reducerar filstorleken för att möjliggöra snabbare sidinläsning.

Shopify fastställer dessutom automatiskt det bästa filformatet som ska användas när du levererar dina bilder. När vi till exempel upptäcker att en köpares webbläsare stöder moderna bildformat såsom WebP kommer Shopify att leverera din bild i dessa format.

Uppladdningsbegränsningar

Bilduppladdningar till Shopify har begränsningar både vad det gäller megapixlar och filstorlek (mätt i megabytes). Megapixlar används för att indikera hur många miljoner pixlar som utgör en bild. Megabytes används för att indikera hur många miljoner bytes av ett minne eller diskutrymme som en bild tar upp.

Bilder som laddas upp till Shopify får inte överskrida någon av följande begränsningar:

  • 20 megapixlar
  • 20 megabytes

För att hitta din bilds megapixlar kan du använda följande ekvation: (pixel width x pixel height)/1,000,000. Till exempel skulle en bild med en upplösning på 4900 x 6930 vara 33,9 megapixlar baserat på ekvationen: (4900x6930)/1,000,000 = 33.9 MP.

Färgprofiler

När du tittar på en bild i din webbutik så kan färgerna i bilden se annorlunda ut än dem i den ursprungliga bilden som du laddade upp till Shopify. Detta kan inträffa när en bild har en färgprofil, vilken är en uppsättning av data lagrad i en fil, med ändelserna .ICC eller .ICM. Färgprofiler är ofta inbäddade i bilder för att bidra till att standardisera hur färger ser ut i olika enheter. När bilder visas i din webbutik försvinner deras färgprofiler.

Det finns olika anledningar till att färgprofiler tas bort:

  • Det är inte alla enheter som kan läsa färgprofilerna .ICC eller .ICM. Att hålla dessa intakta kan resultera i skillnader i bildfärger beroende på enhet.
  • Webbläsaren antar färgprofilen sRGB (den mest använda färgprofilen för att visa bilder online) om en uppladdad bild inte inkluderar en färgprofil. Detta säkerställer att dina bilder ser likadana ut i alla större olika webbläsare och enheter.
  • Färgprofiler kan ta upp mycket diskutrymme, vilket kan resultera i långsam inläsning.

Ta bort färgprofilen från en bild

Du kan ta bort färgprofilen från din bild genom att spara den utan färgprofilen innan du laddar upp den till Shopify. Denna process varierar efter ditt bildredigeringsprogram.

Ta bort en färgprofil med Adobe Illustrator eller Adobe Photoshop

Så här tar du bort en färgprofil med Adobe Illustrator eller Adobe Photoshop:

  1. Klicka på Redigera > Tilldela profil.

  2. Välj Färghantera inte detta dokument.

  3. Klicka på OK.

Ta bort en färgprofil med Adobe InDesign

Så här tar du bort en färgprofil med Adobe InDesign:

  1. Klicka på Redigera > Tilldela profil.

  2. Välj Ta bort (Använd aktuell arbetsyta) för RGB- och CMYK-profilerna.

  3. Klicka på OK.

Se Adobe-dokumentationen om färgprofiler för mer detaljerad information.

Rekommendationer för bildspel, bildbanners och bilder i full bredd

Många Shopify-teman har stora bilder eller bildspel som anpassas efter höjden på din webbläsare eller som anpassas efter din skärmstorlek.

Om du använder ett av dessa teman eller har stora bildspel eller bakgrundsbilder är det viktigt att förstå vilka typer av bilder som kommer att se bäst ut.

Shopify visar ibland endast delar av en bild på den enhet du använder eftersom stora bilder inte ryms i alla enheter. Du kanske inte kan se hela bilder om ditt bildspel innehåller många stora bilder.

Rekommendationer

Ha följande i åtanke för att säkerställa att dina bilder fungerar bra med ditt tema:

  • Vissa teman har en bildpositionsinställning som du kan använda för att specificera vilken del av en bild som ska vara i fokus. Om ditt tema inte har en sådan inställning ska du säkerställa att fokuspunkten i varje bild är i mitten. När dina bilder beskärs på vissa skärmar kommer fokuspunkten fortfarande att vara synlig medan områden runt omkring den är dolda.

  • Det bör inte finnas text i bilder som du använder för bildspel eller bakgrunder. Om texten är en del av själva bilden kan den flyttas, beskäras eller justeras beroende på ditt tema. Använd temaredigeraren för att lägga till text och länkar i dina bildspel.

  • Välj enkla bilder för att göra eventuell överlagrad text lättläst i de bilder du använder i dina bildspel eller som bakgrunder.

Breda bilder på höga skärmar

Breda bilder kan beskäras till vänster och höger när enheten som används för att visa dem har en hög skärm (t.ex. en mobiltelefon eller surfplatta):

Breda bilder på höga skärmar

Höga bilder på breda skärmar

Höga bilder kan beskäras upptill och nedtill när enheten som används för att visa dem har en bred skärm (t.ex. en laptop eller stationär dator):

Höga bilder på breda skärmar

Är du redo att börja sälja med Shopify?

Prova gratis