Sådan vælger du det rigtige billedformat (GIF, PNG & JPG)

Tips & tricks | 1 minuts læsning

Af Erik Holflod Jeppesen – Founder, Grafikr A/S

25. april, 2017
filtyper

Der findes flere forskellige filformater til billeder, hvor de mest brugte er: JPEG, PNG og GIF. Hvilket filtype og billedformat du uploader til din hjemmeside, har en stor betydning for din hjemmeside hastighed. Du skal specielt være opmærksom på, hvor og hvordan du bruger de forskellige billedformater på din hjemmeside, da store billedefiler kan være med til at  forringe ens loadtid. Vi har skrevet en guide omkring hastighedsoptimering af Shopify webshops , hvis du ønsker at dykke nemmere ned i emnet omkring det at have en hurtig webshop.

Jeg anbefaler, at du anvender det til f.eks. ensfarvede knapper eller i dit logo. Hvis du har knapper eller billeder med en gradient-effekt, så frarådes det at bruge GIF, da filformatet maks. kan gøre brug af 256 unikkefarvekoder, og du vil derfor ikke få en glidende overgang i din gradient-effekt. Det absolut bedste til et upload af logo ville dog være .svg, da det er vektor og kan skalere op i uendelig størrelse, uden at miste kvalitet.

GIF

gif

Ligesom PNG så er det muligt at bruge transparente baggrunde ved GIF, hvilket er godt hvis du skal indsætte et ikon på et billede eller på din hjemmeside.

Den nok mest kendte “funktion” ved GIF er muligheden for animation, hvor det hovedsageligt bliver brugt til korte “filmklip”.

Men står man og skal vælge mellem GIF eller PNG som et element på sit website, så vil faldet typisk falde på PNG.

Fordele ved GIF:

  • Filstørelsen er lav
  • Mulighed for transperant baggrund
  • Kan bruges til animationer

Ulemper ved GIF:

  • Få unikke farvekoder

Dette billedformat er overordnet set en forbedring af GIF, da PNG kan vise flere unikke farvekoder og det er muligt at komprimere billedet uden at det mister kvalitet. PNG velegner sig til det meste: Diverse call-to-action elementer, knapper, billeder med tekst og billedformaten bruges tit online.

PNG

png

Ved PNG er det muligt at gemme et billede med transperant baggrund. Det bruges tit hvis du skal have et logo ind på din hjemmeside eller hvis du skal have et element til at ligge oven på et andet. Størrelsen på billedfilen hos PNG fylder hovedsageligt mere end JPG. Så hvis du har et decideret fotografi, så er det bedre at bruge JPG.

Fordele ved PNG:

  • Flere farver
  • Transperant baggrund
  • Mister ikke kvalitet ved komprimering

Ulemper ved PNG:

  • Billedfilen fylder mere.
  • Ej velegnet til fotos.

JPG

Har man et decideret billede, som er taget med et kamera, så er det som regel JPG, der anbefales. JPG-billeder anvender nemlig flere millioner unikke farvekoder, hvilket giver fotos en god kvalitet. Hvis man har billeder med tekst, skarpe kanter eller solide farver, så er JPG ikke så godt, hvis man komprimerer billedet, da den her mister lidt kvalitet. Er der tale om et almindeligt fotografi, uden tekst og andre elementer, kan man roligt komprimere det.

JPG tilllader ikke transperante baggrunde, og det frarådes derfor at bruge det til logo, knapper og andre webelementer.

jpg

Fordele ved JPG:

  • Millioner unikke farvekoder
  • Filstørrelsen er lav.

Ulemper ved PNG:

  • Tekst forringes ved komprimering.
  • Ej mulighed for transparent baggrund.

Hvis du kunne lide dette blogindlæg om filformater, så anbefaler jeg, at du også læser vores tips til billedstørrelser på Facebook:

Find de rigtige billedstørrelser til Facebook

 

Må jeg sende mit næste blogindlæg til dig? 🎉

Indtast din e-mail herunder og vær den første til at få besked, næste gang vi skriver et nyt blogindlæg om Shopify eller e-handel
shopify logo

 

 

Erik Holflod Jeppesen

Erik er partner og medstifter af Grafikr A/S. Erik er ansvarlig for den daglige projektledelse, hvor han bl.a. rådgiver kunden undervejs samt drifter igangværende design- og udviklingsprojekter, så kundens idé ender med et succesfuld resultat. Erik holder også et vågent øje med tiden for at sikre, at deadlines bliver overholdt.