Billedformater og filstørrelser

I denne artikel:


 

Introduktion

Billedformater (filtyper): Når en kunde besøger din shop på nettet, benyttes en af flere tilgængelige browsere (Firefox, Chrome, Edge, Safari, Opera mv.) –Derfor skal de billedformater som du benytter i shoppen være beregnet til brug på internettet. 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 direkte kan vise indholdet i filen. Filformater til billeder i høj opløsning såsom TIF (.tiff) og rå kamera-filer (.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. ".webp" 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): 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. 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), medmindre billederne i forvejen er skaleret ned til brug på nettet. 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.

 

Hvilke formater skal jeg benytte?

  • JPG/JPEG: Understøtter mange farver og ikke gennemsigtig baggrund. JPG egner sig til billeder (fotos) 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, bannere mv. bør gemmes som JPG, så længe der er tale om fotos. 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.

 

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 hvilken design template 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.

Produktbilledet herunder er fra vores demoshop og kan tjene som eksempel. Billedets filtype er JPG, dimensionerne er 1100x1100px (pixel) og fylder 130 KB. Klik på billedet for at se det i fuld størrelse, hvis dimensionerne på dit browservindue tillader fuld visning:

Havde der været flere farver og detaljer i baggrunden ville billedet være tungere, fordi der benyttes mere data til at definere billedets indhold. Grunden til at billedet er kvadratisk, skyldes at den pågældende designtemplate hvor billedet benyttes, 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 proceduren. 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.

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 (kompression), og dermed størrelsen på thumbnails i shoppen under Webshop > Design > Ret design > Indstillinger > Thumbnail kvalitet. Som du måske har gættet, ud fra ovenstående gennemgang, genereres thumbnails som JPG-billeder i Hostedshop:

Hvis du benytter produktbilleder som ikke udfylder billedrammen i produktvisningen, vil Hostedshop 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 designtemplates er transparent. Du kan ændre billedernes baggrundsfarve under Webshop > Design > Ret design > 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:

Som vist på billedet er den hvide baggrundfarve nu ombyttet til en farve der matcher baggrundsfarven på produktbilledet.

 

Bannere (billedelement)

Indholdssider i Hostedshop 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 "Sprout", der som standard placerer banner-teksten nederst i højre 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 1240 x 440 pixel:

 

Logo

Man 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 (logo designs leveres typisk i både farver og monokrom eller sort/hvid, til blindtryk på salgsmaterialer og produkter mv.).

Derfor er det muligt at tilføje to separate logo-filer under Webshop > Design > Ret design > Generelt > Grafik & skrifttyper:

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:

Her har vi undladt at vælge et logo til e-mail og print, hvormed det primære logo benyttes og skubber teksterne (under logoet) ned på siden:

Havde vi slet ikke valgte nogle logoer, ville logotypen være "Tekst" og derfor tage teksten som defineret under Indstillinger > Kontooplysninger.

Her har vi derimod indsat et mindre logo specifikt til ordrestatus e-mails, og kan dermed bevare formateringen som ønsket:

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:

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 > Ret design > fanebladet "Opsætning" > 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.

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 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:

Start IrfanView og åben dialogen til konvertering af billeder, ved at gå til "File > Batch Conversion/Rename..."

Dialogen indeholder en række muligheder i forhold til filformat og billedstørrelse mv. som vi gennemgår i artiklen. Når først man kender til processen er det hurtigt at foretage masseændring af billedfiler via programmet:

  1. Her sættes den ønskede filtype. Når man skal klargøre billedfiler til brug på nettet, er de foretrukne filtyper JPG, PNG og GIF. Normale farvebilleder bør være JPG. Via knappen Options kan du sætte komprimeringen af billedet, hvilket vi gennemgår senere. Har du et grafisk billede, logo mv. som har gennemsigtig baggrund, kan du benytte PNG. Hvis billedet indeholder få eller ingen farvenuancer kan du benytte GIF. GIF understøtter også gennemsigtig baggrund og kan desuden animeres, altså vise en sekvens af billeder der skifter med mellemrum (du kan benytte programmet ScreenToGif hvis du vil lave GIF-animationer).
  2. Her sættes indstillingerne for billedstørrelse. Du kan f.eks. vælge at alle billeder skal have samme bredde.
  3. Her navigeres til den mappe med billeder du ønsker at konvertere
  4. Her udvælges de billeder, som skal omfattes af konverteringen fra visningen ovenfor
  5. Her vælger du hvor de konverterede billeder skal placeres
  6. Når du er klar til at gennemføre konverteringen, klikker du på knappen Start Batch

Det ønskede filformat sættes ved at klikke på knappen Options, som vist på billedet. Herefter åbner konverteringsdialogen. Da dine produktbilleder typisk vil være af typen JPG/JPEG, viser vi dialogen for dette format. Øverst i dialogen har du en slider, hvor du kan sætte komprimeringen (kvaliteten) af billedet. Du vil ofte kunne benytte en kompression imellem 60 og 80. Jo lavere jo mindre fylder billedet.

Klik på knappen Advanced for at få vist dialogen for billedstørrelse mv. Sæt flueben i RESIZE, hvorefter du kan sætte en standard bredde på alle dine billeder. Du kan ligeledes bede programmet sætte den længste side af billedet til en fast værdi, hvilket er praktisk hvis dine billeder svinger i formatet, f.eks. som portræt (højt/smalt billede), landskab (bredt/lavt billede).

Vælg de filer der skal behandles, ved enten at markere dem, eller ved at klikke på knappen Add all, for at tilføje alle filerne i den valgte mappe.

Når du er klar til at gennemføre konverteringen (og du har sat destinationsmappen under punkt 5 i oversigten) klikker du på knappen Start Batch.

 

Nyttige links

  • Læs mere om billedelementer i Hostedshop her
  • Læs mere om at skabe blikfang med billedbannere i vores artikel om Black Friday og udsalg generelt
  • Du finder mere information om design templates med tilhørende design manualer her
  • 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å 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