Ladda upp bilder

Du kan använda olika typer av bilder, såsom din företagslogotyp, produktbilder, bildspel, banderoller och bilder till bloggposter. Du kan även omvandla dina bilder med beskärnings- och storleksändringsåtgärder och anpassa dina medieinställningar i ditt tema för att ändra kantlinjen eller skuggan på alla medier som visas i din butik.

För att bilder ska visas i din webbshop precis som du vill ha dem måste du använda rätt bildförhållande. Bilder optimeras automatiskt för ditt digitala skyltfönster med Shopify Content Delivery Network (CDN).

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 din Shopify-admin. Mer information finns i Ladda upp och hantera filer.

Steg:

Lägga till bilder med hjälp av metafält

Om du har konfigurerat metafält för dina bilder kan du använda väljaren för dynamisk källa för att lägga till en bild i din webbshop. Mer information om metafält och bildformat som stöds finns i Lägga till värden i metafält.

Ange 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 anger en fokuspunkt på en bild gör du den till fokusområdet. Fokuspunkter visas alltid inom bildramen, även om du har ett tema som beskär bilden så att den passar layouten. Fokuspunkter ger dig mer kontroll över hur din bild visas på olika skärmstorlekar och i fall där teman använder olika bildförhållanden.

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

Fokuspunktkompatibilitet med Shopifys gratisteman

Du kan ange en fokuspunkt på följande versioner av Shopifys gratisteman:

• Alla teman i Horizon-familjen
• 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 version 4.0.0 och senare
• Trade version 1.0.0 och senare

Om du använder ett tredjepartstema ska du kontrollera temats dokumentation för att ta reda på om ditt tema stöder användning av fokuspunkter.

Lägg till en fokuspunkt på en bild

Om du lägger till en fokuspunkt på en bild och sedan använder bilden på flera platser i din webbshop, gäller samma fokuspunkt överallt där du använder bilden.

Beroende på hur ditt tema beskär och storleksändrar dina bilder kanske fokuspunkten inte alltid är visuellt centrerad.

Steg:

1. Klicka på en bild från någon av följande platser i din Shopify-administratör:
   • I avsnittet Innehåll > Filer.
   • I temaredigeraren.
   • I avsnittet Media för dina produktlistningar i avsnittet Produkter.
   • I e-postredigeraren för Shopify Messaging.
   • I avsnittet Metafält för alla resurser som har ett metafält av typen Filreferens för att lägga till en bild.
2. Välj den del av bilden där du vill ange en fokuspunkt genom att antingen klicka på bilden eller dra den blå punkten.
3. Klicka på Spara.

Ta bort en fokuspunkt från en bild

Steg:

1. Klicka på en bild från någon av följande platser i din Shopify-administratör:
   • I avsnittet Innehåll > Filer.
   • I temaredigeraren.
   • I avsnittet Media för dina produktlistningar i avsnittet Produkter.
   • I e-postredigeraren för Shopify Messaging.
   • I avsnittet Metafält för alla resurser 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

Använda jpeg-bilder

Jpeg-bilder är idealiska för fotografering och andra stillbilder med komplexa färger. Jpeg-formatet har en palett med miljontals färger. Jpeg har även förstörande komprimering, vilket kan bidra till att hålla sidans inläsningstider snabba utan märkbar förlust i bildkvalitet. Använd jpeg-formatet för följande typer av bilder:

• produkter
• banderoller eller bildspel
• sidor och bloggposter

Använda PNG-bilder

PNG-bilder är idealiska för grafik och ikoner med enfärgade ytor och utan toningar. PNG-formatet har även stöd för transparens i bilder. Använd PNG-formatet för följande bildtyper:

• logotyper
• ikoner
• ramar och kanter

Automatisk bildkomprimering och formatval

Bilder komprimeras inte när du laddar upp dem till Shopify-admin, vilket bidrar till att bibehålla deras ursprungliga kvalitet. Följande kan dock inträffa för att sidans inläsningstider ska förbli snabba för dina kunder:

• När bilder visas via ditt butikstema kan de genomgå komprimering för högkvalitativa bilder
• Shopify avgör automatiskt vilket filformat som är bäst att använda när dina bilder levereras
• När en kunds webbläsare stöder moderna bildformat såsom WebP och AVIF (AV1 Image File Format) levereras dina bilder i dessa format
• GIF-filer konverteras automatiskt till det animerade WebP-formatet för att förbättra prestandan genom att minska filstorleken

Tänk på följande åtgärder för bästa bildkvalitet:

• Ladda upp bilder med högre upplösning upp till 5 000 px x 5 000 px eller 25 megapixlar
• Välj mindre förlustutsatta bildtyper som PNG för linjeteckningar, text och ikonisk grafik med transparens
• Använd JPEG för produktbilder eller bildspel
• SVG-filer stöds men har begränsningar – de kan inte omvandlas (storleksändras, beskäras etc.) utan att ett rastrerat format (JPEG, WebP, PNG) begärs

Andra filtyper som PSD (Photoshop Document), TIFF (Tagged Image File Format) och BMP (Bitmap) accepteras men konverteras till JPEG/PNG vid uppladdning.

Gränser för bilduppladdning

Bilduppladdningar till Shopify har begränsningar när det gäller både megapixlar (MP) och filstorlek som mäts i megabyte (MB). Megapixlar används för att ange hur många miljoner pixlar en bild består av. Megabyte används för att ange hur många miljoner byte minne eller diskutrymme en bild tar upp.

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

• 20 megapixlar
• 20 megabyte

Du kan använda följande ekvation för att hitta bildens megapixelvärde:

(pixelbredd x pixelhöjd)/1 000 000

Till exempel är en bild med en upplösning på 4 900 px x 6 930 px 33,9 megapixlar baserat på ekvationen: (4900x6930)/1 000 000 = 33,9 MP.

Bildfärgprofiler

När du visar en bild i din webbshop kan färgerna i bilden visas annorlunda än färgerna i originalbilden som du laddar upp till Shopify. Detta kan hända när en bild har en färgprofil, vilket är en uppsättning data som lagras i en fil med filändelsen .ICC eller .ICM.

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

Färgprofiler tas bort av följande anledningar:

• Alla enheter kan inte läsa .ICC- eller .ICM-färgprofiler, så om de behålls intakta kan det leda till inkonsekvenser i bildfärger mellan olika enheter.
• När en uppladdad bild inte innehåller en färgprofil, antar webbläsaren att det är sRGB, vilket är den vanligaste färgprofilen som används för att visa bilder på webben. Detta säkerställer att dina bilder visas på samma sätt i alla större webbläsare och enheter.
• Färgprofiler kan ta upp mycket diskutrymme, vilket kan leda till längre inläsningstider för sidor.

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 beroende på ditt bildredigeringsprogram.

Se Adobes dokumentation om hur du tilldelar eller tar bort en färgprofil (Illustrator, Photoshop) och tilldelar eller tar bort en färgprofil (InDesign).

Bästa praxis för bildspel, bildbanderoller och bilder i fullbredd

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

Om du använder ett av dessa teman eller har ett stort bildspel eller en stor bakgrundsbild måste du förstå vilka typer av bilder som visas bäst.

Eftersom stora bilder inte får plats på alla enheter visar Shopify ibland bara en del av bilden beroende på vilken enhet du använder. Om ditt bildspel innehåller många stora bilder kan det hända att delar av bilderna inte är synliga.

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

Tänk på följande punkter för att se till att dina bilder fungerar bra med ditt tema:

• Bilder som du använder för bildspel eller bakgrunder bör inte innehålla text. 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 och bakgrunder.

• Välj enkla bilder för bildspel eller bakgrunder så att eventuell överliggande text blir lätt att läsa.

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, till exempel en mobiltelefon eller en surfplatta i stående läge. I exemplet nedan, om personerna är den viktigaste delen av bilden, kan du placera en brännpunkt på höger sida av bilden.

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, till exempel en bärbar dator eller en datorskärm. I exemplet nedan, om skorna är den viktigaste delen av bilden, kan du placera en brännpunkt längst ner i bilden.

Bilders inläsningsbeteende

När du besöker en sida i din webbshop kanske du märker att bilderna först ser lite suddiga ut och sedan blir skarpa efter en kort stund. Detta är ett förväntat beteende som bidrar till att förbättra din butiks laddningshastighet och användarupplevelse.

Shopify-teman använder en teknik som kallas lazy loading, som först läser in en mindre version av en bild medan den högupplösta bilden läses in i bakgrunden. Detta gör att kunderna kan granska innehållet direkt istället för att vänta på att stora bilder ska läsas in helt. Processen tar vanligtvis mindre än en sekund, men ger intrycket av att din butik laddas snabbare.

Denna teknik är särskilt fördelaktig för butiker med många bilder, eftersom den avsevärt förbättrar sidans initiala laddningstider och ger omedelbar visuell feedback till kunderna.

Felsökning av bildproblem