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. Shopify tillhandahåller möjligheten att dynamiskt omvandla dina bilder med beskärnings- och storleksoperationer, utöver att automatiskt säkerställa att bästa möjliga bildformat används när du lägger upp bilder 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. Se innehållstyper och värden för metafält för mer information om metafält och bildformat som stöds.

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ägg 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.

Ta bort en fokuspunkt

Bildformat

Shopify stöder följande bildformat:

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

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 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:

  • 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:

  • 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:

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 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:

Höga bilder på breda skärmar

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

Prova gratis