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, Safari, Opera, Edge mv.) –Derfor skal de billedformater som du benytter i shoppen være beregnet til brug på nettet. De understøttede formater er JPG, 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.

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, 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), med mindre 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.

 

Hvilke formater skal jeg benytte?

  • 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
  • PNG: Understøtter gennemsigtig baggrund og mange farver. PNG egner sig til grafiske elementer, logo og tekst
  • JPG: Understøtter mange farver og ikke gennemsigtig baggrund. JPG egner sig til billeder (fotos) og andre komplekse billeder

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

 

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 i 96 dpi (kunne også være 72 dpi), 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.

 

Thumbnails (miniaturebilleder)

For hvert produktbillede oprettes 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 Kontrolpanel > Design Manager > 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 Kontrolpanel > Design Manager > 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 Kontrolpanel > Indstillinger > 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.

 

Nyttige links

  • Læs mere om billedelementer i Hostedshop her
  • Du finder mere information om design templates med tilhørende design manualer her