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.
På denne siden
Last opp et bilde i temaredigeringsprogrammet
Du kan legge til bilder i temaet ved hjelp av temaredigeringsprogrammet. Du kan også laste opp bilder på siden Filer i Shopify-administrator. For å finne ut mer, kan du se Laste opp filer til nettstedet.
Steg:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Klikk på Tilpass ved siden av temaet du vil tilpasse.
- Bruk rullegardinmenyen for å velge malen du ønsker å redigere.
- Fra sidefeltet i temaredigeringsprogrammet klikker du på seksjonen eller blokken du vil legge til et bilde i.
-
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.
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.
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.
Angi et fokuspunkt på et temabilde
Du kan bruke fokuspunkter til å definere den viktigste delen av et bilde i nettbutikkens tema. Når du angir et fokuspunkt i et bilde gjør du det til fokusområdet. Fokuspunkter vises alltid på skjermen, selv om du har et tema som beskjærer bildet slik at det passer med oppsettet. Med fokuspunkter får du mer kontroll over hvordan bildet vises når temaer bruker ulike størrelsesforhold, og på ulike skjermstørrelser.
Du kan bare ha ett fokuspunkt per bilde, men du kan når som helst endre eller fjerne det.
Angivelse av et fokuspunkt er tilgjengelig i følgende versjoner av gratis Shopify-temaer:
- Craft versjon 5.0.0 eller nyere
- Crave versjon 5.0.0 eller nyere
- Colorblock versjon 3.0.0 eller nyere
- Dawn versjon 7.0.0 eller nyere
- Refresh versjon 2.0.0 eller nyere
- Ride versjon 3.0.0 eller nyere
- Sense versjon 5.0.0 eller nyere
- Studio versjon 4.0.0 eller nyere
- Taste versjon 4.0.0 eller nyere
Hvis du bruker et tredjepartstema må du se temadokumentasjonen for å finne ut om temaet støtter bruk av fokuspunkter.
Legg til et fokuspunkt i et bilde
Du kan legge til et fokuspunkt i et bilde fra seksjonen Filer, og fra temaredigeringsprogrammet. Hvis du legger til et fokuspunkt på et bilde, og deretter bruker bildet på flere steder, bruker de alle det samme fokuspunktet.
Du kan bare legge til fokuspunkter i temabilder. Du kan ikke legge til et fokuspunkt i produkt-, blogg- eller samlingsbilder.
Steg:
- Klikk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Klikk på Rediger på bildet.
- Klikk på Legg til fokuspunkt.
- Klikk og dra den blå sirkelen, eller klikk på den viktigste delen av bildet for å angi fokuspunktet.
- Klikk på Ferdig.
Steg:
- Trykk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Trykk på Rediger på bildet.
- Trykk på Legg til fokuspunkt.
- Trykk på den viktigste delen av bildet for å angi fokuspunktet.
- Trykk på Ferdig.
Steg:
- Trykk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Trykk på Rediger på bildet.
- Trykk på Legg til fokuspunkt.
- Trykk på den viktigste delen av bildet for å angi fokuspunktet.
- Trykk på Ferdig.
Fjern et fokuspunkt
Steg:
- Klikk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Trykk på Rediger på bildet.
- Klikk på Fjern fokuspunkt.
- Klikk på Ferdig.
Steg:
- Trykk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Trykk på Rediger på bildet.
- Trykk på Fjern fokuspunkt.
- Trykk på Ferdig.
Steg:
- Trykk på en seksjon eller blokk med et bilde fra temaredigeringsprogrammet.
- Trykk på Rediger på bildet.
- Trykk på Fjern fokuspunkt.
- Trykk på Ferdig.
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.
For å forbedre ytelsene ved å redusere filstørrelsen konverteres GIF-filer automatisk til det animerte WebP-formatet.
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:
- 25 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:
Klikk på Rediger > Tildel profil.
Velg Ikke administrer fargen til dette dokumentet.
Klikk på OK.
Fjerne en fargeprofil med Adobe InDesign
Slik fjerner du en fargeprofil med Adobe InDesign:
Klikk på Rediger > Tildel profil.
For RGB-profiler og CMYK-profiler velger du Forkast (bruk nåværende arbeidsområde).
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:
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 beskjæres på venstre og høyre side når enheten som brukes for å vise dem har en høy skjerm (som en mobiltelefon eller et nettbrett). I eksempelet nedenfor, dersom mennesker er den viktigste delen av bildet, kan du plassere et fokuspunkt på høyre side av bildet:
Høye bilder på brede skjermer
Høye bilder kan beskjæres øverst og nederst når enheten som brukes for å vise dem har en bred skjerm (som en bærbar eller stasjonær datamaskin). I eksempelet nedenfor, dersom skoene er den viktigste delen av bildet, kan du plassere et fokuspunkt nederst i bildet for å forhindre at de beskjæres bort:
