Ladda upp bilder

Du kan använda olika typer av bilder, till exempel företagets logotyp, produktbilder, bildspel, banners och blogginläggsbilder. Du kan förändra dina bilder genom att beskära och ändra storleken, och du kan anpassa mediainställningarna i ditt tema för att ändra kanten eller skuggorna på alla medier som visas i din butik.

Du måste använda rätt bildformat för att kunna visa bilder precis som du vill ha dem i webbshoppen. Bilder optimeras automatiskt för skyltfönstret med Shopify Content Delivery Network (CDN).

Observera

Bilder behöver inte komprimeras manuellt innan du laddar upp dem. Ladda alltid upp bilder av så hög kvalitet som möjligt.

Ladda upp en bild i temaredigeraren

Du kan lägga till bilder i ditt tema i temaredigeraren. Du kan även ladda upp bilder i avsnittet Innehåll > Filer i Shopify-admin. Mer information finns i Ladda upp och hantera filer.

Steg:

Dator

1. Från din Shopify-admin går du till Webbshop > Teman.

2. Klicka på Anpassa för det tema du vill ladda upp en bild för.

3. Valfritt: Om du vill lägga till en bild på en annan sida i din butik än startsidan trycker du på rullgardinsmenyn på startsidan och väljer sedan den mall du vill redigera.

4. Gå till temaredigerarens sidofält och klicka på det avsnitt eller block där du vill lägga till en bild till.

5. Gör något av följande i fältet Bild:

   • Gör så här om du vill ladda upp en bild från din dator:

     1. Klicka på Välj bild > Lägg till bilder.
     2. Leta upp och öppna bilden på din dator.
     3. Klicka på Done (Klar).

   • Gör så här om du vill använda en kostnadsfri stockbild från Burst:

     1. Klicka på Utforska gratisbilder.
     2. Hitta en bild som du vill använda.
     3. Klicka på Välj.

6. Klicka på Spara.

iPhone

1. Från Shopify-appen trycker du på -knappen.

2. Tryck på Webbshop i avsnittet Försäljningskanaler.

3. Tryck på Hantera alla teman.

4. Tryck på Anpassa för det tema där du vill ladda upp en bild.

5. Valfritt: Om du vill lägga till en bild på en annan sida i butiken än startsidan, ska du trycka på rullgardinsmenyn Startsida och välja den mall du vill redigera.

6. Tryck på Avsnitt och tryck sedan på det avsnitt eller block där du vill lägga till en bild.

7. Gör något av följande i fältet Bild:

   • Gör så här om du vill ladda upp en bild från din enhet:

     1. Tryck på Välj bild > Lägg till bilder.
     2. Hitta och öppna bilden på din enhet.
     3. Klicka på Klar.

   • Gör så här om du vill använda en kostnadsfri stockbild från Burst:

     1. Tryck på Utforska gratisbilder.
     2. Hitta en bild som du vill använda.
     3. Klicka på Klar.

8. Tryck på Spara.

Android

1. Från Shopify-appen trycker du på -knappen.

2. Tryck på Webbshop i avsnittet Försäljningskanaler.

3. Tryck på Hantera alla teman.

4. Tryck på Anpassa för det tema där du vill ladda upp en bild.

5. Valfritt: Om du vill lägga till en bild på en annan sida i butiken än startsidan, ska du trycka på rullgardinsmenyn Startsida och välja den mall du vill redigera.

6. Tryck på Avsnitt och tryck sedan på det avsnitt eller block där du vill lägga till en bild.

7. Gör något av följande i fältet Bild:

   • Gör så här om du vill ladda upp en bild från din enhet:

     1. Tryck på Välj bild > Lägg till bilder.
     2. Hitta och öppna bilden på din enhet.
     3. Klicka på Klar.

   • Gör så här om du vill använda en kostnadsfri stockbild från Burst:

     1. Tryck på Utforska gratisbilder.
     2. Hitta en bild som du vill använda.
     3. Klicka på Klar.

8. Tryck på ✓.

Lägga till bilder 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 i din webbshop. Om du vill ha mer information om metafält och bildformat som stöds, se Lägga till värden till metafält.

Ställa in en fokuspunkt på en bild

Du kan använda fokuspunkter för att definiera den viktigaste delen av en bild i din webbshop. När du ställer in en fokuspunkt på en bild, gör du den till ett fokusområde. Fokuspunkterna visas alltid i ram, även om du har ett tema som beskär bilden för att passa layouten. Fokuspunkterna ger dig mer kontroll över hur din bild visas på olika skärmstorlekar och i situationer när teman använder olika bildförhållanden.

Du kan bara ha en fokuspunkt per bild, men du kan ändra fokuspunkt eller ta bort den när som helst.

Kompatibilitet med fokuspunkter i Shopifys gratisteman

Du kan ställa in en fokuspunkt i följande versioner av Shopifys gratisteman:

• Colorblock version 3.0.0 och senare
• Craft version 5.0.0 och senare
• Crave version 5.0.0 och senare
• Dawn version 7.0.0 och senare
• Origin version 1.0.0 och senare
• Publisher version 1.0.0 och senare
• Refresh version 2.0.0 och senare
• Ride version 3.0.0 och senare
• Rise version 1.0.0 och senare
• Sense version 5.0.0 och senare
• Spotlight version 0.0.1 och senare
• Studio version 4.0.0 och senare
• Taste 4.0.0 och senare
• Trade version 1.0.0 och senare

Om du använder ett tema från tredje part kan du kontrollera temats dokumentation och ta reda på om temat stöder användning av fokuspunkter.

Lägga till en fokuspunkt till en bild

Om du lägger till en fokuspunkt i en bild och sedan använder bilden på flera platser i din webbutik gäller samma fokuspunkt oavsett var du använder bilden.

Fokuspunkten kanske inte alltid är visuellt centrerad beroende på hur ditt tema beskärs och ändrar storlek på dina bilder.

Steg:

1. Klicka på en bild från någon av följande platser i Shopify-admin:

   • I avsnittet Innehåll > Filer.
   • I temaredigeraren.
   • I avsnittet Media för produktlistningarna i avsnittet Produkter.
   • I Shopify Email-redigeraren.
   • I avsnittet Metafält för en resurs som har ett metafält av typen Filreferens för att lägga till en bild.

2. Markera den del av bilden där du vill ha en fokuspunkt genom att antingen klicka på bilden eller dra den blå pricken.

3. Klicka på Spara.

Observera

Du kan flytta en fokuspunkt genom att öppna bilden igen och klicka på en annan del av bilden för att ställa in en ny fokuspunkt.

Ta bort en fokuspunkt från en bild

Steg:

1. Klicka på en bild från någon av följande platser i Shopify-admin:

   • I avsnittet Innehåll > Filer.
   • I temaredigeraren.
   • I avsnittet Media för produktlistningarna i avsnittet Produkter.
   • I Shopify Email-redigeraren.
   • I avsnittet Metafält för en resurs som har ett metafält av typen Filreferens för att lägga till en bild.

2. Klicka på Ta bort.

3. Klicka på Spara som ny.

Bildformat

Följande bildformat stöds:

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

Observera

Shopify upptäcker automatiskt vilka bildformat som stöds av din kunds webbläsare och visar sedan automatiskt bilden i det bästa format som finns tillgängligt. Läs mer om Shopifys bildtransformationskapacitet.

Använda 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ända PNG-bilder

PNG-bilder är idealiska för grafik och ikoner med matta färger och utan toningar. PNG-formatet har också stöd för transparens i bilderna. 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 kunds webbläsare stöder moderna bildformat som WebP och AV1 Image File Format (AVIF), levereras dina bilder i de formaten.

För att förbättra prestandan genom minskad filstorlek konverteras GIF automatiskt till det animerade WebP-formatet.

Begränsningar för bilduppladdning

Bilduppladdningar till Shopify har begränsningar både vad det gäller megapixlar (MP) och filstorlek som mätt i megabyte (MB). 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

Använd följande ekvation för att hitta bildens megapixelvärde:

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

En bild med en upplösning på 4900 px x 6930 px är exempelvis 33,9 megapixlar baserat på ekvationen: (4900x6930)/1,000,000 = 33.9 MP.

Observera

Det finns olika bild- och filstorleksbegränsningar när man laddar upp produktbilder.

Bilders färgprofiler

När du tittar på en bild i din webbshop kan färgerna i bilden se annorlunda ut än i den ursprungliga bilden som du laddade upp till Shopify. Detta kan inträffa när en bild har en färgprofil, alltså en uppsättning av data lagrad i en fil med ändelserna .ICC eller .ICM.

Färgprofiler bäddas ofta in i bilder för att hjälpa till att standardisera hur färgerna visas på olika enheter. När bilder visas i din webbshop försvinner deras färgprofiler.

Färgprofiler tas bort av följande skäl:

• 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, som är den mest använda färgprofilen för att visa bilder online, om en uppladdad bild inte innehåller någon färgprofil. Det 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 att det tar längre tid att läsa in sidorna.

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.

Visa Adobe-dokumentationen om att tilldela eller ta bort en färgprofil (Illustrator, Photoshop) och tilldela eller ta bort en färgprofil (InDesign).

Bästa praxis 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.

Att tänka på när du använder bilder för bildspel eller en bildbanner

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

• 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 och lägg till text och länkar i bildspel och bakgrunder.

• 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 kanske beskärs till vänster och höger när enheten som används för att visa dem har en hög skärm, till exempel en mobiltelefon eller surfplatta i stående läge. I exemplet nedan, om personerna är den viktigaste delen av bilden, kan du placera en fokuspunkt på höger sida av bilden.

Höga bilder på breda skärmar

Höga bilder kanske beskärs upptill och nedtill när enheten som används för att visa dem har en bred skärm till exempel en dator. I exemplet nedan, om skorna är den viktigaste delen av bilden, kan du placera en fokuspunkt nedtill på bilden.