Laste opp bilder

Du kan bruke mange ulike typer bilder i nettbutikken, inkludert firmalogo, produktbilder, lysbildefremvisninger, bannere og bilder i blogginnlegg. Shopify gir mulighet for å endre bilder dynamisk ved hjelp av beskjæring og endring av størrelse, i tillegg til å automatisk sikre at det best mulige bildeformatet brukes når bildene vises i nettbutikken.

Laste opp bilder

Du kan laste opp bilder for nettbutikken din til to forskjellige steder:

Last opp bilder i Filer-siden

Du kan laste opp bilder i Filer-siden av Shopify-administrator. Dette er nyttig fordi du får tilgang til disse bildene mens du redigerer temaene dine. Les Laste opp filer til nettstedet ditt for å finne ut mer.

Last opp bilder i redigeringsprogrammet for temaer

Du kan legge til bilder i temaet ditt i redigeringsprogrammet for temaer.

Steg:

  1. Bruk rullegardinmenyen for å velge malen du vil redigere.
  2. Fra sidefeltet i temaredigeringsprogrammet klikker du på seksjonen eller blokken du vil legge til et bilde i.
  3. Klikk på Velg bilde, og gjør en av følgende:

    • Klikk på Last opp for å laste opp et bilde fra datamaskinen.
    • For å bruke et gratis arkivbilde fra Burst klikker du på Utforsk gratisbilder.
  4. Klikk på et bilde for å se en forhåndsvisning av det i temaet ditt. Klikk på Velg når du har funnet bildet du vil bruke.

  5. Klikk på Lagre.

Legg til et bilde ved hjelp av metafelter

Hvis du har metafelter konfigurert for bilder, kan du bruke den dynamiske kildevelgeren for å legge til et bilde. For mer informasjon om metafelter og støttede bildeformater, kan du se Innholdstyper og verdier for metafelter.

Bildeoverskrifter

Du kan opprette bildebannere med følgende elementer:

  • ett eller to bilder
  • tekst
  • en handlingsknapp

På datamaskiner vises bannerbilder side om side. Fordi dette formatet ikke er egnet for mobile enheter, kan du stable bildene i bildebanneret ved å velge alternativet Stable bilder på mobil i temainnstillingene Bildebanner. For mer informasjon om bildebannere og lysbildefremvisninger kan du se Beste praksis for lysbildefremvisninger og bildebannere.

Bildeformater

Shopify støtter følgende bildeformat:

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

Når du bør bruke JPEG-bilder

JPEG-bilder er ideelle for fotografier og andre stillbilder med kompliserte farger. JPEG-formatet har en palett med flere millioner farger. JPEG har også komprimering med kvalitetstap, noe som kan bidra til at sider lastes inn raskt uten merkbart tap av bildekvalitet.

Bruk JPEG-format for følgende bildetyper:

  • produkter
  • bannere eller lysbilder
  • sider og blogginnlegg

Når du bør bruke PNG-bilder

PNG-bilder er ideelle for grafikk og ikoner med flate farger uten gradient. PNG-formatet kan også støtte gjennomsiktighet.

Bruk PNG-format for følgende bildetyper:

  • logoer
  • ikoner
  • kanter og beskjæringer

Automatisk bildekomprimering og formatvalg

For å oppnå lave innlastingstider komprimerer Shopify automatisk bilder når de vises i nettbutikken. Komprimering av et bilde betyr å redusere filstørrelsen for å gi raskere innlasting av sider.

I tillegg avgjør Shopify automatisk det best mulige filformatet for levering av bilder. Når vi for eksempel registrerer at kjøperens nettleser støtter moderne bildeformater som WebP og AV1 Image File Format (AVIF) leverer Shopify bilder i disse formatene.

Opplastingsgrenser

Bildeopplastinger til Shopify har begrensninger for både megapiksler og filstørrelse (målt i megabyte). Megapiksler brukes til å indikere hvor mange millioner piksler et bilde består av. Megabyte brukes til å indikere hvor mange millioner byte minne eller diskplass et bilde tar opp.

Bilder som lastes opp til Shopify, kan ikke overskride disse grensene:

  • 20 megapiksler
  • 20 megabyte

For å finne megapikslene i bildet kan du bruke følgende ligning: (pixel width x pixel height)/1,000,000. Et bilde med en oppløsning på 4900x6930 piksler er for eksempel 33,9 megapiksler basert på ligningen: (4900x6930)/1,000,000 = 33.9 MP.

Fargeprofiler

Når du ser på et bilde i nettbutikken din, kan fargene til bildet se forskjellig ut enn de i originalen du lastet opp til Shopify. Dette kan skje når et bilde har en fargeprofil, som er et datasett som er lagret i en fil med en .ICC- eller .ICM-utvidelse. Fargeprofiler er ofte innebygd i bilder for å bidra til å standardisere hvordan fargene vises på forskjellige enheter. Når bilder vises i nettbutikken din, fjernes fargeprofilene deres.

Fargeprofiler fjernes for noen grunner:

  • Ikke alle enheter kan lese .ICC- eller .ICM-fargeprofiler, så hvis de beholdes, kan det resultere i inkonsekvente farger på forskjellige enheter.
  • Når et opplastet bilde ikke inkluderer en fargeprofil, antas sRGB (den vanligste fargeprofilen som brukes til å vise bilder på nettet) av nettleseren. Dette sikrer at bildene dine ser like ut på alle større nettlesere og enheter.
  • Fargeprofiler kan ta opp mye diskplass, som kan resultere i lang innlastingstid.

Fjerne fargeprofilen fra et bilde

Du kan fjerne fargeprofilen fra bildet ditt ved å lagre det uten fargeprofilen før du laster det opp til Shopify. Denne prosessen varierer etter hvilket bildebehandlingsprogram du bruker.

Fjerne en fargeprofil med Adobe Illustrator eller Adobe Photoshop

Slik fjerner du en fargeprofil med Adobe Illustrator eller Adobe Photoshop:

  1. Klikk på Rediger > Tildel profil.

  2. Velg Ikke administrer fargen til dette dokumentet.

  3. Klikk på OK.

Fjerne en fargeprofil med Adobe InDesign

Slik fjerner du en fargeprofil med Adobe InDesign:

  1. Klikk på Rediger > Tildel profil.

  2. For RGB-profiler og CMYK-profiler velger du Forkast (bruk nåværende arbeidsområde).

  3. Klikk på OK.

Du kan lese Adobe-dokumentasjonen for fargeprofiler for å få mer detaljert informasjon.

Beste praksis for lysbildefremvisninger, bildebannere og fullbreddebilder

Mange Shopify-temaer har store bilder eller lysbildefremvisninger som skaleres til nettleserens høyde eller tilpasser seg skjermstørrelsen.

Hvis du bruker et av disse temaene eller har et stort lysbilde eller bakgrunnsbilde, er det viktig å forstå hvilke bildetyper som kommer til å se best ut.

Siden store bilder ikke passer på alle enheter, viser Shopify av og til bare deler av bildet, avhengig av enheten du bruker. Hvis lysbildefremvisningen din inneholder mange store bilder, kan du oppdage at deler av bildene ikke er synlige.

Anbefalinger

Her er noen ting du bør være obs på for å sørge for at bildene dine passer bra med temaet ditt:

  • Noen temaer har en innstilling for bildeposisjon du kan bruke til å spesifisere hvilken del av bildet som er fokuspunktet. Hvis temaet ditt ikke har en slik innstilling, må du sørge for at fokuspunktet til hvert bilde er midten. Når bildene dine blir beskjært på noen skjermer, er fokuspunktet synlig, mens områder rundt det er skjult.

  • Bilder du bruker til lysbildefremvisninger eller bakgrunner, bør ikke inneholde tekst. Hvis teksten er en del av selve bildet, kan den bli flyttet rundt, beskjært eller justert basert på temaet du bruker. Bruk temaredigeringsprogrammet for å legge til tekst og koblinger i lysbildefremvisningene dine.

  • Bilder du bruker i lysbildefremvisninger eller bakgrunner, bør være enkle bilder, slik at overliggende tekst blir enkel å lese.

Brede bilder på høye skjermer

Brede bilder kan bli beskjært på venstre og høyre side når enheten som brukes til å se dem, har en høy skjerm (for eksempel en mobiltelefon eller et nettbrett):

Brede bilder på høye skjermer

Høye bilder på brede skjermer

Høye bilder kan bli beskjært på toppen og bunnen når enheten som brukes til å se dem, har en bred skjerm (for eksempel en datamaskin):

Høye bilder på brede skjermer

Er du klar til å begynne å selge med Shopify?

Prøv det gratis