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 load tider, hvor hurtigt kan brugeren hente sidens indhold ned. Her er billeder ofte noget der bringer en sides load tid 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 resulterer til gengæ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 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å websites 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
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
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
WebP – Hvad er det for noget?
WebP er Googles eget billedformat, udviklet til at skabe en overlegen komprimering af billeder på internettet. Det er ment som et alternativ til JPG, PNG og GIF-filer. Med WebP kan webudviklere lave mindre og flottere billeder, der gør hjemmesiden i stand til at blive indlæst hurtigere. WebP fungerer både som stillbillede og animeret, hvilket giver stor fleksibilitet i de mulige udtryk på den hjemmeside, man gerne vil skabe.
Det er bygget på VP8 video-codec og benytter sig derfor af teknologi, som er meget udbredt og velafprøvet. WebP kan bruges som en filtype, der fylder mindre end de gængse billedtypers formater. Der kan dog være en forringelse i farverne på billedet, og derfor bør man teste, om udtrykket matcher det ønskede resultat.
Fordele ved WebP:
- Mindre filstørrelse end PNG og JPG
- Billeder loades lynhurtigt
- Tillader transparente baggrunde som PNG
- Det understøtter ”lossy” og ”lossless” funktioner
- Google arbejder løbende på at forbedre formatet
Ulemper ved WebP:
- Understøttes ikke af alle browsere endnu
- Ligesom med andre ”Lossy/Lossless” funktioner så taber man lidt på kvalitet når billedet komprimeres, særligt på større billeder
- Ikke nær så udbredt som PNG og JPG