Upload af billeder

Du kan bruge forskellige typer billeder, f.eks. dit firmalogo, produktbilleder, diasshows, bannere og billeder til blogopslag. Du kan også ændre dine billeder ved at beskære dem og ændre deres størrelse samt tilpasse medieindstillingerne i dit tema for at ændre kanten eller skyggen på alle medier, der vises i din butik.

Hvis du vil have billederne vist i din webshop, præcis som du ønsker, skal du bruge det korrekte billedformatforhold. Billeder optimeres automatisk til dit butikslayout med Shopify Content Delivery Network (CDN).

Upload et billede i temaeditoren

Du kan føje billeder til dit tema i temaeditoren. Du kan også uploade billeder i afsnittet Indhold > Filer i din Shopify-administrator. Få mere at vide under Upload og administration af filer.

Trin:

Tilføjelse af billeder ved hjælp af metafelter

Hvis du har konfigureret metafelter til dine billeder, kan du bruge den dynamiske kildevælger til at føje et billede til din webshop. Du kan finde flere oplysninger om metafelter og understøttede billedformater i Tilføjelse af værdier til metafelter.

Angivelse af et fokuspunkt på et billede

Du kan bruge fokuspunkter til at definere den vigtigste del af et billede i din webshop. Når du angiver et fokuspunkt på et billede, gør du det til fokusområdet. Fokuspunkter vises altid i rammen, selvom du har et tema, der beskærer dit billede for at passe til layoutet. Fokuspunkter giver dig mere kontrol over, hvordan dit billede vises på forskellige skærmstørrelser, og i tilfælde hvor temaer bruger forskellige sideforhold.

Du kan kun have ét fokuspunkt pr. billede, men du kan til enhver tid ændre eller fjerne fokuspunktet.

Kompatibilitet for fokuspunkter med gratis Shopify-temaer

Du kan angive et fokuspunkt i følgende versioner af Shopifys gratis temaer:

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

Hvis du bruger et tredjepartstema, kan du se i temaets dokumentation, om det understøtter brugen af fokuspunkter.

Tilføj et fokuspunkt til et billede

Hvis du føjer et fokuspunkt til et billede og derefter bruger billedet flere steder i din webshop, gælder det samme fokuspunkt, uanset hvor du bruger billedet.

Afhængigt af hvordan temaet beskærer og tilpasser størrelsen på billederne, er fokuspunktet muligvis ikke altid visuelt centreret.

Trin:

1. Klik på et billede fra en af følgende lokationer i din Shopify-administrator:
   • I afsnittet Indhold > Filer.
   • I temaeditoren.
   • I afsnittet Medier i dine produktfortegnelser i afsnittet Produkter.
   • I Shopify Messaging-mail-editoren.
   • I afsnittet Metafelter for en hvilken som helst ressource, der har et metafelt af typen Filreference til tilføjelse af et billede.
2. Klik på billedet, eller træk i den blå prik for at vælge den del af billedet, hvor du vil angive et fokuspunkt.
3. Klik på Gem.

Fjern et fokuspunkt fra et billede

Trin:

1. Klik på et billede fra en af følgende lokationer i din Shopify-administrator:
   • I afsnittet Indhold > Filer.
   • I temaeditoren.
   • I afsnittet Medier i dine produktfortegnelser i afsnittet Produkter.
   • I Shopify Messaging-mail-editoren.
   • I afsnittet Metafelter for en hvilken som helst ressource, der har et metafelt af typen Filreference til tilføjelse af et billede.
2. Klik på Fjern.
3. Klik på Gem som ny.

Billedformater

Følgende billedformater understøttes:

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

Brug af JPEG-billeder

JPEG-billeder er ideelle til fotografering og andre stillbilleder med komplekse farver. JPEG-formatet har en palet med millioner af farver. JPEG har også tabsgivende komprimering, hvilket kan hjælpe med at holde sidens indlæsningstider hurtige uden et mærkbart tab i billedkvalitet. Brug JPEG-formatet til følgende billedtyper:

• produkter
• bannere eller diasshows
• sider og blogopslag

Brug af PNG-billeder

PNG-billeder er ideelle til grafik og ikoner med flade farver og uden gradienter. PNG-formatet understøtter også gennemsigtighed i billeder. Brug PNG-formatet til følgende typer billeder:

• logoer
• ikoner
• kanter og konturer

Automatisk komprimering og valg af format for billeder

Billeder komprimeres ikke, når du uploader dem til din Shopify-administrator, hvilket er med til at bevare deres oprindelige kvalitet. Følgende kan dog ske for at holde sidens indlæsningstider hurtige for dine kunder:

• Billeder i høj kvalitet kan blive komprimeret, når de vises via dit butikstema
• Shopify bestemmer automatisk det bedst mulige filformat, der skal bruges, når dine billeder leveres
• Når en kundes webbrowser understøtter moderne billedformater som f.eks. WebP og AVIF (AV1 Image File Format), leveres dine billeder i disse formater
• GIF'er konverteres automatisk til det animerede WebP-format for at forbedre ydeevnen ved at reducere filstørrelsen

Overvej følgende handlinger for at opnå den bedste billedkvalitet:

• Upload billeder i højere opløsning på op til 5000 x 5000 pixels eller 25 megapixels
• Vælg billedtyper med mindre tab, f.eks. PNG, til stregtegninger, tekst og ikonisk grafik med gennemsigtighed
• Brug JPEG til produktbilleder eller diasshows
• SVG-filer understøttes, men har begrænsninger – de kan ikke transformeres (f.eks. ændre størrelse, beskære), uden at der anmodes om et rasterformat (JPEG, WebP, PNG)

Andre filtyper, f.eks. PSD (Photoshop Document), TIFF (Tagged Image File Format) og BMP (Bitmap), accepteres, men de konverteres til JPEG/PNG ved upload.

Begrænsninger for upload af billeder

Uploads af billeder til Shopify er underlagt begrænsninger for både megapixels (MP) og filstørrelse, der måles i megabytes (MB). Megapixels bruges til at angive, hvor mange millioner pixels et billede består af. Megabytes bruges til at angive, hvor mange millioner bytes et billede optager i hukommelse eller på disken.

Billeder, der uploades til Shopify, må ikke overskride følgende grænser:

• 20 megapixels
• 20 megabytes

Du kan finde dit billedes megapixelværdi ved hjælp af følgende ligning:

(pixelbredde x pixelhøjde)/1.000.000

F.eks. er et billede med en opløsning på 4900 x 6930 pixels på 33,9 megapixels baseret på ligningen: (4900 x 6930)/1.000.000 = 33,9 MP.

Farveprofiler for billeder

Når du ser et billede i din webshop, vises farverne i billedet muligvis anderledes end i det originale billede, du uploader til Shopify. Dette kan ske, når et billede har en farveprofil, som er et datasæt, der er gemt i en fil med filtypenavnet .ICC eller .ICM.

Farveprofiler integreres ofte i billeder for at standardisere den måde, farverne vises på på forskellige enheder. Når billeder vises i din webshop, fjernes deres farveprofiler.

Farveprofiler fjernes af følgende årsager:

• Det er ikke alle enheder, der kan læse farveprofiler af typen .ICC eller .ICM, så hvis de bevares, kan det resultere i uoverensstemmelser i billedfarver på tværs af enheder.
• Når et uploadet billede ikke indeholder en farveprofil, antager webbrowseren, at det er sRGB, som er den mest almindelige farveprofil, der bruges til at vise billeder på internettet. Dette sikrer, at dine billeder vises på samme måde i alle større webbrowsere og på alle enheder.
• Farveprofiler kan optage meget diskplads, hvilket kan resultere i længere indlæsningstider for sider.

Fjern farveprofilen fra et billede

Du kan fjerne farveprofilen fra dit billede ved at gemme det uden farveprofilen, før du uploader det til Shopify. Denne proces varierer afhængigt af dit billedbehandlingsprogram.

Se Adobes dokumentation om, hvordan du kan tildele eller fjerne en farveprofil (Illustrator, Photoshop) og tildele eller fjerne en farveprofil (InDesign).

Bedste fremgangsmåder for diasshows, billedbannere og billeder i fuld bredde

Mange Shopify-temaer indeholder store billeder eller diasshows, der skalerer til din browsers højde eller tilpasser sig din skærmstørrelse.

Hvis du bruger et af disse temaer eller har et stort diasshow eller baggrundsbillede, skal du vide, hvilke typer billeder der vises bedst.

Da store billeder ikke kan passe på alle enheder, viser Shopify nogle gange kun en del af billedet afhængigt af den enhed, du bruger. Hvis dit billeddiasshow indeholder mange store billeder, kan du opleve, at dele af billederne ikke er synlige.

Overvejelser i forbindelse med brug af billeder til diasshows eller billedbannere

Husk på følgende punkter for at sikre, at dine billeder fungerer godt sammen med dit tema:

• Billeder, som du bruger til diasshows eller baggrunde, bør ikke indeholde tekst. Hvis teksten er en del af selve billedet, kan den blive flyttet, beskåret eller justeret afhængigt af dit tema. Brug temaeditoren til at føje tekst og links til dine diasshows og baggrunde.

• Vælg enkle billeder til diasshows eller baggrunde, så eventuel overlejret tekst er let at læse.

Brede billeder på høje skærme

Brede billeder kan blive beskåret i venstre og højre side, når den enhed, der bruges til at se dem, har en høj skærm, f.eks. en mobiltelefon eller en tablet i stående format. I eksemplet nedenfor kan du placere et fokuspunkt i højre side af billedet, hvis personerne er den vigtigste del af billedet.

Høje billeder på brede skærme

Høje billeder kan blive beskåret foroven og forneden, når den enhed, der bruges til at se dem, har en bred skærm, f.eks. en bærbar eller stationær computer. I eksemplet nedenfor kan du placere et fokuspunkt i bunden af billedet, hvis skoene er den vigtigste del af billedet.

Adfærd for indlæsning af billede

Når du besøger en side i din webshop, bemærker du måske, at billeder først ser lidt slørede ud og derefter bliver skarpe efter et øjeblik. Dette er forventet adfærd, som er med til at forbedre din butiks indlæsningshastighed og brugeroplevelse.

Shopify-temaer bruger en teknik, der kaldes lazy loading, som først indlæser en mindre version af et billede, mens billedet i fuld opløsning indlæses i baggrunden. Dette giver kunderne mulighed for at gennemse indhold med det samme i stedet for at vente på, at store billeder indlæses helt. Processen tager typisk under et sekund, men det skaber en opfattelse af, at din butik indlæses hurtigere.

Denne teknik er især en fordel for butikker med mange billeder, da den markant forbedrer den indledende indlæsningstid for siden og giver kunderne øjeblikkelig visuel feedback.

Fejlfinding af billedproblemer