Share
V-ați întrebat vreodată ce este diferența dintre imaginile JPEG, GIF și PNG pe care le folosim pe web? Ca designer - și mai ales un designer web - este important să cunoașteți diferența dintre diferitele formate de imagine și cum să le folosiți în fiecare situație. Acest articol se va referi la modul de utilizare a acestora pentru fiecare situație, pentru a menține dimensiunile fișierelor mici și calitatea imaginii ridicate. Facem acest lucru sub "Basix", dar informațiile ar trebui să fie interesante pentru oricine dorește să înțeleagă mai bine formatele de imagine.
Pentru a utiliza cel mai bine un instrument, trebuie mai întâi să înțelegeți cum funcționează instrumentul. Pentru a înțelege cum să folosim mai bine tipurile de imagini, trebuie să ne uităm la modul în care funcționează algoritmul de compresie. Stiu, stiu, nu esti un geek numar si cine chiar ii pasa? Este ca și cum ai conduce o mașină; îl puteți conduce mai bine atunci când știți cum interacționează toate părțile mici. În plus, când se întâmplă ceva, știți cum să remediați acest lucru!
JPEG a fost dezvoltat de Grupul Joint Photographic Experts. După cum probabil ați ghicit, funcționează bine pentru tipurile de imagini naturale (fotografie). Tipurile de imagini naturale, cum ar fi fotografia, au variații netede ale culorilor, ceea ce înseamnă că formatul JPEG funcționează bine și pentru imaginile care conțin gradienți și diferite tonuri și culori.
Un aspect important despre JPEG este că acestea sunt, în general, a lossy format, cu excepția cazului în care utilizați o altă variantă fără pierderi. Pierderea de compresie este pur și simplu o formă de codificare care aruncă (pierde) unele dintre datele sale ... de aceea, dacă salvați un JPG de 100 de ori, va deveni încet mai deteriorat în timp. Există versiuni "fără pierderi" ale JPG-urilor, dar aceste variante nu sunt comune și nu au suport pe scară largă. Dacă aveți nevoie să stocați date de imagine într-un format fără pierderi, este mai bine să utilizați un format precum TIFF sau PSD.
Acum pentru partea tehnică: Procesul unui JPEG împarte imaginea în blocuri de 8 × 8 pixeli și le execută printr-un calcul DCT (Discrete Cosine Transform) urmat de cuantizare (JPEG 2000, o versiune mai nouă, utilizează o transformare wavelet în loc de DCT ).
În termeni de laic: se uită practic la blocurile imaginii și determină variațiile mici de culoare, apoi aruncă unele din aceste variante pe baza nivelului de compresie pe care l-ați ales. Datele descărcate sunt eliminate din fișier, rezultând un fișier mic. În consecință, aceasta diminuează și calitatea imaginii; Probabil știți că dacă setați compresia foarte ridicată, veți ajunge la o imagine degradată, pixelată ... în timp ce setările de compresie mai mici vor avea ca rezultat o imagine de calitate superioară.
GIF (Graphics Interchange Format) a fost dezvoltat de CompuServe și utilizează metoda de compresie LZW (Lempel-Ziv-Welch), care nu are pierderi. Această metodă de comprimare construiește o tabelă de culori pentru imaginea în care fiecare valoare de culoare este atribuită pixelilor. Această metodă de comprimare face acest format de imagine ideal pentru linia de artă, logo-uri sau alte imagini simple, fără gradienți sau culori diferite.
O notă interesantă despre această metodă de comprimare este aceea că se uită la schimbarea pixelilor pe orizontală. Aceasta înseamnă că imaginile în care modificările culorilor pixelilor care apar mai frecvent orizontal vor fi mai mari decât imaginile în care modificările de culoare ale pixelilor apar mai frecvent pe verticală. Formatul acceptă până la 8 biți per pixel - ceea ce permite unei singure imagini să facă trimitere la o paletă de până la 256 de culori distincte. Puteți utiliza mai puține culori (este posibil să fi văzut imaginile GIF folosind doar o mână de culori), ceea ce poate duce la rezultate interesante, chiar artistice.
GIF-urile pot face două lucruri suplimentare pe care JPEG nu le poate face. În primul rând, un GIF poate utiliza transparența. Într-un pixel GIF sunt fie 100% transparente, fie 100% opace. GIF este, de asemenea, un format multi-imagine, astfel încât să puteți utiliza animaţie (pentru mai bine sau mai rău).
PNG (Portable Network Graphics) a fost creat pentru a înlocui sau, cel puțin, a îmbunătăți formatul GIF. PNG utilizează metoda de compresie DEFLATE - același algoritm utilizat în zip și gzip. Nu voi merge în modul în care funcționează această metodă de comprimare deoarece este puțin prea complicat pentru acest articol, dar este o compresie fără pierderi. Din acest motiv, formatul PNG tinde să aibă ca rezultat dimensiuni mai mari ale imaginii decât JPEG când este folosit pentru imagini de tip fotografic. Atunci când este folosit pentru imaginile de tip linie de artă, PNG are dimensiuni mult mai mici decât JPEG și aproape întotdeauna dimensiuni mai mici decât GIF.
Spre deosebire de GIF, PNG este același cu JPEG, având în vedere că este un format de imagine unic; ceea ce înseamnă că PNG nu acceptă animația. Cu toate acestea, suportă un avantaj major că nici suportul JPEG sau GIF nu suportă: alfa transparență. Pixelii dintr-o imagine PNG pot fi transparenți în proporție de 50%, spre deosebire de formatul GIF, care ar necesita fie 100% transparenți, fie opac 100%. După cum vă puteți imagina, acest lucru ar permite o mai bună îmbinare și o grafică mai bună decât GIF. PNG implementează, de asemenea, mai multe îmbunătățiri față de formatul GIF, dar nu sunt necesare pentru a intra.
Inutil să spun că PNG este un format mult mai bun de utilizat decât GIF în aproape toate privințele, cu excepția fișierelor foarte mici (așa cum se utilizează în modelele de fundal). Formatul PNG a atras focul de la proiectanții web ca fiind incompatibil cu unele browsere web mai vechi, dar această problemă poate fi rezolvată în mare parte prin câteva scenarii mari de astăzi, cum ar fi scriptul DD_Belated.
După cum probabil știți, există două tipuri principale de PNG.
Mai jos sunt două exemple de imagini pe care le voi folosi pentru a arăta cum și când să utilizeze fiecare format de imagine. S-ar putea să fiți deja familiarizați cu aceste metode, dar dacă nu le-ați studiat cu adevărat, merită o revizuire.
După cum puteți vedea, imaginea de mai jos este fotografică în natură, cu culori și tonuri care variază sălbatic. Evident, nu toate imaginile vor folosi această multitudine de culori - dar această imagine este excelentă pentru a fi folosită ca exemplu de utilizare a formatului JPEG.
Imaginea de mai jos prezintă compresia JPEG de la o setare de calitate de 100% până la 0%. La 100% calitate, imaginea pare a fi fără pierderi, dar datele sunt încă eliminate din imaginea originală. Ochiul uman nu poate vedea pierderea datelor deoarece este minuțioasă. La 50%, calitatea imaginii are o scădere semnificativă, dar, după cum puteți vedea, dimensiunea fișierului este de peste 100K mai mică. Aceasta este o diferență uriașă, cu o pierdere de calitate vizibilă minimă. La 25% imaginea începe să arate cu adevărat rău și nu a salvat o dimensiune mult mai mare a fișierului. La 0%, imaginea pare oribilă și, deși imaginea are o dimensiune mult mai mică decât setarea de 100%, compromisul nu merită.
Această imagine ar arăta, probabil, cel mai bine la o calitate de ~ 65%, ceea ce ar reduce dimensiunea imaginii cu aproape 100K. Pentru a determina cele mai bune setări de utilizat pentru un JPEG, reduceți încet cursorul până când puteți începe să vedeți că degradarea calității imaginii se deteriorează. Apoi mutați calitatea înapoi aproximativ 5-10% sau cam asa ceva.
Știm că acest JPG pare decent pentru web; Să analizăm câteva comparații între dimensiunea fișierelor / calitatea celorlalte formate:
GIF rezultă într-o dimensiune a fișierului de 63,77K și o imagine oribilă.
PNG8 rezultă într-o dimensiune a fișierului de 53.52 K din cauza metodelor de compresie mai avansate, dar arată la fel ca GIF.
PNG24 rezultă într-o dimensiune a fișierului de 253,9 K și arată aproape de original, dar nu merită marimea mare a fișierului.
Cea mai bună opțiune posibilă pentru acest tip de imagine este JPEG cu o calitate de aproximativ 65%; dimensiune mică a fișierului (39.77K), cu o pierdere de calitate vizuală foarte mică.
După cum puteți vedea mai jos, imaginea nu utilizează culori sau tonuri diferite, ci culori solide. Această imagine este 5.72K (GIF) și utilizează un total de 8 culori. Acest lucru face GIF și PNG8 formate excelente pentru arta de linie, logo-uri de culoare simple, etc. PNG8 ar fi o alegere mai bună aici, deoarece are ca rezultat o dimensiune mai mică a fișierului (3.54K) datorită metodei mai bune de comprimare pe care o folosește.
Când încercați să salvați un GIF, cum ar fi imaginea de mai sus, ca JPEG, aceasta poate duce la pixelarea sau distorsiunea imaginii. Va avea întotdeauna rezultat în dimensiuni mult mai mari de fișiere atunci când aveți de-a face cu fotografie și alte imagini bogate. Imaginea de mai jos este setată la o comprimare maximă și are ca rezultat o dimensiune a fișierului de aproape 8K pentru JPEG vs 5.72K pentru GIF și 3.54K pentru PNG8.
Spre deosebire de JPEG și PNG24, GIF și PNG8 vă permit să selectați câte culori pot fi utilizate (până la 256). În cazul imaginilor precum logo-uri și linii simple, puteți obține o dimensiune mai mică a fișierelor selectând mai puține culori. Aveți grijă să nu selectați prea puține culori, deoarece poate face imaginea să se înrăutățească.
Imaginea de mai jos este un PNG8 cu transparență (aspectul GIF este același) după cum arată în Photoshop. Atunci când utilizați transparența cu GIF sau PNG8, veți dori să setați mată imaginii la orice culoare va fi fundalul - pentru o mai bună amestecare și o imagine mai curată. Așa cum am menționat mai devreme, acest lucru se datorează faptului că GIF nu acceptă transparența alpha, iar Photoshop nu acceptă transparența alfa cu formatul PNG8, chiar dacă îl suportă (Edit - acest lucru a fost rezolvat de atunci în versiuni noi ale Photoshop).
Din fericire, Fireworks ne permite să folosim Transparența Alpha cu formatul PNG8 (C'mon Photoshop!). După cum puteți vedea în imaginea de mai jos, gradientul negru este încă limitat în variația tonului, ceea ce face ca gradientul să arate puțin încrețit. Lucrul grozav despre utilizarea transparenței alfa cu PNG8 este că încă obțineți mărimea fișierului mic, dar marginile se amestecă ușor și chiar și gradientele minore arată foarte bine.
Un alt avantaj major al formatului PNG8 este faptul că IE6 acceptă utilizarea transparenței alfa cu ea nativă! Asta inseamna pentru imagini simple, care au nevoie de transparenta alfa (umbre, logo-uri, etc.), nu trebuie sa hackati IE6 atunci cand folositi transparenta alfabetica PNG8 si alfa!
Din păcate, nu puteți salva o imagine ca PNG8 cu transparență alfa în Photoshop, așa că va trebui să sari în Fireworks pentru a face acest lucru.
În paleta Optimize, selectați formatul PNG8 cu transparența alfa selectată, apoi faceți clic pe "Rebuild" în colțul din dreapta jos.
Nu este nevoie să selectați o culoare mată și puteți ajusta numărul de culori pentru a se potrivi nevoilor dvs. și pentru a reduce dimensiunea fișierului. În exemplul din dreapta, am salvat aceste setări ca "PNG8 Alpha-T", astfel încât nu trebuie să resetez fiecare opțiune de fiecare dată când vreau să salvez o imagine PNG8 cu transparență alfa.
Este vorba despre tot ce există!
Utilizarea PNG24 este în esență aceeași idee ca și folosirea GIF sau PNG8, cu excepția faptului că va avea ca rezultat o dimensiune mai mare a fișierului deoarece suportă o gamă mult mai largă de variații de culoare. Dacă aveți imagini cu gradiente mai complexe care necesită transparență sau adâncime de culoare, PNG24 este cea mai bună alegere. Din păcate, IE6 nu suportă PNG24 nativ; astfel încât va trebui să-l "hack" pentru a funcționa corect.
PNG24 sunt excelente în majoritatea cazurilor în care aveți nevoie de transparență - sunt mult mai mari în mărimea fișierelor, dar funcționează bine în cazuri precum logo-urile de marcă în care calitatea este importantă și nu doriți să utilizați un format lossy.
Acesta este un format relativ nou, anunțat cu doar câteva săptămâni în urmă de Google în sine. Din comunicatul de presă:
"Pentru a îmbunătăți compresia oferită de JPEG, am folosit un compresor de imagine bazat pe codecul VP8 pe care Google a deschis-o în mai 2010. Am aplicat tehnicile de codare intraframe video VP8 pentru a împinge plicul în codificarea imaginilor. a adaptat un container foarte ușor bazat pe RIFF.În timp ce acest format de container contribuie cu un minim de cheltuieli de doar 20 de octeți pe imagine, este extensibil pentru a permite autorilor să salveze metadatele pe care ar dori să le stocheze.
În timp ce beneficiile unui format de imagine bazat pe VP8 erau clare în teorie, trebuia să le testăm în lumea reală. Pentru a măsura eficacitatea eforturilor noastre, am selectat în mod aleatoriu aproximativ 1.000.000 de imagini de pe web (majoritatea JPEG-urilor și unele PNG-uri și GIF-uri) și le-am re-codificat la WebP fără compromiterea perceptibilă a calității vizuale. Aceasta a dus la o reducere medie de 39% a dimensiunii fișierului. Ne așteptăm ca dezvoltatorii să obțină, în practică, chiar și o reducere mai bună a dimensiunii fișierelor cu WebP atunci când pornesc de la o imagine necomprimată. "
Scopul este simplu: să accelerați imaginile pe web folosind algoritmi mai moderni. Întrebarea este următoarea: Voia este adoptată? Google este o companie masivă cu o putere reală de a împinge acest format la mase, dar, așa cum am văzut cu unele dintre produsele sale (mă uit la tine Wave!), Chiar și ideile mari pot cădea.
"Scalable Vector Graphics" este un format care nu a fost capturat niciodată ca un tip de imagine larg utilizat. Ideea din spatele acestui format este să permită "grafice vectoriale" pe web. Formatul utilizează XML ca bază pentru descrierea unei imagini 2D pe web. Suportul pentru browser pentru SVG este inconsecvent, dar dacă într-adevăr doriți să includeți grafică scalabilă, merită citit în acest format.
În timpul liber vă încurajez să săturați mai adânc în aceste formate de imagine și tot ceea ce au de oferit. Veți învăța multe și veți ști exact ce puteți face cu aceste formate de imagine sau pe care să le utilizați pentru fiecare situație. Valoarea dimensiunilor super-mici ale fișierelor pentru imagini pare să treacă pe măsură ce extensia de bandă largă se extinde pe internet, dar viteza va fi întotdeauna o caracteristică utilă a site-ului și înțelegerea acestor formate de imagine este primul pas spre optimizarea propriilor imagini pe Web.
Dacă aveți întrebări sau comentarii, nu ezitați să le postați mai jos!
Accentsconagua