Billedformater og filstørrelser

Introduktion

I denne artikel gennemgår vi de vigtigste ting, du skal vide om billedfiler i din webshop. Start evt. med, at læse sektionen Kort fortalt herunder, og benyt resten af guiden som reference.

Kort fortalt

Undgå at uploade unødvendigt store billeder til shoppen, så kunden ikke skal downloade mere data end nødvendigt, når de besøger din shop. Hold dine produktbilleder på ca. 1220 x 1220 pixel (højde og bredde) i et af de understøttede formater (JPG, PNG). Shoppen konverterer automatisk uploadede produktbilleder til formatet WEBP, der er optimeret til hastighed. Billedernes dimensioner bevares dog under konverteringen, hvilket betyder, at store billeder stadigt vil forblive store efter konverteringen og potentielt fylde mere end nødvendigt, hvis ikke du på forhånd har nedskaleret dem. Shoppen sørger for, at beholde de oprindelige billeder, og levere dem til ældre browsere, der ikke understøtter visning af WEBP.

Du kan tilpasse billedstørrelser i shoppen via indbyggede værktøjer eller før du uploader dem, hvilket vi ser nærmere på nederst i artiklen.

TIP: Hvis du ønsker, at sælge billedfiler i høj opløsning kan det gøres med funktionen filsalg.

Billedformater og filstørrelser

Billedformater (filtyper)

Når en kunde besøger din webshop bruger de en af flere tilgængelige browsere (Firefox, Chrome, Edge, Safari, Opera osv.), og derfor skal de billedformater du bruger i shoppen være egnede til brug på nettet. De mest populære og bedst understøttede formater er JPG/JPEG, PNG og GIF. Du kan f.eks. ikke uploade en PhotoShop fil (.psd, .eps mv.) eller et PDF-dokument og forvente, at browsere kan vise indholdet i filen. Filformater til billeder i høj opløsning såsom TIF (.tiff) og rå kamerafiler (.nef, .cr2 osv.) er heller ikke egnet til direkte visning uden konvertering til et af de understøttede formater.

Det er ikke muligt at ændre filformat ved blot, at skifte endelse på filen fra f.eks. ".psd" til ".jpg" da filens data-indhold forbliver uændret. Vi ser nærmere på konvertering af billeder senere i denne artikel.

Bemærk: Hvis du tilbyder filsalg kan andre filtyper uploades via funktionaliteten for filsalg. Du kan læse mere om filsalg her. Du kan ligeledes benytte shoppens FTP-funktionalitet til, at lægge andre filtyper op i shoppens filhåndtering, hvis nødvendigt.

Billedstørrelser (filstørrelser)

Et billedes filstørrelse afhænger af billedets dimensioner (højde og bredde) og detaljegrad (jo flere farver, altså forskellige pixels, jo flere data). Du kan i princippet uploade så tunge billeder du ønsker i formaterne JPG/JPEG, PNG og GIF. Dog skal du være opmærksom på, at store billeder generelt ikke er egnet til visning på nettet da store mængder data kan sløve visningen (load tiden) af din shop (se sektionen Hastighedsoptimering med WEBP længere nede i artiklen). Store filer fylder ligeledes i systemet og begrænser den øvrige plads som du har til rådighed på dit abonnement. Vi anbefaler, at du ikke anvender billeder direkte fra dit kamera eller leverandør (packshots, miljøbilleder osv.), medmindre billederne i forvejen er konverteret og skaleret ned til brug på nettet, hvilket vi gennemgår nederst i artiklen. Sørg derfor for, at gennemgå størrelsen på dine billeder inden du uploader dem til shoppen. Nederst i artiklen kan du læse hvordan du massekonverterer billeder til andre formater og filstørrelser.

Farveprofiler (ICC-farveprofil)

Webshoppen genererer automatisk thumbnails (miniaturebilleder) til dine billeder, som vi også beskriver længere nede i denne artikel. Disse thumbnails oprettes med farveprofilen sRGB (sRGB IEC61966-2.1), som er standardprofilen til billeder på internettet. Vi anbefaler, at du gemmer alle dine billeder med denne farveprofil inden du uploader dem til webshoppen da du kan opleve en forskel i farverne på dine billeder (orange farver ser brune ud osv.), hvis du bruger en anden farveprofil som f.eks. Adobe RGB (PhotoShop), Apple RGB, ProPhoto RGB mv. De fleste billedredigeringsprogrammer (som f.eks. Affinity Photo) kan både vise og konvertere farveprofiler, inden du gemmer dine billeder til brug i webshoppen. Husk at nulstille dine thumbnails, hvis du foretager ændringer. Du kan læse mere om dette i sektionen "Thumbnails (miniaturebilleder)", herunder.

Hvilke formater skal jeg benytte?

• JPG/JPEG: Understøtter mange farver og ikke-gennemsigtig baggrund. JPG egner sig til fotografier og andre komplekse billeder. Som udgangspunkt kan du bruge JPG til dine produktbilleder og bannere:
  
• PNG: Understøtter gennemsigtig baggrund og mange farver. PNG egner sig til grafiske elementer, logo og tekst:
  
• GIF: Understøtter gennemsigtig baggrund, få farver og kan benyttes til animationer. GIF egner sig til mindre grafiske elementer, logo og GIF-animationer med begrænset antal farver:
  

Af ovenstående kan man udlede, at produktbilleder og billedbannere mv. bør gemmes som JPG så længe der er tale om fotos (produktbilleder konverteres automatisk til WEBP formatet som beskrevet herunder). Forsøg så vidt muligt, at holde billedstørrelser så små som muligt. Med JPG kan du styre kompressionen (billedkvaliteten) i din grafiske software (Affinity Photo, PhotoShop, Paint, IrfanView mv.), så balancen imellem billedkvalitet og filstørrelse når et acceptabelt niveau uanset billedets dimensioner. Har du et logo med gennemsigtig baggrund kan du benytte PNG eller GIF. Du bør dog være opmærksom på at GIF har sine begrænsninger i forhold til antal farver, og at animeret GIF hurtigt kan fylde en del.

Hastighedsoptimering med WEBP

Shoppen genererer automatisk en ekstra version af de billeder du lægger op i formatet WEBP. Det gælder for Produkt-, Slider- (billedbanner) og kategoribilleder. På denne måde kan shoppen servere billedet i WEBP format, hvis browseren understøtter dette, og ellers benyttes det originale billede som fallback.

Lægger man to billeder med samme navn, men i forskellige formater f.eks. "billede.jpg" og "billede.webp", så tager shoppen WEBP billedet hvis browseren understøtter formatet. Du kan med andre ord indsætte et JPG billede på en tekstside og lægge en udgave i WEBP med samme navn under samme placering i shoppens filhåndtering (Webshop > Filer), hvorefter shoppen automatisk vælger imellem de to. De genererede miniaturebilleder (thumbnails) placeres automatisk i mappen "_thumbs", som er synlig via FTP.

Er det nu også nødvendigt at gå ind i dette? –Da shoppen automatisk konverterer de mest essentielle billeder behøver du ikke bekymre dig om denne funktionalitet. Det er dog godt at vide så begreberne ikke er helt fremmede.

WEBP er et billedformat, der oprindeligt er udviklet af On2 Technologies (nu Google) og som er designet til, at fylde mindre end de gængse formater men med samme kvalitet. Google Page Speed anbefaler WEBP som et optimeringsparameter netop for, at få en hurtigere side. 94% af alle browsere understøtter WEBP medio 2021 omend ikke alle billedbehandlingsprogrammer gør det. Hvis du selv ønsker at konvertere et billede til WEBP i stedet for, at lade shoppen gøre det så kan du benytte Irfan View med WEBP-plugin (begge dele er gratis og findes via linket) eller f.eks. Affinity Photo 2 (og nyere), der kan anskaffes for nogle få hundrede kroner.

Øvrige formater:

SVG: Er i modsætning til ovenstående formater et skalerbart vektor format, altså ikke pixel grafik. SVG benyttes typisk til logo filer og har ingen fast størrelse, da denne beregnes ved visning. Shoppen understøtter i øjeblikket SVG i sideindholdet.

Hvad er en passende billedstørrelse?

Når vi taler om filstørrelser, vurderer man hvad filen benyttes til. Er det f.eks. produktbilleder, som der typisk er mange af, skal man sørge for, at holde filstørrelsen nede. En passende filstørrelse til et produktbillede er imellem 50 og 350 KB (kilobytes), alt efter kompleksitet. Har du f.eks. et stort præsentationsbanner på forsiden (alt efter hvilket design du benytter), kan dette godt fylde mere, hvis du vurderer, at det er vigtigt for shoppens fremtoning omend det kan give længere load tid for besøgende alt efter deres internetforbindelse mv.

Her er nogle generelle guidelines til billedstørrelser i shoppen, som er baseret på shoppens standard design Simpl. Billedstørrelserne kan dog variere alt efter behov og design. Hvis dit design afviger fra standard-størrelserne vil det fremgå af designets designmanual:

• Billedelement/slider (billedbanner): 2560x704 pixel
• Blog banner: 2560x704 pixel
• Blog forfatter: 50x50 pixel
• Galleri: Frit, men anbefales at billedet er kvadratisk
• Kalender event: 320x240 pixel
• Produkt brand: 100x100 pixel
• Produkter og varianter: 1220x1220 pixel (for en god opløsning på de fleste enheder)
• Produktkategori: 380x380 pixel
• Variant billede knapper: 34x34 pixel

Billedet herunder kan tjene som eksempel på et produktbillede. Billedets filtype er JPG, dimensionerne er 1220x1220 pixel og fylder 169 KB. Klik på billedet for at se det i fuld størrelse, hvis dimensionerne på dit browservindue tillader fuld visning:

Havde der været færre farver og detaljer ville billedet være lettere, fordi der benyttes færre data til at definere billedets indhold. Grunden til at billedet er kvadratisk skyldes, at det pågældende design fordrer et kvadratisk format. Dette kan variere fra design til design.

Beskæring, skalering og konvertering

Som shopejer er det vigtigt, at finde et billedredigerings værktøj, som kan løse de behov, der opstår løbende når man arbejder med produkt- og kategoribilleder, billedbannere, billeder til sideindhold, nyheder og blogindlæg mv. Billedfiler er et emne som godt kan fylde lidt i starten men det er kun indtil man føler sig hjemme i processen. Produktbilledet i forrige sektion kan f.eks. godt virke stort til nogen produkter. Og i så fald kan man bare lave sine produktbilleder mindre. Man kan også overveje at benytte flere produktbilleder af samme produkt taget fra forskellige vinkler for, at vise forskellige egenskaber ved produktet.

I eksemplet herover har vi åbnet den originale billedfil i billedredigerings programmet Affinity Photo, der kan erhverves for nogle få hundrede kroner. Herefter beskærer vi filen med crop-værktøjet, og sætter en ny bredde på 900 pixel direkte i eksportdialogen (File > Export). Vi sørger for, at skarpheden bibeholdes ved skaleringen (Resample), og sætter kompressionen (Quality) til 80%, hvorefter filstørrelsen reduceres betydeligt. Vi kan herefter benytte den nye billedfil som produktbillede i vores webshop:

I dette eksempel har vi lagt et billede ind for hver farve, som vores produkt findes i, og sørget for, at billederne skifter når vi vælger variant. Du kan læse mere om varianter i denne artikel.

TIP: Softwaren herover kan i øvrigt også håndtere masse-skalering (batch conversion), hvis du har mange billeder. Og nederst i denne artikel viser vi ligeledes, hvordan du masse-skalerer billeder med IrfanView, som er gratis software.

Thumbnails (miniaturebilleder)

For hvert produktbillede oprettes automatisk et lille billede, også kaldet et "thumbnail", som benyttes til visning i oversigterne. Idéen bag dette er, at mindske mængden af data ved ikke, at præsentere det fulde produktbillede før man får vist produktet. I praksis dannes thumbnails første gang et produkt vises på shoppen. De dannes med andre ord løbende og arkiveres i shoppens filhåndtering:

Du kan sætte kvaliteten (komprimering af billedinformationer), og dermed størrelsen på thumbnails i shoppen under Webshop > Design > Tilpas, under sektionen Indstillinger. Rul ned til Thumbnail kvalitet:

Hvis du benytter produktbilleder, som ikke udfylder billedrammen i produktvisningen vil shoppen selv indsætte en farve i det område, som ikke går til kant på både produkt billeder og thumbnails. Standard farvevalg for de fleste designs er transparent. Du kan ændre billedernes baggrundsfarve under Webshop > Design > Tilpas under sektionen Farver:

Ovenstående betyder, at thumbnails genereres med den valgte baggrundsfarve første gang et produkt besøges, enten direkte eller via en produktoversigt i shoppen. Ændrer du efterfølgende baggrundsfarve på et billede vil du ikke kunne se farveskiftet på thumbnails før du nulstiller alle dine thumbnails i shoppen så de genereres på ny med den nye farve. Du kan nulstille dine thumbnails under Indstillinger > Webshopindstillinger > Nulstilling som vist her:

Husk, at klikke på Gem for, at gennemføre nulstillingen. Genindlæs herefter visningen i din browser (F5) for, at se ændringerne ude på butiksfronten.

I dette eksempel har vi en PNG billedfil med gennemsigtig baggrund så vi kan se webshoppens baggrundsfarve bagved motivet. Vores billede vil forblive gennemsigtigt uanset om vi vælger en baggrundsfarve i vores indstillinger eller ej da billedet er kvadratisk og udfylder hele billedfeltet:

I dette eksempel har vi et rektangulært billede med hvid baggrund. Baggrunden har vi sat til transparent:

I dette eksempel har vi sat en baggrundsfarve. Den mørkere grå kan ses på hver side af billedet. Da shoppen genererer thumbnails med en bredde som designet foretrækker tilføjes baggrundsfarven i det område, som ikke går til kant:

Bemærk: Hvis du oplever at dine thumbnails har en anden farvetone end du forventer så skyldes det typisk, at billedet er uploadet med en farveprofil, som ikke er beregnet til brug på nettet. Se øverst i denne artikel for yderligere information omkring farveprofiler.

Husk, at nulstille dine thumbnails (se sektionen herover) således, at ændringerne slår igennem ude på shoppen.

Bannere (billedelement)

Indholdssider giver mulighed for, at lægge et eller flere billedbannere (kaldet "billedelement") i en billedkarrusel, som vises i toppen af siden. Det er muligt, at lægge tekst og link ind på banneret, og det er ligeledes muligt, at sætte et tidsinterval for, hvornår og hvor længe et billedelement skal være synligt, hvilket er oplagt til sæsonrelaterede kampagner, udsalg osv.

I dette eksempel benyttes designet "Simpl" der som standard placerer banner-teksten i venstre side, hvilket kan ændres under opsætningsindstillingerne på designet –disse indstillinger kan variere fra design til design. Vi har lagt et banner på forsiden med størrelsen 2560 x 704 pixel:

• Læs mere om størrelser og indstillinger for billedelementer i denne artikel
• Læs mere om at skabe blikfang med billedbannere i vores artikel om Black Friday og udsalg generelt

Logo

Shoppen skelner imellem det logo, der benyttes ude på shoppen:

Og det logo, som benyttes til e-mail og udskrift på ordrebekræftelse, faktura osv.

Grunden til dette er blandt andet, at e-mails ikke nyder samme fleksibilitet i opsætningen som f.eks. en webshop, der altid vises i en browser. Så her vil man typisk indsætte en eksakt billedstørrelse, hvorimod logoet på webshoppen kan skalere i størrelse alt efter visning på mobil, tablet og computer. Samtidigt er det udbredt at printe ordrebekræftelser, pakkesedler og faktura i sort/hvid, hvilket man kan tilgodese med en logofil til formålet (logodesigns leveres typisk i både farver, monokrom eller sort/hvid til blindtryk på salgsmaterialer og produkter mv.).

Derfor er det muligt, at tilføje to separate logofiler under Webshop > Design > Tilpas i sektionen Grafik & skrifttyper ved, at ændre Logo type til "Grafik":

Husk, at klikke Gem når du har foretaget dine ændringer. Indstillinger som Logo position mv. er design-specifikke og kan derfor variere fra design til design. Du kan læse mere om, hvordan du tilføjer et logo til dit design i denne artikel.

Bemærk: Hvis du kun har valgt et logo til shoppens design og ikke til e-mails/print, benyttes automatisk den logofil som du har valgt til shoppens design (øverst i oversigten). Via print ikonerne på den enkelte ordre kan du se, hvordan logoet tager sig ud:

I dette eksempel har vi klikket på fakturaikonet på ordren:

Hvis vores logofil havde været større ville den skubbe indholdet ned på siden og danne en faktura der ser uharmonisk ud. Og da logoet ligeledes benyttes til ordremails som ordrebekræftelser osv. vil det også påvirke layoutet på de mails vi sender ud fra shoppen.

Det er også muligt at, benytte funktionen "E-mail og print preview" som du finder under både Indstillinger > E-mailindhold og Indstillinger > Printet indhold (Klik på knappen "E-mail og print preview"). Herefter får du mulighed for, at opsætte din forhåndsvisning:

1. Vælg de ønskede indstillinger: Ordre, Ordrestatus e-mails, den ønskede ordre osv.
2. Klik på Vis for, at generere et preview ud fra de valgte indstillinger

Du kan i øvrigt læse mere om tilpasning af e-mail og udskrift template i denne artikel.

Vandmærke

Det er muligt i shoppen, at placere et logo ovenpå alle eksisterende produktbilleder for f.eks. at angive ejerskab mv. Dette kaldes et vandmærke. For at vandmærket tager sig bedst ud bør det være et billede af typen PNG med gennemsigtig baggrund, og placeres på et billede der ikke i forvejen har gennemsigtig baggrund, hvilket ellers kan give pixelerings-artefakter (uønsket støj) under sammenlægning af filerne.

I eksemplet herunder er vandmærket placeret i bunden til venstre på produktbilledet:

Du finder indstillinger for vandmærke under Webshop > Design > Tilpas fold sektionen Grafik og skrifttyper ud som beskrevet nærmere i denne artikel. Bemærk: hvis du ændrer i indstillinger for vandmærke eller skifter vandmærkebillede, skal thumbnails (miniaturebilleder) nulstilles som beskrevet længere oppe i denne artikel for, at ændringerne slår igennem ude på shoppen. Dette bevirker, at thumbnails genereres på ny med de nye indstillinger.

Læs mere om vandmærker her.

Masseændring af billedfiler

For at ændre billedstørrelse på en hel samling af billeder ad gangen (også kaldet batch eller bulk resizing/conversion) kan du benytte både online services som Canva, og forskellige grafiske programmer så som f.eks. Affinity Photo, Photo Shop, Irfanview mv. der kører lokalt på din computer. Fordelen ved, at vælge et program der kører lokalt er, at du ikke først skal uploade dine filer for herefter, at downloade efter fuldført konvertering. Det går med andre ord hurtigere, og du beholder dine filer i eget regi. Vi har valgt, at vise et eksempel, hvor vi benytter IrfanView, der efterhånden er en gammel kending på internettet, som både kan benyttes til at gennemse og ændre billeder.

Klik på punkterne herunder for at følge guiden:

Nyttige links

• Benyt filsalg til, at sælge billedfiler i høj opløsning.
• Læs mere om billedelementer i shopsystemet her
• Læs mere om, at skabe blikfang med billedbannere i vores artikel om Black Week og udsalg generelt
• Du finder mere information om designs i denne oversigt
• Læs evt. vores guide til ændring af farver og synlighed med CSS
• Vil du vide mere om opsætning af variantprodukter kan du læse mere her
• Eksempel på online software til simpel billedredigering: canva.com
• Eksempel på software til billedredigering og massekonvertering: Affinity Photo (Windows PC, Mac, iPad)
• Eksempel på software til animerede GIF: ScreenToGif (Windows PC)
• Eksempel på software til masse konvertering af billeder: IrfanView (Windows PC)
• Du kan læse mere om tilpasning af e-mail og udskrift templates i denne artikel