At vælge de rigtige billedfiltyper kan virke som en triviel beslutning.

Men mennesker er visuelle væsner, og billeder er en integreret del af onlineoplevelsen.

De fleste sider og artikler bruger skærmbilleder og billeder til at berige tekstindholdet. Faktisk indeholder kun omkring 8% af webstederne ikke noget visuelt indhold.

Desværre forstår mange webstedsejere stadig ikke, hvilke billedfiltyper der skal vælges til forskellige brugssager. Resultatet? De ender med at bremse deres indlæsningshastighed, fordi deres billeder ikke er det bedste tilgængelige format og heller ikke er optimeret.

I denne artikel dækker vi alle de vigtigste billedfil udvidelser, og hvornår du skal bruge dem til at give de besøgende den bedst mulige brugeroplevelse.

Hvad er de forskellige billedfiltyper?

Billedfiltyper og -formater er opdelt i to hovedkategorier: raster billedfiler og vektor billedfiler.

Lad os se nærmere på hver kategori.

Raster-billedfilformater

De mest almindelige billedformater til internettet (JPEG, GIF og PNG) er alle under raster-kategorien.

Raster Billedfiltyper viser statiske billeder, hvor hver pixel har en defineret farve, position og proportion baseret på deres opløsning (for eksempel 1280 × 720).

Da de er statiske, kan du ikke ændre størrelsen på billederne effektivt, det originale design og pixels strækkes simpelthen for at fylde det ekstra rum. Dette ender med at skabe et sløret, pixeleret eller på anden måde forvrænget billede.

Rasterbillede - JPEG-eksempel

Rasterbillede – JPEG-eksempel

Langt størstedelen af de fotografier eller billeder, du ser på internettet, bruger et raster billedformat.

Vector billedfilformater

SVG, EPS, AI og PDF er eksempler på filtyper med vektorbillede.

I modsætning til de statiske raster-billedfilformater, hvor hver designform og farve er bundet til en pixel, er disse formater mere fleksible.

Vektorgrafik bruger i stedet et system med linjer og kurver på et kartesisk plan, skaleret i forhold til det samlede areal, ikke en enkelt pixel.

Dette betyder, at du kan forstørre den originale billedopløsning uendeligt, uden tab af kvalitet eller forvrængning.

Vektor forstørrelse af billedformat

Vektor forstørrelse af billedformat (billedekilde: Wikipedia.com)

Som du kan se, er forskellen mellem kvalitet, når forstørret 7x, helt uforlignelig.

Da SVG beregner positionerne baseret på en procentdel af det samlede areal og ikke pixels, er der slet ingen pixelering.

Kun 8% af webstederne indeholder intet visuelt indhold ... men for de andre 92% er det vigtigt at vise billeder med den rigtige filtype. 🖼 Find de 15 bedste muligheder i denne vejledning👇Click to Tweet

Dev 15 mest populære billedfiltyper

Nedenfor dækker vi ethvert større grafisk filformat, fra rasterbilleder til vektorer til billedredigeringssoftware filer.

Vi foretager et dybt dyk og dækker fordele og ulemper, browser- og OS-support og ideelle brugssager til hvert format.

1.JPEG (Og JPG) — Joint Photographic Experts Group

tiger jpg

Tiger Image JPEG-format

JPEG (eller JPG) er et rasterbillede-filformat med tabsfri komprimering, der gør det egnet til deling af billeder. JPEGs er “lossy”, hvilket betyder at de reducerer filstørrelsen, men også kvaliteten af ​​billederne, når du bruger formatet.

JPEG er stadig en af ​​de mest anvendte billedfiltyper, som du kan se på internettet på grund af dens komprimering og praktisk talt universel browser / OS-understøttelse.

De fleste sociale medieplatforme (som Facebook og Instagram) omdanner automatisk uploadede billedfiler til JPEG’er. De bruger også unikke billedstørrelser på sociale medier til at kontrollere opløsningen af ​​dine fotos.

Fordele og ulemper

Browser og OS support

Brugssager

2. PNG — Portable Network Graphics

Kinstas resource center .png-billedfil

Kinstas resource center .png-billedfil

PNG er et rastergrafikformat, der understøtter tabsfri komprimering og opretholder detaljer og kontrast mellem farver.

Især tilbyder PNG en meget bedre læsbarhed af tekst end JPEG.

Dette gør PNG til et mere populært valg til infografik, bannere, skærmbilleder og anden grafik, der inkluderer både billeder og tekst.

Fordele og ulemper

Browser og OS support

Brugssager

3. GIF — Graphics Interchange Format

Eksempel på et gif-billede

Eksempel på et gif-billede

GIF er en anden billedfiltype, der falder inden for rasterformatet. Det bruger lossless komprimering, men “begrænser” billedet til 8 bits pr. Pixel og en begrænset palet på 256 farver.

GIF-formatet er mest berømt (og mest brugt) til animerede billeder, fordi dets 8-bit begrænsning holder filstørrelser af animationer små og internetvenlige.

Fordele og ulemper

Browser og OS support

Brugssager

4. WebP

WebP-billede eksempel

WebP-billede eksempel

WebP er et billedformat udviklet specielt til at give bedre lossless og lossless komprimering af billeder.

Skift fra JPEG og PNG til WebP kan hjælpe med at spare server-diskplads og betydelig båndbredde med op til 35% mindre billedfiler til identisk kvalitet.

Fordele og ulemper

Browser og OS support

Brugssager

5. TIFF

billedfiltyper: tiff icon

TIFFC-ikon

Et format, der ikke skulle mangle i denne vejledning til billedfiltyper, vi har TIFF.

TIFF, som er en forkortelse for Tagged Image File Format, er et raster billedformat, der oftest bruges til lagring og redigering af billeder, der senere bruges til udskrivning.

Selvom det understøtter lossy kompression, bruges det typisk som et lossless billedformat. Desuden bruger de fleste professionelle grafikapplikationer, der understøtter TIFF (Photoshop, Illustrator osv.) Ikke komprimering. Derfor er det almindeligt, at TIFF-billeder har stor filstørrelse.

Fordele og ulemper

Browsere og OS Support

Brugssager

6. BMP — Bitmap

Image file types: bmp vs gif

Bitmap vs gif

Bitmap (BMP) er et for det meste forældet billedfilformat, der kortlægger individuelle pixels med ringe eller ingen kompression. Det betyder, at BMP-filer let kan blive ekstremt store og er upraktiske at gemme eller håndtere.

Fordele og ulemper

Browsere og OS Support

Brugssager

7. HEIF — High Efficiency Image File Format

billedfiltyper: jpeg vs heif

JPEG vs HEIF-format

HEIF, forkortelse for High Efficiency Image File Format, er et billedformat, der er udviklet af teamet bag MPEG-videoformatet til at være en direkte konkurrent til JPEG.

I teorien er komprimeringen næsten dobbelt så effektiv som JPEG, hvilket fører til billeder af op til dobbelt kvalitet med identiske filstørrelser.

Det er et rasterbillede format baseret på pixel kortlægning, hvilket betyder at du ikke kan skalere billederne uden at miste kvalitet.

Fordele og ulemper

Browsere og OS Support

Brugssager

8. SVG — Scalable Vector Graphics

billedfiltyper: SVG-logo

SVG-logo

Det skalerbare vektorgrafik filformat, normalt kaldet SVG, blev udviklet af W3C som et markeringssprog for at gengive todimensionale billeder lige i browseren.

Det er ikke afhængigt af pixels som et rasterformat, men bruger snarere XML-tekst til at skitsere former og linjer på en måde, der ligner, hvordan matematiske ligninger opretter grafer.

Dette betyder, at du kan skalere SVG-billeder uendeligt uden tab af kvalitet.

Fordele og ulemper

Browsere og OS Support

Brugssager

9. EPS — Encapsulated Postscript

EPS-ikon

EPS-ikon

I det væsentlige er en EPS (Encapsulated PostScript) -fil en vektorbillede-fil, der bruges til at gemme illustrationer i Adobe Illustrator og anden illustrations-software som CorelDraw.

Ligesom SVG-filer er EPS faktisk et tekstbaseret dokument, der skitserer former og linjer med kode snarere end at kortlægge pixels og farver. Som et resultat understøtter EPS-filer også tabsfri skalering.

Fordele og ulemper

Browsere og OS Support

Brugssager

10. PDF — Portable Document Format

adobe pdf

Eksempel på PDF-fil

Du forbinder sandsynligvis PDF med at gemme, gemme og læse mest tekstbaserede dokumenter. Det er forståeligt – dokumentet er trods alt lige der i navnet.

Men PDF-filer er faktisk baseret på det samme PostScript-sprog, der driver EPS-vektor billedfiler og kan også bruges til at gemme billeder og illustrationer.

Det er det valgte billedformat til opbevaring af illustrationer, omslag på magasiner og mere til senere udskrivning. Det er også det foretrukne valg for vores Kinsta e-bøger.

Fordele og ulemper

Browsere og OS Support

Brugssager

11. PSD — Photoshop-document

billedfiltyper: psd-logo

PSD-logo

Som navnet antyder, er PSD-filformatet et billedformat, der bruges til at gemme billede dokumenter og arbejder i gang med Adobe Photoshop.

Det er ikke et websikkert billedformat, så det understøttes ikke af nogen browsere eller standard billedfremvisere eller redaktører.

Fordele og ulemper

Brugssager

12. AI — Adobe Illustrator Artwork

Adobe Illustrator-filikon

Adobe Illustrator-filikon

AI er et andet billedformat, der er specielt udviklet af Adobe for ikke kun at gemme billedet, men også projektets tilstand.

Ligesom PSD er det ikke beregnet til brug på internettet og understøttes ikke af nogen browsere eller de fleste standard billedvisere.

Træt af en langsom vært for dit WordPress-site? Vi leverer lynhurtige servere og 24/7 support i verdensklasse fra WordPress-eksperter. Tjek vores planer

I modsætning til PSD-filer kan du frit skalere AI-filer uden tab af kvalitet.

Fordele og ulemper

Brugssager

13. XCF — eXperimental Computing Facility

xcf-ikon

XCF-ikon

XCF, som står for eXperimental Computing Facility, er en billedfiltype, der er hjemmehørende i open source billededitoren GIMP. Det svarer til PSD-filer og gemmer stier, gennemsigtighed, filtre og mere.

Endnu en gang er dette en indfødt filtype til lagring af projekter, og den understøttes ikke af nogen browsere eller standard billedvisere.

Fordele og ulemper

Brugssager

14. INDD — Adobe InDesign-dokument

adobe indesign-ikon

Adobe InDesign-ikon

INDD er en indfødt filtype til Adobe InDesign-brugere, hvor du kan gemme projektfiler inklusive sideindhold, typografier, farveprøver med mere.

Selvom det undertiden kaldes et billedfilformat, har det en tendens til at linke til visuelle elementer ud over tekst.

Det understøttes ikke af nogen browsere eller standard billedvisere, da det ikke er et websikkert format.

Fordele og ulemper

Brugssager

15. Raw billedfiltyper

Raw billedformater er de filtyper, som et digitalt kamera bruger til at gemme billeder i fuld kvalitet til senere efterproduktion og redigering.

Større Raw billedfiltyper fra kameraproducent:

I stedet for de 256 nuancer pr. farvekanal (8 bit), der er tilgængelige i en JPEG-fil, tilbyder RAW-filer op til 16.384 nuancer pr. farvekanal (14 bit) i et enkelt billede. Det giver dig mere fleksibilitet, når du tilpasser farver og kontrast i efterbehandling.

Raw billeder er ikke beregnet til internettet eller deling og understøttes ikke af nogen større browser eller billedfremviser.

Fordele og ulemper

Brugssager

Ofte stillede spørgsmål om billedfiltyper

Hvad er de 3 almindelige filtyper for en billedfil?

Baseret på data relateret til webbrug er de tre mest almindelige billedfiltyper PNG, JPEG og SVG.

Brugsstatistik for billedfilformater

Brugsstatistik for billedfilformater (billedekilde: w3techs.com)

Lad os undersøge, hvad der gør dem så udbredte nedenfor.

1. PNG: Skærmbilleder, bannere, infografik, billeder

Da PNG som format egner sig bedre til tekst inde i billedet, bruges det oftere til skærmbilleder, bannere (afhængigt af størrelsen på bannerannonce) og mere.

Da det bruger tabsfri komprimering, bruges det også af designere og fotografer til at fremvise billeder af høj kvalitet på deres portfolio websites for eksempel.

Disse to faktorer sammen med sin universelle browser og OS-understøttelse gør det til den mest populære billedfiltype på internettet. PNG’er er til stede på hele 77% af webstederne.

2. JPEG: Billeder

Den tabte komprimering betyder, at JPEG er en bedre mulighed for at vise billeder i hele dit indhold. Tabet i kvalitet er næppe synligt for den gennemsnitlige internetbruger, og du kan spare betydelig diskplads og båndbredde.

Derfor er det det næstmest populære format på internettet, der bruges af næsten 72% af webstederne. De fleste websteder bruger både PNG’er og JPEG’er til forskellige formål.

Som en påmindelse: Der er ingen forskel mellem JPG og JPEG, de er to forskellige akronymer og filtypenavne i samme format.

3. SVG: Logoer, ikoner og illustrationer

SVG-filer er skalerbare vektorfiler, der er perfekte til ikoner, logoer, grafer og enkle illustrationer. Billedet kan endda indsættes direkte på siden som CSS-kode.

Derfor kommer SVG’er på tredjeplads, brugt af 27% af webstederne.

Ærlig omtale: Animerede GIF-billeder

Mens det sjældent er det valgte format for statiske billeder, har GIF gjort comeback som det første valg til deling af animationer.

Animeret gif-eksempel

Animeret gif-eksempel

Som et resultat bruger omkring 22% af websteder GIF’er på deres sider, selvom de sandsynligvis også bruger PNG’er og JPEG’er som deres standardformater.

Hvilket billedformat er den højeste kvalitet?Which Image Format Is the Highest Quality?

Raw billedformater er af højeste kvalitet, men har urimeligt store filstørrelser på op til hundreder megabyte.

For webbilleder tilbyder WebP-filformatet 25-35% mindre filstørrelser end JPEG for de samme kvalitetsfotos, hvilket betyder, at du kan uploade billeder af højere kvalitet til samme diskplads og fremskynde dit websted.

HEIF er et andet JPEG-alternativ med mere effektiv komprimering, men understøttes i øjeblikket ikke af nogen større browsere.

PNG-filer tilbyder komprimering uden tab, men det betyder, at filstørrelserne vil være meget store og langsomt at indlæse. En enkelt PNG-fil kan ofte være hundreder af KB eller endda 1 MB+. Men hvis du drager fordel af nogle taktikker som lazy loading (tilgængelig i kernen siden WordPress 5.5) og en CDN, kan du stadig have et hurtigt websted.

Hvilke filformater understøtter gennemsigtighed?

De mest almindelige billedfiltyper til internettet, der understøtter gennemsigtighed, er PNG, WebP, GIF og endda SVG.

De fleste native projektfilfiltyper som PSD, XCF og AI understøtter også gennemsigtighed.

På den anden side understøtter det populære JPEG-billedformat ikke gennemsigtighed.

Er PNG bedre end JPEG?

Den største forskel mellem PNG og JPEG er, at PNG er et lossless billedformat, mens JPEG er et lossy. Dette betyder grundlæggende, at PNG bruger komprimeringsteknikker uden at ofre billedets originale kvalitet eller detalje.

Til tekst i billeder, skærmbilleder til tutorial, og når du vil have tegn eller andre fine elementer til at være 100% synlige på et foto, er PNG det rigtige format.

PNG vs JPEG tegneserie

PNG vs JPEG tegneserie (Billedekilde: lbrandy.com)

Som du kan se fra dette sjove billede ovenfor, er PNG, som er afbildet til venstre, meget bedre til at vise tekst tydeligt og enkle former sammenlignet med JPEG, den til højre.

Betyder dette, at JPEG er en dårlig billedfiltype? Slet ikke!

For almindelige blogindlæg eller headerbilleder tilbyder JPEG mere end god nok kvalitet med betydeligt lavere filstørrelse. Du kan ofte spare op til 50% eller mere plads, mens du kæmper for at få øje på enhver forskel i kvalitet med det blotte øje.

Hold dit websteds visuelle indhold klart med denne guide til de bedste billedfiltyper ✨Click to Tweet

Resumé

Der er ingen mangel på billeder, du legitimt kan bruge til dine projekter. Forhåbentlig har denne artikel hjulpet dig med at forstå, hvilke billedfiltyper og -formater du skal bruge i hvilken sammenhæng for at få de bedste resultater.

Rasterformater bruges bedst til billeder og billeder, mens vektorer er en god erstatning for logoer, ikoner og digital grafik.

Brug af de rigtige billedfiltyper til den rigtige opgave kan ikke kun hjælpe med at forbedre dine sideindlæsning hastigheder, men også lavere båndbredde og serverbelastninger. Som en efterfølgende positiv effekt forbedrer din samlede brugeroplevelse også big time. Ikke dårligt, hva?


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer