Ladda upp bilder
Du kan använda många olika typer av bilder i din webbutik, inklusive din företagslogotyp, dina produktbilder, bildspel, banners och bloggpostbilder. Beroende på hur och var du vill använda en bild kan det vara bäst att ladda upp den i en viss storlek eller ett visst format.
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:
- Från din Shopify admin går du till Webbutik > teman.
- Hitta det tema du vill redigera och klicka på Anpassa.
- Från Shopify appen, tryck på butik.
- I avsnittet försäljningskanaler trycker du på webbutik.
- Tryck på Hantera teman.
- Hitta det tema du vill redigera och tryck på Anpassa.
- Tryck på Redigera.
- Från Shopify appen, tryck på butik.
- I avsnittet försäljningskanaler trycker du på webbutik.
- Tryck på Hantera teman.
- Hitta det tema du vill redigera och tryck på Anpassa.
- Tryck på Redigera.
Använd rullgardinsmenyn för att välja den mall du vill redigera.
Gå till temaredigerarens sidofält och klicka på det avsnitt eller block som du vill lägga till en bild till.
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.
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.
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 den dynamiska källväljaren 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 genom att välja alternativet Stapla bilder på mobil i temainställningarna för bildbanner. För mer information om bildbanner och bildspel, se bästa praxis för bildspel och bildbanner.
Bildformat
Shopify stöder följande bildformat:
- JPEG eller JPG
- Progressiv JPEG
- PNG
- GIF
Shopify hanterar bilder i WebP-format i webbläsare som stöds.
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
Kompressionsförhållanden
Shopify komprimerar bilder när de visas i din webbutik 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. Tack vare komprimering kan fler bilder lagras i ett minnesutrymme. Dessutom går det mycket snabbare att komma åt bilderna. Komprimering kan leda till en förändrad bildkvalitet, beroende på bildformatet, storleken och bildens ursprungliga kvalitet.
Shopifys bildkvalitetsnivåer efter komprimering är följande:
- JPEG: mellan 65 - 90 procent
- PNG: 90 procent
- GIF: ingen kvalitetsförändring
En JPEG-bilds ursprungliga kvalitet och utdatastorlek avgör kvalitetsnivån för en komprimerad JPEG-bild:
| Ursprunglig kvalitet | Utdatastorlek | Utdatakvalitet |
|---|---|---|
| 86 % eller högre | Höjd eller bredd på 1 024 px eller mer | 85 % |
| 65–85 % | Höjd eller bredd på 1 024 px eller mer | Ursprunglig kvalitet |
| 64 % eller lägre | Höjd eller bredd på 1 024 px eller mer | 65 % |
| 76 % eller högre | Höjd och bredd, båda mindre än 1 024 px | 75 % |
| 65 - 75 % | Höjd och bredd, båda mindre än 1 024 px | Ursprunglig kvalitet |
| 64 % eller lägre | Höjd och bredd, båda mindre än 1 024 px | 65 % |
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ä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
.ICCeller.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:
Klicka på Redigera > Tilldela profil.
Välj Färghantera inte detta dokument.
Klicka på OK.
Ta bort en färgprofil med Adobe InDesign
Så här tar du bort en färgprofil med Adobe InDesign:
Klicka på Redigera > Tilldela profil.
Välj Ta bort (Använd aktuell arbetsyta) för RGB- och CMYK-profilerna.
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):
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):
