Ladda upp bilder
Du kan använda olika typer av bilder, till exempel företagets logotyp, produktbilder, bildspel, banners och blogginläggsbilder. Du kan omvandla dina bilder genom att använda åtgärder för beskärning och ändring av storleken. 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 bildförhållande för att visa bilder i din webbshop exakt som du vill ha dem.
På den här sidan
Ladda upp en bild i temaredigeraren
Du kan lägga till bilder till ditt tema i temaredigeraren. Du kan också ladda upp bilder på sidan Filer i din Shopify-administratör. Se Ladda upp filer till din webbplats om du vill ha mer information.
Steg:
- Från din Shopify-admin går du till Webbshop > Teman.
- Klicka på Anpassa bredvid temat du vill anpassa.
- 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 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.
Ställ in en fokuspunkt på en temabild
Du kan använda fokuspunkter för att definiera den viktigaste delen av en bild i din webbshops tema. När du ställer in en fokuspunkt på en bild, gör du det till ett fokusområde. Fokuspunkter visas alltid i ram, även om du har ett tema som förser din bild med en större bild så att den passar layouten. Fokuspunkterna ger dig mer kontroll över hur din bild visas när teman använder olika aspektförhållanden och på olika skärmstorlekar.
Du kan bara ha en fokuspunkt per bild, men du kan ändra den eller ta bort den när som helst.
Att ställa in en fokuspunkt är tillgängligt i följande versioner av gratis Shopify-teman:
- Craft version 5.0.0 eller senare
- Crave version 5.0.0 eller senare
- Colorblock version 3.0.0eller senare
- Dawn version 7.0.0 eller senare
- Refresh version 2.0.0 eller högre
- Ride version 3.0.0eller senare
- Sense version 5.0.0 eller senare
- Studio version 4.0.0 eller senare
- Taste 4.0.0 eller senare
Kontrollera dokumentationen för ditt tema för att se om ditt tema stöder användning av fokuspunkter om du använder ett tredjepartstema.
Lägga till en fokuspunkt till en bild
Du kan lägga till en fokuspunkt till en bild från avsnittet Filer och från din temaredigerare. Om du lägger till en fokuspunkt på en bild och sedan använder bilden på flera platser, använder de alla samma fokuspunkt.
Du kan bara lägga till en fokuspunkt till temabilder. Du kan inte lägga till en fokuspunkt till produkt-, blogg- eller produktkategoribilder.
Steg:
- Klicka på ett avsnitt eller block som har en bild i temaredigeraren.
- Klicka på Redigera på bilden.
- Klicka på Lägg till fokuspunkt.
- Klicka och dra den blå cirkeln, eller klicka på den viktigaste delen av bilden för att ställa in din fokuspunkt.
- Klicka på Klar.
Steg:
- Tryck på ett avsnitt eller block som har en bild i temaredigeraren.
- Tryck på Redigera på bilden.
- Tryck på Lägg till fokuspunkt.
- Tryck på den viktigaste delen av bilden för att ställa in fokuspunkten.
- Klicka på Klar.
Steg:
- Tryck på ett avsnitt eller block som har en bild i temaredigeraren.
- Tryck på Redigera på bilden.
- Tryck på Lägg till fokuspunkt.
- Tryck på den viktigaste delen av bilden för att ställa in fokuspunkten.
- Klicka på Klar.
Ta bort en fokuspunkt
Steg:
- Klicka på ett avsnitt eller block som har en bild i temaredigeraren.
- Tryck på Redigera på bilden.
- Klicka på Ta bort fokuspunkt.
- Klicka på Klar.
Steg:
- Tryck på ett avsnitt eller block som har en bild i temaredigeraren.
- Tryck på Redigera på bilden.
- Tryck på Ta bort fokuspunkt.
- Klicka på Klar.
Steg:
- Tryck på ett avsnitt eller block som har en bild i temaredigeraren.
- Tryck på Redigera på bilden.
- Tryck på Ta bort fokuspunkt.
- Klicka på Klar.
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 kunds webbläsare stöder moderna bildformat såsom WebP och AV1 Image File Format (AVIF) kommer Shopify att leverera din bild i dessa format.
För att förbättra prestandan genom minskad filstorlek konverteras GIF automatiskt till det animerade WebP-formatet.
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:
- 25 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
.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.
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.
Rekommendationer
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 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): 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 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 bärbar dator eller dator).I exemplet nedan, om skorna är den viktigaste delen av bilden, kan du placera fokuspunkten längst ner på bilden för att förhindra att den beskärs bort:
