Share
Har du noen gang lurt på hva forskjellen er mellom JPEG, GIF og PNG-bilder som vi bruker på nettet? Som designer - og spesielt en webdesigner - er det viktig å vite forskjellen mellom de forskjellige bildformatene og hvordan de skal brukes i hver situasjon. Denne artikkelen vil dekke hvordan du bruker dem for hver situasjon for å holde filstørrelsene små og bildekvaliteten høy. Vi arkiverer dette under "Basix", men informasjonen skal være interessant for alle som ønsker å få en dypere forståelse av bildeformater.
For best å bruke et verktøy må du først forstå hvordan verktøyet fungerer. For å forstå hvordan du bruker bildetyper bedre, må vi se på hvordan kompresjonsalgoritmen fungerer. Jeg vet, jeg vet, du er ikke en talletekn og hvem bryr seg egentlig? Det er som å kjøre en bil skjønt; Du kan kjøre det bedre når du vet hvordan alle de små delene samhandler. I tillegg, når noe går galt, vet du hvordan du skal fikse det!
JPEG ble utviklet av Joint Photographic Experts Group. Som du kanskje har gjettet, fungerer det bra for naturlige bildetyper (fotografering). Naturlige bildetyper, som fotografering, har jevne variasjoner av farger, noe som betyr at JPEG-formatet også fungerer bra for bilder som inneholder gradienter og varierende farger og farger.
Et viktig poeng om JPEG er at de vanligvis er en lossy format, med mindre du bruker en annen variasjon som er lossless. Lossy komprimering er rett og slett en form for koding som kaster bort (mister) noen av dataene ... det er derfor hvis du lagrer en JPG 100 ganger, vil den sakte bli forverret over tid. Det er "lossless" versjoner av JPG, men disse variasjonene er ikke vanlige, men har ikke utbredt støtte. Hvis du trenger å lagre bildedata i et tabsfritt format, er det best å bruke et format som TIFF eller PSD.
Nå for den tekniske delen: Prosessen med en JPEG deler bildet i 8 × 8 pixelblokker og kjører dem gjennom en DCT (Discrete Cosine Transform) -beregning etterfulgt av kvantisering (JPEG 2000, en nyere versjon, bruker en wavelet-transformasjon i stedet for DCT ).
I lekmannens termer: det ser i utgangspunktet på blokker av bildet og bestemmer de små variasjonene i farge, og kaster bort noen av disse variasjonene basert på kompresjonsnivået du har valgt. Dataene som er kassert, fjernes fra filen helt, noe som resulterer i en liten fil. Dette reduserer også kvaliteten på bildet, Du vet sikkert at hvis du setter kompresjonen veldig høy, vil du ende opp med et nedgradert, pixelert bilde ... Mens lavere komprimeringsinnstillinger vil resultere i et bilde av høyere kvalitet.
GIF (Graphics Interchange Format) ble utviklet av CompuServe og bruker LZW (Lempel-Ziv-Welch) komprimeringsmetoden, som er lossless. Denne komprimeringsmetoden bygger et fargebord for bildet der hver fargeverdi er tilordnet piksler. Denne komprimeringsmetoden gjør dette bildeformatet ideelt for linjekunst, logoer eller andre enkle bilder uten gradienter eller varierende farge.
Et interessant notat om denne komprimeringsmetoden er at den ser på pikselendringen horisontalt. Det betyr at bilder der pikselfargeendringer som forekommer oftere horisontalt, vil være større enn bilder der pikselfargeendringer forekommer oftere vertikalt. Formatet støtter opptil 8 biter per piksel - som tillater et enkelt bilde å referere til en palett på opptil 256 forskjellige farger. Du kan bruke mindre farger (du har kanskje sett GIF-bilder med bare en håndfull farger), noe som kan resultere i noen interessante, til og med kunstneriske resultater.
GIFs kan gjøre to ekstra ting som JPEG ikke kan. For det første kan en GIF bruke åpenhet. I en GIF-piksler er enten 100% gjennomsiktig eller 100% ugjennomsiktig. GIF er også et multi-bilde format, slik at du kan bruke animasjon (på godt og vondt).
PNG (Portable Network Graphics) ble opprettet for å erstatte, eller i det minste forbedre på GIF-formatet. PNG bruker DEFLATE komprimeringsmetoden - den samme algoritmen som brukes i zip og gzip. Jeg vil ikke gå inn på hvordan denne komprimeringsmetoden fungerer, fordi den er litt for komplisert for denne artikkelen, men det er en lossless komprimering. På grunn av dette har PNG-format tendens til å resultere i større bildestørrelser enn JPEG når det brukes til fotografiske bilder. Når det brukes til bilder av linjetype, resulterer PNG i mye mindre filstørrelser enn JPEG og nesten alltid mindre størrelser enn GIF.
I motsetning til GIF er PNG det samme som JPEG i den forbindelse at det er et enkelt bildeformat; noe som betyr at PNG ikke støtter animasjon. Det støtter imidlertid en stor fordel at verken JPEG eller GIF støtter: alfa gjennomsiktighet. Piksler i et PNG-bilde kan være 50% gjennomsiktige i motsetning til GIF-formatet som vil kreve at disse pikslene er enten 100% transparente eller 100% ugjennomsiktige. Som du kan forestille deg, vil dette muliggjøre bedre blanding og jevnere grafikk enn GIF. PNG implementerer også flere andre forbedringer over GIF-formatet, men de er ikke nødvendige for å komme inn.
Unødvendig å si, PNG er et mye bedre format å bruke enn GIF i nesten alle henseender med unntak av svært små filer (som dette brukes i bakgrunnsmønstre). PNG-formatet tok tidlig brann fra webdesignere som ikke var kompatibel med noen eldre nettlesere, men det problemet kan i stor grad løses gjennom noen få flotte skript i dag, som DD_Belated script.
Som du sikkert vet, er det to hovedtyper av PNG.
Nedenfor er to eksempler bilder jeg vil bruke til å vise hvordan og når du skal bruke hvert bildeformat. Du kan allerede være kjent med disse metodene, men hvis du ikke har studert dem, er dette vel verdt en vurdering.
Som du ser, er bildet nedenfor fotografisk i naturen med farger og toner som varierer vilt. Åpenbart vil ikke alle bildene bruke disse mange farger - men dette bildet er flott å bruke som et eksempel på bruk av JPEG-formatet.
Bildet nedenfor viser JPEG-komprimering fra en kvalitetsinnstilling på 100% til 0%. Ved 100% kvalitet ser bildet ut til å være lossless, men data blir fortsatt bortkastet fra det opprinnelige bildet. Det menneskelige øye kan ikke se datatapet som det er lite. Ved 50% tar bildekvaliteten et merkbart fall, men som du ser, er filstørrelsen over 100K mindre. Det er en stor forskjell med noe minimalt synlig kvalitetsfall. Ved 25% begynner bildet å se dårlig ut og har ikke lagret mye ekstra filstørrelse. Ved 0% ser bildet utferdelig ut, og selv om bildet er en mye mindre filstørrelse enn 100% -innstillingen, er det ikke verdt det.
Dette bildet vil trolig se best ut på ~ 65% kvalitet som ville redusere bildestørrelsen med nesten 100K. For å bestemme de beste innstillingene som skal brukes for en JPEG, reduser du skyveknappen sakte til du kan begynne å se at bildekvaliteten virkelig nedbrytes. Deretter flytte kvaliteten tilbake opp ca 5-10% eller så.
Vi vet at denne JPG ser anstendig ut på nettet; La oss se på noen filstørrelser / kvalitetssammenligninger for de andre formatene:
GIF resulterer i en 63,77K filstørrelse og et fryktelig utseende.
PNG8 resulterer i en filstørrelse på 53.52K på grunn av de mer avanserte komprimeringsmetodene, men ser på samme måte som GIF.
PNG24 resulterer i en filstørrelse på 253,9k og ser nær originalet, men er ikke verdt den store filstørrelsen.
Det beste mulige alternativet for denne typen bilde er JPEG på ~ 65% kvalitet; liten filstørrelse (39,77K) med svært lite visuelt kvalitetstap.
Som du ser nedenfor, bruker bildet ikke varierende farger eller toner, men i stedet solide farger. Dette bildet er 5.72K (GIF) og bruker totalt 8 farger. Dette gjør GIF og PNG8 flotte formater for line art, enkle fargelogoer, etc. PNG8 ville være et bedre valg her, da det resulterer i en mindre filstørrelse (3,54K) på grunn av den bedre komprimeringsmetoden den bruker.
Når du prøver å lagre en GIF, som bildet ovenfor, som en JPEG, kan det resultere i pixelering eller bildeforvrengning. Det vil alltid resultere i mye større filstørrelser også når du arbeider med fotografering og andre rike bilder. Bildet nedenfor er satt til maksimal komprimering og resulterer i en filstørrelse på nesten 8K for JPEG vs 5.72K for GIF og 3.54K for PNG8.
I motsetning til JPEG og PNG24, gir GIF og PNG8 deg mulighet til å velge hvor mange farger kan brukes (opptil 256). Når det gjelder bilder som logoer og enkel linjekunst, kan du oppnå en mindre filstørrelse ved å velge færre farger. Pass på at du ikke velger for få farger, selv om det kan gjøre bildet ser mye verre ut.
Bildet nedenfor er en PNG8 med gjennomsiktighet (GIF ser det samme ut som det ser ut i Photoshop. Når du bruker gjennomsiktighet med GIF eller PNG8, vil du sette matte av bildet til hvilken farge bakgrunnen vil være - for bedre blanding og et renere utseende. Som nevnt er dette fordi GIF ikke støtter alfa-gjennomsiktighet, og Photoshop støtter ikke alfa-gjennomsiktighet med PNG8-formatet, selv om det støtter det (Rediger - dette har siden blitt løst i nye versjoner av Photoshop).
Heldigvis fyrverkeri tillater oss å bruke Alpha Transparency med PNG8-formatet (C'mon Photoshop!). Som du ser i bildet under, er den svarte gradienten fortsatt begrenset i variasjonen av tonen som gjør at gradienten ser litt hakket ut. Den gode tingen om å bruke alfa gjennomsiktighet med PNG8 er at du fortsatt får den lille filstørrelsen, men kanter smelter jevnt og enda mindre gradienter ser bra ut.
En annen stor fordel med PNG8-formatet er at IE6 støtter bruken av alfa-gjennomsiktighet med det nativt! Det betyr at for enkle bilder som trenger alfa gjennomsiktighet (skygger, logoer, etc.) trenger du ikke hacke IE6 når du bruker PNG8 og alfa gjennomsiktighet!
Dessverre kan du ikke lagre et bilde som PNG8 med alfa-gjennomsiktighet i Photoshop, så du må hoppe inn i fyrverkeri for å gjøre dette.
I optimaliser paletten velg PNG8-formatet med alfa-gjennomsiktighet valgt, og klikk deretter "Rebuild" nederst til høyre.
Du trenger ikke å velge en matt farge, og du kan justere antall farger for å dekke dine behov og for å redusere filstørrelsen. I eksemplet til høyre har jeg lagret disse innstillingene som "PNG8 Alpha-T", slik at jeg ikke trenger å velge om hvert alternativ hver gang jeg vil lagre et PNG8-bilde med alfa-gjennomsiktighet.
Det handler om alt som er til det!
Bruke PNG24 er i utgangspunktet den samme ideen som å bruke GIF eller PNG8, bortsett fra at det vil resultere i en større filstørrelse fordi den støtter et mye bredere spekter av fargevarianter. Hvis du har bilder med mer komplekse gradienter som trenger transparens eller større fargedybde, er PNG24 det beste valget. Dessverre støtter IE6 ikke PNG24 nativt; så du må "hack" den for å fungere skikkelig.
PNG24 er bra i de fleste tilfeller hvor du trenger gjennomsiktighet - de er store i filstørrelse, men fungerer godt i tilfeller som merkelogoer hvor kvalitet er viktig, og du vil ikke bruke et lossy format.
Dette er et relativt splitter nytt format, kunngjort for noen uker siden av Google selv. Fra pressemelding:
"For å forbedre komprimeringen som JPEG gir, brukte vi en bildekompressor basert på VP8-kodeken som Google åpnet i mai 2010. Vi brukte teknikkene fra VP8 video intra-frame-koding for å skyve konvolutten i stillbildekoding. tilpasset en veldig lett beholder basert på RIFF. Mens dette beholderformatet bidrar til en minimal overhead på bare 20 byte per bilde, er det utvidbart for å tillate forfattere å lagre metadata de ønsker å lagre.
Mens fordelene med et VP8-basert bildeformat var tydelige i teorien, trengte vi å teste dem i den virkelige verden. For å måle effektiviteten av vår innsats, plukket vi tilfeldigvis om 1.000.000 bilder fra nettet (for det meste JPEG og noen PNG og GIF) og kodet dem på nytt til WebP uten synlig kompromitterende visuell kvalitet. Dette resulterte i en gjennomsnittlig reduksjon på 39% i filstørrelsen. Vi forventer at utviklere i praksis vil oppnå enda bedre filstørrelsesreduksjon med WebP når de starter fra et ukomprimert bilde. "
Målet her er enkelt: å øke hastigheten på bilder på nettet ved hjelp av mer moderne algoritmer. Spørsmålet er dette: Vil bli vedtatt? Google er et massivt selskap med noen ekte kraft til å presse dette formatet til massene, men som vi har sett med noen av sine produkter (jeg ser på deg Wave!) Kan selv gode ideer falle flatt.
"Skalerbar vektorgrafik" er et format som aldri ble tatt på som en mye brukt bildetype. Ideen bak dette formatet er å tillate "vektorgrafik" på nettet. Formatet bruker XML som grunnlag for å beskrive et 2D-bilde på nettet. Nettleserstøtte for SVG er inkonsekvent, men hvis du virkelig vil inkludere skalerbar grafikk, er det verdt å lese på dette formatet.
På fritiden oppfordrer jeg deg til å grave litt dypere inn i disse bildformatene og alt de har å tilby. Du lærer mye og vet nøyaktig hva du kan gjøre med disse bildformatene eller hvilken som skal brukes til enhver situasjon. Verdien av super-små filstørrelser for bilder ser ut til å passere etter hvert som bredbånd utvides over Internett, men hastighet vil alltid være et nyttig nettsted karakteristisk, og forståelse av disse bildformatene er det første skrittet for å optimalisere dine egne bilder på nettet.
Hvis du har spørsmål eller kommentarer, kan du skrive dem under!
Accentsconagua