GIF, JPG og PNG – Sådan bruger du formaterne rigtigt på nettet

6. februar 2015

| Nyt fra os til dig

 

Læs denne guide og bliv meget klogere på, hvordan du bedst benytter dig af billedformaterne GIF, JPG og PNG

Noget man skal tænke over når man skruer en hjemmeside sammen er loadtider, hvor hurtigt kan brugeren hente sidens indhold ned. Her er billeder ofte noget der bringer en sides loadtid op, dette bliver specielt relevant, når man har med mobile devices at gøre. Derfor er det vigtig at optimere størrelserne på billedfiler, og dette kan man bl.a. gøre ved at vælge det rigtige format til formålet. Dette indlæg er ment som en guide der kan hjælpe dig lidt på vej med valg.

Hvad kan .GIF og hvornår skal jeg bruge det?

Da GIF filformatet gør brug af max 256 unikke farver, er det bedst brugt på billeder der hovedsageligt består af solide farver så som logoer og og knapper. Dette resultere tilgengæld også i meget små filstørrelser, men gør at noget som gradienter ikke får et glidende farveskift.

GIF tillader ligesom PNG transparente baggrunde, der tillader dem at blive lagt over elementer. Ved hjælp af en teknik der hedder Dithering, kan man og lave tilnærmelsesvis gennemsigtighed på billedelementer, dog er resultatet sjældent lige så godt som gennemsigtighed i PNG formatet. Dithering kan ligeledes bruges til at gøre farveovergange mere flydende.

Til sidst understøtter GIF også animation. I dag bliver denne feature dog mest brugt til små filmklip eller lignende på steder hvor en egentlig video ikke er mulig eller upraktisk, da udbredelse af scripting sprog som jQuery, langt hen af vejen har overtaget animation på webelementer.

Brugen af GIF som elementer på webbet er generelt faldet og blevet erstattet med .PNG. Og GIF er hovedsageligt brugt pga. dens animations egenskaber til visning af hurtige små klip.

Fordele ved GIF:

  • Lille filstørrelse.
  • Understøtter transparent baggrund.
  • Animation

Ulemper ved GIF:

  • Meget få farver
  • Ofte bedre alternativer.

Vi anbefaler du bruger GIF til:

  • Små solide farvebilleder, som ensfarvede logoer eller knapper.
  • Små animerede loading ikoner.

eksempel-gif-fisk

 

OK… men hvad så med PNG?

PNG kom frem som en erstatning af GIF formatet. PNG understøtter mange flere farver og benytter sig af “lossless” komprimering, det vil sige komprimering uden tab af billedkvalitet. Dette gør det særdeles velegnet til billeder med tekst, solide farver og skarpe kanter, sammenlignet med .JPG, hvor disse bliver stærkt forringet, pga. dette gør PNG formatet velegnet til web elementer som f.eks. logo og knapper.

Ligesom GIF, tillader PNG transparente baggrunde, dog ikke PNG-8, men denne bruges sjældent. Udover det gør PNG det også muligt at give billedet gennemsigtighed, dette gør det særdeles velegnet til webelementer, da man ofte gerne bare vil have billedet til at ligge oven på andre elementer.

Hvor PNG halter er med mere detaljerede og farverige billeder, hvor at dens lossless komprimering gør at billedfilen ofte bliver meget større sammenlignet med JPG formatet. Derfor er PNG ikke velegnet til billeder, selvom billedkvaliteten i dette tilfælde ikke ville fejle noget.

Fordele ved PNG:

  • Mange farver.
  • Understøtter transparence.
  • Komprimering uden tab.

Ulemper ved PNG:

  • Større fil.
  • Ikke velegnet til fotos.
  • Ikke fuldt understøttet på ældre browsere som IE6.

Vi anbefaler du bruger PNG til:

  • Text, solide farver og skarpe kanter.
  • Logo, knapper og andre webelementer.

eksempel-png-fisk


JPG – hvornår skal jeg bruge det?

JPG er måske et af de mest brugte billedformater, men man ser det ofte steder hvor et andet filformat måske ville have været et bedre valg. JPG har, som de andre formater, styrker og svagheder.

JPG gør brug af millioner af farver, og kan gøre dette med relativt små filstørrelser, da den gør brug af det der hedder “lossy” komprimering. Det betyder dog også,  at du mister information i  komprimerings processen. Det kommer dig sjældent til syne i fotos andet end i ekstreme komprimerings-tilfælde. Dog ses det ofte tydeligt i billeder med text, solide farver og skarpe kanter.

I modsætning til GIF og PNG tillader JPG ikke transparence af nogen slags, hvilket gør det uattraktivt web elementer som logo og knapper.

Disse ting gør at JPG bedst bruges til farve komplekse billeder som f.eks. fotos.

Fordele ved JPG:

  • Millioner af farver.
  • Lille filstørrelse.

Ulemper ved JPG:

  • Text, solide farver og kanter forringes.
  • Understøtter ikke transparence.

Vi anbefaler du bruger JPG til:

  • Fotos og andre farve komplekse billeder.

eksempel-jpg-fisk

 

Bedømmelse: 5.0/5. Fra 2 stemmer
Vent venligst...