Desv\u00e6rre forst\u00e5r mange webstedsejere stadig ikke, hvilke billedfiltyper der skal v\u00e6lges til forskellige brugssager. Resultatet? De ender med at bremse deres indl\u00e6sningshastighed<\/a>, fordi deres billeder ikke er det bedste tilg\u00e6ngelige format og heller ikke er optimeret.<\/p>\n I denne artikel d\u00e6kker vi alle de vigtigste billedfil udvidelser, og hvorn\u00e5r du skal bruge dem til at give de bes\u00f8gende den bedst mulige brugeroplevelse.<\/p>\n Billedfiltyper og -formater er opdelt i to hovedkategorier: raster billedfiler og vektor billedfiler.<\/p>\n Lad os se n\u00e6rmere p\u00e5 hver kategori.<\/p>\n De mest almindelige billedformater til internettet (JPEG, GIF og PNG<\/a>) er alle under raster-kategorien.<\/p>\n Raster Billedfiltyper viser statiske billeder, hvor hver pixel har en defineret farve, position og proportion baseret p\u00e5 deres opl\u00f8sning (for eksempel 1280 \u00d7 720).<\/p>\n Da de er statiske, kan du ikke \u00e6ndre st\u00f8rrelsen p\u00e5 billederne effektivt, det originale design og pixels str\u00e6kkes simpelthen for at fylde det ekstra rum. Dette ender med at skabe et sl\u00f8ret, pixeleret eller p\u00e5 anden m\u00e5de forvr\u00e6nget billede.<\/p>\n Langt st\u00f8rstedelen af de fotografier eller billeder, du ser p\u00e5 internettet, bruger et raster billedformat.<\/p>\n SVG<\/a>, EPS, AI og PDF<\/a> er eksempler p\u00e5 filtyper med vektorbillede.<\/p>\n I mods\u00e6tning til de statiske raster-billedfilformater, hvor hver designform og farve er bundet til en pixel, er disse formater mere fleksible.<\/p>\n Vektorgrafik bruger i stedet et system med linjer og kurver p\u00e5 et kartesisk plan, skaleret i forhold til det samlede areal, ikke en enkelt pixel.<\/p>\n Dette betyder, at du kan forst\u00f8rre den originale billedopl\u00f8sning uendeligt, uden tab af kvalitet eller forvr\u00e6ngning.<\/p>\n Som du kan se, er forskellen mellem kvalitet, n\u00e5r forst\u00f8rret 7x, helt uforlignelig.<\/p>\n Da SVG beregner positionerne baseret p\u00e5 en procentdel af det samlede areal og ikke pixels, er der slet ingen pixelering.<\/p>\n\n Nedenfor d\u00e6kker vi ethvert st\u00f8rre grafisk filformat, fra rasterbilleder til vektorer til billedredigeringssoftware filer.<\/p>\n Vi foretager et dybt dyk og d\u00e6kker fordele og ulemper, browser- og OS-support og ideelle brugssager til hvert format.<\/p>\n JPEG (eller JPG)<\/a> er et rasterbillede-filformat med tabsfri komprimering<\/a>, der g\u00f8r det egnet til deling af billeder. JPEGs er “lossy”, hvilket betyder at de reducerer filst\u00f8rrelsen, men ogs\u00e5 kvaliteten af \u200b\u200bbillederne, n\u00e5r du bruger formatet.<\/p>\n JPEG er stadig en af \u200b\u200bde mest anvendte billedfiltyper, som du kan se p\u00e5 internettet p\u00e5 grund af dens komprimering og praktisk talt universel browser \/ OS-underst\u00f8ttelse.<\/p>\n De fleste sociale medieplatforme<\/a> (som Facebook og Instagram) omdanner automatisk uploadede billedfiler til JPEG’er. De bruger ogs\u00e5 unikke billedst\u00f8rrelser p\u00e5 sociale medier<\/a> til at kontrollere opl\u00f8sningen af \u200b\u200bdine fotos.<\/p>\n PNG er et rastergrafikformat, der underst\u00f8tter tabsfri komprimering og opretholder detaljer og kontrast mellem farver.<\/p>\n Is\u00e6r tilbyder PNG en meget bedre l\u00e6sbarhed af tekst end JPEG.<\/p>\n Dette g\u00f8r PNG til et mere popul\u00e6rt valg til infografik, bannere<\/a>, sk\u00e6rmbilleder og anden grafik, der inkluderer b\u00e5de billeder og tekst.<\/p>\n GIF er en anden billedfiltype, der falder inden for rasterformatet. Det bruger lossless komprimering, men “begr\u00e6nser” billedet til 8 bits pr. Pixel og en begr\u00e6nset palet p\u00e5 256 farver.<\/p>\n GIF-formatet<\/a> er mest ber\u00f8mt (og mest brugt) til animerede billeder, fordi dets 8-bit begr\u00e6nsning holder filst\u00f8rrelser af animationer sm\u00e5 og internetvenlige.<\/p>\n WebP er et billedformat udviklet specielt til at give bedre lossless og lossless komprimering af billeder.<\/p>\n Skift fra JPEG og PNG til WebP kan hj\u00e6lpe med at spare server-diskplads<\/a> og betydelig b\u00e5ndbredde med op til 35% mindre billedfiler til identisk kvalitet.<\/p>\n Et format, der ikke skulle mangle i denne vejledning til billedfiltyper, vi har TIFF.<\/p>\n 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.<\/p>\n Selvom det underst\u00f8tter lossy kompression, bruges det typisk som et lossless billedformat. Desuden bruger de fleste professionelle grafikapplikationer, der underst\u00f8tter TIFF (Photoshop, Illustrator osv.) Ikke komprimering. Derfor er det almindeligt, at TIFF-billeder har stor filst\u00f8rrelse.<\/p>\n Bitmap (BMP) er et for det meste for\u00e6ldet billedfilformat, der kortl\u00e6gger individuelle pixels med ringe eller ingen kompression. Det betyder, at BMP-filer let kan blive ekstremt store og er upraktiske at gemme eller h\u00e5ndtere.<\/p>\n HEIF, forkortelse for High Efficiency Image File Format, er et billedformat, der er udviklet af teamet bag MPEG-videoformatet<\/a> til at v\u00e6re en direkte konkurrent til JPEG.<\/p>\n I teorien er komprimeringen n\u00e6sten dobbelt s\u00e5 effektiv som JPEG, hvilket f\u00f8rer til billeder af op til dobbelt kvalitet med identiske filst\u00f8rrelser.<\/p>\n Det er et rasterbillede format baseret p\u00e5 pixel kortl\u00e6gning, hvilket betyder at du ikke kan skalere billederne uden at miste kvalitet.<\/p>\n Det skalerbare vektorgrafik filformat, normalt kaldet SVG, blev udviklet af W3C som et markeringssprog for at gengive todimensionale billeder lige i browseren.<\/p>\n Det er ikke afh\u00e6ngigt af pixels som et rasterformat, men bruger snarere XML-tekst til at skitsere former og linjer p\u00e5 en m\u00e5de, der ligner, hvordan matematiske ligninger opretter grafer.<\/p>\n Dette betyder, at du kan skalere SVG-billeder uendeligt uden tab af kvalitet.<\/p>\n I det v\u00e6sentlige er en EPS (Encapsulated PostScript) -fil en vektorbillede-fil, der bruges til at gemme illustrationer i Adobe Illustrator og anden illustrations-software som CorelDraw.<\/p>\n Ligesom SVG-filer er EPS faktisk et tekstbaseret dokument, der skitserer former og linjer med kode snarere end at kortl\u00e6gge pixels og farver. Som et resultat underst\u00f8tter EPS-filer ogs\u00e5 tabsfri skalering.<\/p>\n Du forbinder sandsynligvis PDF med at gemme, gemme og l\u00e6se mest tekstbaserede dokumenter. Det er forst\u00e5eligt – dokumentet er trods alt lige der i navnet.<\/p>\n Men PDF-filer er faktisk baseret p\u00e5 det samme PostScript-sprog, der driver EPS-vektor billedfiler og kan ogs\u00e5 bruges til at gemme billeder og illustrationer.<\/p>\n Det er det valgte billedformat til opbevaring af illustrationer, omslag p\u00e5 magasiner og mere til senere udskrivning. Det er ogs\u00e5 det foretrukne valg for vores Kinsta e-b\u00f8ger<\/a>.<\/p>\n Som navnet antyder, er PSD-filformatet et billedformat, der bruges til at gemme billede dokumenter og arbejder i gang med Adobe Photoshop.<\/p>\n Det er ikke et websikkert billedformat<\/strong>, s\u00e5 det underst\u00f8ttes ikke af nogen browsere eller standard billedfremvisere eller redakt\u00f8rer.<\/p>\n AI er et andet billedformat, der er specielt udviklet af Adobe for ikke kun at gemme billedet, men ogs\u00e5 projektets tilstand.<\/p>\n Ligesom PSD er det ikke beregnet til brug p\u00e5 internettet<\/strong> og underst\u00f8ttes ikke af nogen browsere eller de fleste standard billedvisere.<\/p>\n I mods\u00e6tning til PSD-filer kan du frit skalere AI-filer uden tab af kvalitet.<\/p>\n XCF, som st\u00e5r for eXperimental Computing Facility, er en billedfiltype, der er hjemmeh\u00f8rende i open source billededitoren GIMP<\/a>. Det svarer til PSD-filer og gemmer stier, gennemsigtighed, filtre og mere.<\/p>\n Endnu en gang er dette en indf\u00f8dt filtype til lagring af projekter, og den underst\u00f8ttes ikke af nogen browsere<\/strong> eller standard billedvisere.<\/p>\n INDD er en indf\u00f8dt filtype til Adobe InDesign-brugere, hvor du kan gemme projektfiler inklusive sideindhold, typografier, farvepr\u00f8ver med mere.<\/p>\n Selvom det undertiden kaldes et billedfilformat, har det en tendens til at linke til visuelle elementer ud over tekst.<\/p>\n Det underst\u00f8ttes ikke af nogen browsere eller standard billedvisere, da det ikke er et websikkert format.<\/strong><\/p>\n Raw billedformater er de filtyper, som et digitalt kamera bruger til at gemme billeder i fuld kvalitet til senere efterproduktion og redigering.<\/p>\n St\u00f8rre Raw billedfiltyper fra kameraproducent:<\/p>\n I stedet for de 256 nuancer pr. farvekanal (8 bit), der er tilg\u00e6ngelige 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\u00e5r du tilpasser farver og kontrast i efterbehandling.<\/p>\n Raw billeder er ikke beregnet til internettet<\/strong> eller deling og underst\u00f8ttes ikke af nogen st\u00f8rre browser eller billedfremviser.<\/p>\n Baseret p\u00e5 data relateret til webbrug er de tre mest almindelige billedfiltyper PNG, JPEG og SVG.<\/p>\n Lad os unders\u00f8ge, hvad der g\u00f8r dem s\u00e5 udbredte nedenfor.<\/p>\n Da PNG som format egner sig bedre til tekst inde i billedet, bruges det oftere til sk\u00e6rmbilleder, bannere (afh\u00e6ngigt af st\u00f8rrelsen p\u00e5 bannerannonce<\/a>) og mere.<\/p>\n Da det bruger tabsfri komprimering, bruges det ogs\u00e5 af designere og fotografer til at fremvise billeder af h\u00f8j kvalitet p\u00e5 deres portfolio websites<\/a> for eksempel.<\/p>\n Disse to faktorer sammen med sin universelle browser og OS-underst\u00f8ttelse g\u00f8r det til den mest popul\u00e6re billedfiltype p\u00e5 internettet. PNG’er er til stede p\u00e5 hele 77% af webstederne.<\/p>\n Den tabte komprimering betyder, at JPEG er en bedre mulighed for at vise billeder i hele dit indhold. Tabet i kvalitet er n\u00e6ppe synligt for den gennemsnitlige internetbruger, og du kan spare betydelig diskplads og b\u00e5ndbredde.<\/p>\n Derfor er det det n\u00e6stmest popul\u00e6re format p\u00e5 internettet, der bruges af n\u00e6sten 72% af webstederne. De fleste websteder bruger b\u00e5de PNG’er og JPEG’er til forskellige form\u00e5l.<\/p>\n Som en p\u00e5mindelse: Der er ingen forskel mellem JPG og JPEG<\/a>, de er to forskellige akronymer og filtypenavne i samme format.<\/p>\n SVG-filer er skalerbare vektorfiler, der er perfekte til ikoner, logoer, grafer og enkle illustrationer. Billedet kan endda inds\u00e6ttes direkte p\u00e5 siden som CSS-kode<\/a>.<\/p>\n Derfor kommer SVG’er p\u00e5 tredjeplads, brugt af 27% af webstederne.<\/p>\n Mens det sj\u00e6ldent er det valgte format for statiske billeder, har GIF gjort comeback som det f\u00f8rste valg til deling af animationer.<\/p>\n Som et resultat bruger omkring 22% af websteder GIF’er p\u00e5 deres sider, selvom de sandsynligvis ogs\u00e5 bruger PNG’er og JPEG’er som deres standardformater.<\/p>\n Raw billedformater er af h\u00f8jeste kvalitet, men har urimeligt store filst\u00f8rrelser p\u00e5 op til hundreder megabyte.<\/p>\n For webbilleder tilbyder WebP-filformatet 25-35% mindre filst\u00f8rrelser<\/a> end JPEG for de samme kvalitetsfotos, hvilket betyder, at du kan uploade billeder af h\u00f8jere kvalitet til samme diskplads og fremskynde dit websted<\/a>.<\/p>\n HEIF er et andet JPEG-alternativ med mere effektiv komprimering, men underst\u00f8ttes i \u00f8jeblikket ikke af nogen st\u00f8rre browsere.<\/p>\n PNG-filer tilbyder komprimering uden tab, men det betyder, at filst\u00f8rrelserne vil v\u00e6re meget store og langsomt at indl\u00e6se. En enkelt PNG-fil kan ofte v\u00e6re hundreder af KB eller endda 1 MB+. Men hvis du drager fordel af nogle taktikker som lazy loading (tilg\u00e6ngelig i kernen siden WordPress 5.5<\/a>) og en CDN<\/a>, kan du stadig have et hurtigt websted.<\/p>\n De mest almindelige billedfiltyper til internettet, der underst\u00f8tter gennemsigtighed, er PNG, WebP, GIF og endda SVG.<\/p>\n De fleste native projektfilfiltyper som PSD, XCF og AI underst\u00f8tter ogs\u00e5 gennemsigtighed.<\/p>\n P\u00e5 den anden side underst\u00f8tter det popul\u00e6re JPEG-billedformat ikke<\/strong> gennemsigtighed.<\/p>\n Den st\u00f8rste forskel mellem PNG og JPEG er, at PNG er et lossless billedformat, mens JPEG er et lossy. Dette betyder grundl\u00e6ggende, at PNG bruger komprimeringsteknikker uden at ofre billedets originale kvalitet eller detalje.<\/p>\n Til tekst i billeder, sk\u00e6rmbilleder til tutorial, og n\u00e5r du vil have tegn eller andre fine elementer til at v\u00e6re 100% synlige p\u00e5 et foto, er PNG det rigtige format.<\/p>\n 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\u00f8jre.<\/p>\n Betyder dette, at JPEG er en d\u00e5rlig billedfiltype? Slet ikke!<\/p>\nHvad er de forskellige billedfiltyper?<\/h2>\n
Raster-billedfilformater<\/h3>\n
![\"Rasterbillede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Vector billedfilformater<\/h3>\n
![\"Vektor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
Dev 15 mest popul\u00e6re billedfiltyper<\/h2>\n
1.JPEG (Og JPG) \u2014 Joint Photographic Experts Group<\/h3>\n
![\"tiger](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Fordele og ulemper<\/h4>\n
\n
Browser og OS support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
2. PNG \u2014 Portable Network Graphics<\/h3>\n
![\"Kinstas](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Fordele og ulemper<\/h4>\n
\n
Browser og OS support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
3. GIF \u2014 Graphics Interchange Format<\/h3>\n
![\"Eksempel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Fordele og ulemper<\/h4>\n
\n
Browser og OS support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
4. WebP<\/h3>\n
![\"WebP-billede](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
Fordele og ulemper<\/h4>\n
\n
Browser og OS support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"billedfiltyper:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"Image](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
7. HEIF \u2014 High Efficiency Image File Format<\/h3>\n
![\"billedfiltyper:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
8. SVG \u2014 Scalable Vector Graphics<\/h3>\n
![\"billedfiltyper:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
9. EPS \u2014 Encapsulated Postscript<\/h3>\n
![\"EPS-ikon\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
10. PDF \u2014 Portable Document Format<\/h3>\n
![\"adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Fordele og ulemper<\/h4>\n
\n
Browsere og OS Support<\/h4>\n
\n
Brugssager<\/h4>\n
\n
11. PSD \u2014 Photoshop-document<\/h3>\n
![\"billedfiltyper:](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Fordele og ulemper<\/h4>\n
\n
Brugssager<\/h4>\n
\n
12. AI \u2014 Adobe Illustrator Artwork<\/h3>\n
![\"Adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Fordele og ulemper<\/h4>\n
\n
Brugssager<\/h4>\n
\n
13. XCF \u2014 eXperimental Computing Facility<\/h3>\n
![\"xcf-ikon\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Fordele og ulemper<\/h4>\n
\n
Brugssager<\/h4>\n
\n
14. INDD \u2014 Adobe InDesign-dokument<\/h3>\n
![\"adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Fordele og ulemper<\/h4>\n
\n
Brugssager<\/h4>\n
\n
15. Raw billedfiltyper<\/h3>\n
\n
Fordele og ulemper<\/h4>\n
\n
Brugssager<\/h4>\n
\n
Ofte stillede sp\u00f8rgsm\u00e5l om billedfiltyper<\/h2>\n
Hvad er de 3 almindelige filtyper for en billedfil?<\/h3>\n
![\"Brugsstatistik](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: Sk\u00e6rmbilleder, bannere, infografik, billeder<\/h4>\n
2. JPEG: Billeder<\/h4>\n
3. SVG: Logoer, ikoner og illustrationer<\/h4>\n
\u00c6rlig omtale: Animerede GIF-billeder<\/h4>\n
![\"Animeret](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
Hvilket billedformat er den h\u00f8jeste kvalitet?Which Image Format Is the Highest Quality?<\/h3>\n
Hvilke filformater underst\u00f8tter gennemsigtighed?<\/h3>\n
Er PNG bedre end JPEG?<\/h3>\n
![\"PNG](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/png-vs-jpeg.png\")