Er du i tvivl om billedfiltyper?

Der findes mange typer filtyper man kan benytte sig af, som designer eller webudvikler anbefaler vi bestemt at man sætter sig lidt ind i nogle af dem. Derfor har vi lavet en liste over forskellige filtyper der kan have en relevans for dig.

Begreber

Lossless vs lossy.
Lossless= Billede mister ikke billedkvalitet, lidt meget hvor stort eller småt billedet bliver.
Lossy= Billedet/grafikken mister kvalitet ved at bliver forstørret eller formindsket f.eks.
                                                                                    Logo forskel fra Lossless til Lossy

 

Tips

Se filstørrelser således:
Hvis du ønsker at se kvaliteten og størrelsen på en given filtype, så gør følgende:
1.) Find billedfilen
2.) højreklik på den og vælg “properties” eller “egenskaber”
3.) Under den tap der hedder “General” vil du her kunne se størrelsen af din fil
4.) Under den tap der hedder ”Detaljer” kan du se opløsningen af din fil

 

WebP

Et af de nye filformater der er kommet, er WebP, som WordPress nu understøtter. For at gøre det kort, WebP gør det muligt for webudviklere og webmasters at lave mindre og rigere billeder, som gør ens hjemmeside hurtigere ift. Andre filformater.
Det er derfor et utrolig effektivt filformat til web.

WebP supporter også transparente baggrunde, som vi normalt kender fra PNG. Dog er WebP hurtigere og bedre. Man kalder også denne form for support ”Alpha”.

WebP filformat er det man kalder ”Lossless”, dvs. når billede bliver komprimeret, mister du ikke kvalitet i billedet, men filstørrelsen bliver formindsket. Lidt ligesom du måske kender ved SVG-filer – Som vi også vil snakke mere om i denne artikel.

Det gør din load hastighed på f.eks. en hjemmeside, væsentlig mere optimeret / hurtigt, da hjemmesiden ikke skal loade tunge billeder.

Sammenligning af WebP 4k vs. JPEG 4K (samme billede)

WebP er supportet af følgende browsere (listen kan være out of date)
Google Chrome, Firefox, Edge, Opera.
WebP er også supportet af mange forskellige softwares, redskaber mm.

Du kan konvertere dine billeder til WebP via Photoshop, eller andre online redskaber via Google.
Søg f.eks. WebP image converter

 

PNG

 

Portable Network Graphics
PNG-filformat har mange gode egenskaber, et af egenskaberne er at man kan lave transparente billeder. Altså billeder der ikke har en baggrund.
Udover at kunne gemme transparente billeder, minder PNG tildeles om filtypen JPEG.
Men… PNG har også andre gode egenskaber.
Har du et billede hvor man kan tælle de farver der er i brug, kan du som tommelfingerregel anvende PNG. Hvis du f.eks. har billede af en tegneseriefigur, i dette scenarie vil en PNG-fil fylde væsentlig mindre og bedre, end hvis du gemte filen som JPEG-fil.

Er billedet derimod i mange forskellige farvenuancer, detaljeret har en baggrund der skal bruges, så gem det i JPEG. Du kan i dette tilfælde også gemme det som WebP hvis billedet kun skal uploades til internettet udelukkende.

En generel ulempe ved PNG er at det er ”Lossy”
Ved PNG bliver kvaliteten forringet hvis du f.eks. prøvet at forstørre eller formindske billedet. Det kan også miste billedkvalitet af at blive sendt og downloadet af andre, afhængig af hvor du sender fra.

Vi anbefaler at du sender alle billeder via https://wetransfer.com/, som er gratis og nemt.

 

JPEG

Har du et billede i høj opløsning, med mange detaljer?
Så kan du i mange tilfælde roligt benytte JPEG filtypen.

Ulemper

-JPEG understøtter ikke gennemsigtig baggund / transparrent baggrund.

– JPEG er ”Lossy”
Betyder at kvaliteten af dit billede kan blive forringet hvis du f.eks. prøver at forstørre eller formindske billedet. Det kan også miste billedkvalitet, ved at blive sendt og downloadet af andre, afhængig af hvor du sender fra (Facebook f.eks.).

Spørgsmålet ligger lidt hvor du gerne vil have det billede hen, hvis billedet udelukkende skal ligge på nettet, foreslår vi du anvender WebP hvis den type software du uploader det til, supporter WebP.
-Supporter den software du skal benytte IKKE WebP, så anvend evt. JPEG.

Skal du derimod have printet et billede er der andre ting du skal vide inden du printer.
Du skal her være opmærksom på blandt andet farver – Som du kan læse mere om HER.

Dog har JPEG en højere ”compression rate” end PNG, hvilket gør at JPEG er bedre at bruge til billeder i høj opløsning.

 

RAW

RAW-filformat ligger lidt i ordet, det er altså et ’råt’ filformat.
Dvs. Billeder fanger alt der passerer forbi linsen, uden noget ’noise reduction’ og alt andet ’exposure’, som ens kamera normalt vil tage højde for at fikse i billedet. Hvis du ikke ved hvad det betyder så bare rolig, RAW anvendes primært at fotografer. Hvis du ønsker at arbejde som fotograf, foreslår vi du læser om de, og mange andre fagbegreber.

RAW bruges som sagt af Fotografer, sådan at de har meget at arbejde med på billede ift. Til redigering mm. Den har ikke så stor betydning for den almene webudvikler, men er godt at kende til.

 

SVG

Scalable Vector Graphics
Denne filtypes er det man kalder vector grafik, og er ikke noget man bruger til normale typer billeder rigtigt.

Vector grafik kort sagt en masse kode som udregner størrelsen og din fil i en XML-fil. Det betyder også at hvis du er en haj til at kode, kan du kreere eller redigere disse filer direkte i dets kode.

SVG fylder utroligt lidt da det hele er kodebaseret, lidt ligesom JSON.

Sammenligning af SVG-filstørrelse vs. JPEG-filstørrelse (samme logo)

845 bytes SVG —- 2.42 KB JPEG (2.485 bytes)

SVG er ”lossless” – Dvs. skalerbar i alle størrelser.
Man bruger det derfor ofte til logoer, slogans mm.
Da man ville kunne skalere ens logo op på et fly, og kvalitet vil stadig så helt skarp.
Du vil også kunne minimere logoet til print på en kuglepind, og kvaliteten ville stadig være den samme.

SVG er altså primært til Logoer, grafiske tegninger, slogans mm. Til print.
Generelt bruger man SVG til print

 

AI

AI-filen, er den filtype Illustrator og andre programmer gemmer i. Ligesom Photoshop filer gemmes som PSD.

Denne fil er også Vector-baseret. (Kig på SVG, hvis du ikke ved hvad Vector-baseret betyder)

Denne fil er det god til hvis man beslutter sig for at få lavet ændringer i sit logo en dag, da man hurtigt kan acces denne fil igen, og redigere i alle elementer. Det kan du dog også med SVG, men du kan risikere at miste data ved at åbne den frem for original-filen.

 

EPS

EPS-filen, er egentlig bare en Vector-baseret format, ligesom AI, og SVG.
(Læs om hvad en Vector-fil er, oppe ved SVG)

Hvis man skal bruge den modtaget fil til print, bliver denne format ofte efterspurgt af printervirksomhederne.

Hvis du stadig har spørgsmål, er du velkommen til at kontakte mig på mail:

marcus.volsted@nemdigital.dk