SVG vs PNG vs JPG: Bildeformat fordeler og ulemper

/2016-01-04 00:04:46/
Brilee
/Grafikk/

Når det gjelder å lage bilder for nettet og andre digitale formål, hvilke filformater vil gi deg det beste resultatet? Du må tenke på hastighet kontra bildekvalitet og skala. Så hva bør du bruke: SVG vs PNG vs JPG?

Det var en tid da du bare brukte en JPG-størrelse for å få plass til 72 dpi og gikk videre. Ikke nå lenger. Skjermbilder i høy oppløsning, flere visningsportaler og behovet for et kjipt nettsted har gjort det til en mye mer kompleks prosess. La oss dykke i fordeler og ulemper med hvert av disse formatene!

SVG

SVG ser bra ut i alle størrelser og fungerer for stort sett alle andre bilder enn et bilde.

SVG, eller skalerbar vektorgrafikk, er utrolig praktisk. Derfor bruker designere det oftere.

Fordi SVG er et vektorformat, ser de bra ut i alle størrelser og fungerer for stort sett alle andre bilder enn et bilde.

SVG er et tapsfritt format - noe som betyr at den ikke mister data når den komprimeres - gjengir et ubegrenset antall farger og brukes ofte til grafikk og logoer på nettet og til prosjekter som vil bli sett på netthinne eller andre høyoppløselige skjermer.

Pros av SVG

Vektorformat gjengis godt i alle størrelser
Mulighet for å lage enkle SVG-gjengivelser i en kode eller tekstredigerer
Design og eksporter kompleks grafikk fra Adobe Illustrator eller Sketch
SVG-tekst er tilgjengelig
SVG-er er enkle å style og manus
SVG-formater støttes av moderne nettlesere og er fremtidssikre
Formatet er svært komprimerbart og lett
Bra for søk på grunn av tekstbasert format
Støtter åpenhet
Tillater stillbilder eller animerte bilder

Ulemper med SVG

Å designe SVG-er kan bli komplisert
Ikke gjengi på noen degraderte nettlesere
Begrenset støtte for e-postklienter

Vil du vite mer? Vi har to andre guider som forklarer mer om SVG: Den praktiske nybegynnerguiden til SVG og hvordan (og hvorfor) SVG kommer til å ta over.

PNG

PNG tilbyr noe JPG ikke kan - åpenhet.

PNG, eller Portable Network Graphics, er et format designet for nettet og tilbyr noe JPG ikke kan - gjennomsiktighet. Dette alene er grunnen til at PNG har vært så populær for å laste opp elementer som logoer til webdesign.

Det er to typer PNG-er - PNG-8 og PNG-24. PNG-8 bruker en mer begrenset fargepalett med bare 256 farger, har noe bedre transparens og eksporterer i liten størrelse. PNG-24 bruker en ubegrenset fargepalett, opprettholder gjennomsiktighet, men eksporterer i større størrelse. Begge PNG-typene har tapsfri komprimering.

Mens PNG-formater ligner GIF-er, støtter de ikke animasjon. Dette formatet brukes oftest for ikoner, små stillbilder eller et hvilket som helst bilde som trenger åpenhet.

Pros av PNG

Støtter åpenhet
Bra for bilder med tekst i seg
PNG-formater gjengir logoer godt
Inkluderer innebygd tekstbeskrivelse for søkemotorer
PNG-8 har liten filstørrelse og er mest lett
Eksport uten taggede kanter

Ulemper med PNG

Filstørrelser vokser raskt for store filer som bilder
Noen eldre e-postklienter har problemer med å gjengi dem
Ingen animasjon
PNG-24 filer kan bli store; ikke like bra for deling av nettet

JPEG

Hver gang et bilde lagres på nytt og eksporteres som JPG, vil det forringes.

JPG, eller Joint Photographic Experts Group, eller JPEG, er sannsynligvis det mest kjente bildeformatet. Det er standardalternativet for mest mulig lagring av bilder fordi det er fotovennlig takket være en praktisk talt ubegrenset fargeskjerm.

JPG tilbyr også muligheten til å velge hvor komprimert et bilde skal være fra 0 prosent (tung komprimering) til 100 prosent (ingen komprimering). De fleste designere velger noe i området 60 til 70 prosent. Bilder ser fortsatt bra ut på dette komprimeringsnivået, men filstørrelsene er betydelig mindre.

JPG bruker taus komprimering og opprettholder ikke originale data under komprimering. Hver gang et bilde lagres på nytt og eksporteres som JPG, vil det forringes.

JPG-formatet brukes oftest for bilder, fotografering og hva som helst med mye farge.

Fordeler med JPEG

Flott for høy farge og fotografering
Enkelt å redusere filstørrelser
Leveres konsekvent i e-postklienter

Ulemper med JPEG

Ingen åpenhet
Lager taggede kanter for tekst
Ingen animasjon
Tapeformat
Ingen automatiske metadata for søk, må inneholde informasjon

Hvilket format bør du bruke?

Nå som du vet hva noen av forskjellene er mellom SVG vs PNG vs JPG, hva bør du bruke?

Du kan stille deg noen spørsmål for å få svaret.

Trenger du et vektor- eller rasterformat?
Vektor: SVG
Raster: JPG eller PNG

Trenger du åpenhet?
Ja: SVG eller PNG
Nei: JPG

Bruker du et bilde med høy farge?
Ja: JPG eller PNG
Nei: SVG

Er det et stort bilde?
Ja: JPG
Nei: PNG

Inneholder bildet tekst?
Ja: PNG
Nei: JPG

Er tapsfri komprimering viktig for deg?
Ja: SVG eller PNG
Nei: JPG

Må grafikk oppdateres og omdisponeres?
Ja: SVG
Nei: PNG eller JPG

Bruker du animasjon?
Ja: SVG
Nei: JPG eller PNG

Konklusjon

Alle tre bildeformatene - SVG, PNG og JPG - har praktiske og omfattende applikasjoner. Selv om SVG er det nyeste formatet, og ofte kan lagres i den minste filstørrelsen, er det ikke alltid det beste alternativet.

Tenk på hvordan du bruker bilder i prosjektet ditt når du velger en filtype for å finne den som vil fungere best for det du prøver å oppnå. Du kan til og med oppleve at prosjekter inkluderer bilder som bruker alle tre filtyper. (Det er faktisk ganske vanlig!)