Laste opp bilder

Du kan bruke ulike bildetyper, som bedriftslogo, produktbilder, lysbildefremvisninger, bannere og blogginnleggsbilder. Du kan også endre på bildene ved å beskjære dem og endre størrelsen, og du kan tilpasse medieinnstillingene i temaet for å endre kantlinjen eller skyggen på alle medier som vises i butikken.

For å vise bilder i nettbutikken nøyaktig slik du vil, må du bruke riktig sideforhold for bildet. Bilder optimaliseres automatisk for butikkfronten med Shopify Content Delivery Network (CDN).

Laste opp et bilde i temaredigeringsprogrammet

Du kan legge til bilder i temaet i temaredigeringsprogrammet. Du kan også laste opp bilder i seksjonen Stoff > Filer i Shopify-administratoren. For å finne ut mer kan du se Laste opp og administrere filer.

Trinn:

Legge til bilder ved hjelp av metafelter

Hvis du har konfigurert metafelter for bildene dine, kan du bruke den dynamiske kildevelgeren til å legge til et bilde i nettbutikken. Du finner mer informasjon om metafelter og støttede bildeformater i Legge til verdier i metafelter.

Angi et fokuspunkt på et bilde

Du kan bruke fokuspunkter til å definere den viktigste delen av et bilde i nettbutikken. Når du angir et fokuspunkt på et bilde, gjør du det om til fokusområdet. Fokuspunkter vises alltid i rammen, selv om du har et tema som beskjærer bildet for å passe til layouten. Fokuspunkter gir deg mer kontroll over hvordan bildet vises på ulike skjermstørrelser, og i tilfeller der temaer bruker ulike sideforhold.

Du kan bare ha ett fokuspunkt per bilde, men du kan endre fokuspunktet eller fjerne det når som helst.

Fokuspunktkompatibilitet med gratis Shopify-temaer

Du kan angi et fokuspunkt i følgende versjoner av Shopifys gratis-temaer:

• Alle temaer i Horizon-familien
• Colorblock versjon 3.0.0 og nyere
• Craft versjon 5.0.0 og nyere
• Crave versjon 5.0.0 og nyere
• Dawn versjon 7.0.0 og nyere
• Origin versjon 1.0.0 og nyere
• Publisher versjon 1.0.0 og nyere
• Refresh versjon 2.0.0 og nyere
• Ride versjon 3.0.0 og nyere
• Rise versjon 1.0.0 og nyere
• Sense versjon 5.0.0 og nyere
• Spotlight versjon 0.0.1 og nyere
• Studio versjon 4.0.0 og nyere
• Taste versjon 4.0.0 og nyere
• Trade versjon 1.0.0 og nyere

Hvis du bruker et tredjepartstema, bør du sjekke temadokumentasjonen for å finne ut om temaet ditt støtter bruk av fokuspunkter.

Legg til et fokuspunkt på et bilde

Hvis du legger til et fokuspunkt på et bilde og deretter bruker bildet flere steder i nettbutikken, gjelder det samme fokuspunktet overalt hvor bildet brukes.

Avhengig av hvordan temaet beskjærer og endrer størrelsen på bildene, er det ikke sikkert at fokuspunktet alltid er visuelt sentrert.

Trinn:

1. Klikk på et bilde fra et av følgende steder i Shopify-administrator:
   • I seksjonen Innhold > Filer.
   • I temaredigeringsprogrammet.
   • I Medier-seksjonen for produktoppføringene i Produkter-seksjonen.
   • I e-postredigeringsprogrammet for Shopify Messaging.
   • I Metafelt-seksjonen for en hvilken som helst ressurs som har et metefelt av typen Filreferanse for å legge til et bilde.
2. Klikk på bildet eller dra den blå prikken for å velge den delen av bildet der du vil angi et fokuspunkt.
3. Klikk på Lagre.

Fjern et fokuspunkt fra et bilde

Trinn:

1. Klikk på et bilde fra et av følgende steder i Shopify-administrator:
   • I seksjonen Innhold > Filer.
   • I temaredigeringsprogrammet.
   • I Medier-seksjonen for produktoppføringene i Produkter-seksjonen.
   • I e-postredigeringsprogrammet for Shopify Messaging.
   • I Metafelt-seksjonen for en hvilken som helst ressurs som har et metefelt av typen Filreferanse for å legge til et bilde.
2. Klikk på Fjern.
3. Klikk på Lagre som ny.

Bildeformater

Følgende bildeformater støttes:

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

Bruke JPEG-bilder

JPEG-bilder er ideelle for fotografering og andre stillbilder med komplekse farger. JPEG-formatet har en palett med millioner av farger. JPEG har også destruktiv komprimering, som kan bidra til å holde sidens lastetider raske uten et merkbart tap i bildekvalitet. Bruk JPEG-formatet for følgende bildetyper:

• produkter
• bannere eller lysbildefremvisninger
• sider og blogginnlegg

Bruk av PNG-bilder

PNG-bilder er ideelle for grafikk og ikoner med flate farger og uten gradienter. PNG-formatet støtter også gjennomsiktighet i bilder. Bruk PNG-formatet for følgende bildetyper:

• logoer
• ikoner
• rammer og kanter

Automatisk bildekomprimering og formatvalg

Bilder komprimeres ikke når du laster dem opp til Shopify-administratorpanelet, noe som bidrar til å opprettholde den opprinnelige kvaliteten. Følgende kan imidlertid skje for å holde sideinnlastingstidene raske for kundene dine:

• Når bilder leveres gjennom butikkens tema, kan de gjennomgå komprimering for bilder av høy kvalitet
• Shopify avgjør automatisk hvilket filformat som er best egnet å bruke når bildene dine leveres
• Når en kundes nettleser støtter moderne bildeformater som WebP og AVIF (AV1 Image File Format), leveres bildene dine i disse formatene
• GIF-er konverteres automatisk til det animerte WebP-formatet for å forbedre ytelsen ved å redusere filstørrelsen

Vurder følgende handlinger for å få best mulig bildekvalitet:

• Last opp bilder med høyere oppløsning, på opptil 5000 x 5000 piksler eller 25 megapiksler
• Velg bildetyper med mindre tap, som PNG for strektegninger, tekst og ikonisk grafikk med gjennomsiktighet
• Bruk JPEG for produktbilder eller lysbildefremvisninger
• SVG-filer støttes, men har begrensninger – de kan ikke transformeres (endret størrelse, beskjært osv.) uten å be om et rasterisert format (JPEG, WebP, PNG)

Andre filtyper, som PSD (Photoshop-dokument), TIFF (Tagged Image File Format) og BMP (punktgrafikk), godtas, men blir konvertert til JPEG/PNG ved opplasting.

Grenser for bildeopplasting

Bildeopplastinger til Shopify har begrensninger både når det gjelder megapiksler (MP) og filstørrelse, som måles i megabyte (MB). Megapiksler brukes til å angi hvor mange millioner piksler et bilde består av. Megabyte brukes til å angi hvor mange millioner byte med minne eller diskplass et bilde opptar.

Bilder som lastes opp til Shopify, kan ikke overskride noen av følgende grenser:

• 20 megapiksler
• 20 megabyte

For å finne bildets megapikselverdi, kan du bruke følgende ligning:

(pikselbredde x pikselhøyde)/1 000 000

For eksempel er et bilde med en oppløsning på 4900 x 6930 piksler 33,9 megapiksler basert på ligningen: (4900x6930)/1 000 000 = 33,9 MP.

Fargeprofiler for bilder

Når du ser på et bilde i nettbutikken din, kan fargene i bildet vises annerledes enn i originalbildet 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 filtypen .ICC eller .ICM.

Fargeprofiler er ofte integrert i bilder for å standardisere måten fargene vises på på ulike enheter. Når bilder vises i nettbutikken din, fjernes fargeprofilene.

Fargeprofiler fjernes av følgende årsaker:

• Ikke alle enheter kan lese .ICC- eller .ICM-fargeprofiler, så å beholde dem kan føre til uoverensstemmelser i bildefarger på tvers av enheter.
• Når et opplastet bilde ikke inneholder en fargeprofil, antar nettleseren at det er sRGB, som er den vanligste fargeprofilen for visning av bilder på nettet. Dette sikrer at bildene dine vises likt i alle de store nettleserne og på alle enheter.
• Fargeprofiler kan oppta mye diskplass, noe som kan føre til lengre sideinnlastingstider.

Fjern fargeprofilen fra et bilde

Du kan fjerne fargeprofilen fra bildet ved å lagre det uten fargeprofilen før du laster det opp til Shopify. Denne prosessen varierer avhengig av bilderedigeringsprogrammet ditt.

Se Adobe-dokumentasjonen om hvordan du kan tilordne eller fjerne en fargeprofil (Illustrator, Photoshop) og tilordne eller fjerne en fargeprofil (InDesign).

Beste praksis for lysbildefremvisninger, bildebannere og bilder i full bredde

Mange Shopify-temaer har store bilder eller lysbildefremvisninger som skaleres til høyden på nettleseren eller tilpasser seg skjermstørrelsen din.

Hvis du bruker et av disse temaene eller har en stor lysbildefremvisning eller et stort bakgrunnsbilde, må du forstå hvilke bildetyper som vises best.

Siden store bilder ikke passer på alle enheter, viser Shopify noen ganger bare deler av bildet, avhengig av hvilken enhet du bruker. Hvis lysbildefremvisningen din inneholder mange store bilder, kan det hende at deler av bildene ikke er synlige.

Vurderinger ved bruk av bilder til lysbildefremvisninger eller bildebannere

For å sikre at bildene dine fungerer godt med temaet ditt, må du huske på følgende punkter:

• Bilder du bruker til lysbildefremvisninger eller bakgrunner bør ikke ha tekst i seg. Hvis teksten er en del av selve bildet, kan den bli flyttet rundt, beskåret eller justert basert på temaet ditt. Bruk temaredigereren til å legge til tekst og koblinger i lysbildefremvisninger og bakgrunner.

• For bilder du bruker i lysbildefremvisninger eller som bakgrunner, velg enkle bilder slik at eventuell overliggende tekst er lett å lese.

Brede bilder på høye skjermer

Brede bilder kan bli beskåret til venstre og høyre når enheten som brukes til å vise dem har en høy skjerm, for eksempel en mobiltelefon eller et nettbrett i portrettmodus. I eksemplet nedenfor, hvis personene 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 bli beskåret øverst og nederst når enheten som brukes til å se dem på har en bred skjerm, for eksempel en bærbar eller stasjonær datamaskin. I eksemplet nedenfor, hvis skoene er den viktigste delen av bildet, kan du plassere et fokuspunkt nederst i bildet.

Innlastingsatferd for bilder

Når du besøker en side i nettbutikken din, kan du legge merke til at bildene ser litt uskarpe ut først, og deretter blir skarpe etter et øyeblikk. Dette er forventet atferd som bidrar til å forbedre butikkens lastehastighet og brukeropplevelse.

Shopify-temaer bruker en teknikk som kalles «lazy loading», som laster en mindre versjon av et bilde først, mens bildet i full oppløsning lastes i bakgrunnen. Dette gjør at kundene kan se gjennom stoffet umiddelbart i stedet for å vente på at store bilder skal lastes helt inn. Prosessen fullføres vanligvis på under ett sekund, men skaper inntrykket av at butikken lastes raskere.

Denne teknikken er spesielt gunstig for butikker med mange bilder, ettersom den forbedrer den opprinnelige innlastingstiden for siden betydelig og gir kundene umiddelbar visuell tilbakemelding.

Feilsøking av bildeproblemer