Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să vorbesc despre formatele de grafică raster care au fost adecvate pentru a fi folosite pentru imaginile afișate pe site și, în general.
Ne vom uita la Gif, care este popular acum tocmai datorită suportului său pentru animația GIF, Jpg, care este foarte potrivit pentru inserarea de fotografii color și, bineînțeles, Png, care vă permite să creați imagini cu un fundal transparent și poate servi ca un excelent înlocuitor pentru formatele menționate anterior. De asemenea, puteți citi aproximativ jumătate grafic și jumătate text.
Toate acestea sunt utilizate în mod activ, dar trucul este să alegeți formatul optim pentru fiecare caz specific, astfel încât calitatea imaginii să nu sufere și greutatea acesteia să fie minimă. Vă sfătuiesc să luați grafica în sine de la servicii gratuite ca acesta și altele asemănătoare, pentru ca ulterior să nu fie probleme cu încălcarea drepturilor de autor.
Grafică raster pentru web sub formă de GIF, JPEG și PNG
Acum este foarte dificil să ne imaginăm pagini web individuale fără fotografii, pictograme sau imagini pe ele. Apropo, primul browser care putea afișa grafică a fost Mosaic (mozaic), care a apărut aproape simultan cu apariția lui .
Mai mult, așa cum am menționat mai sus, nu toate formatele de imagine sunt potrivite pentru adăugarea pe site, ci doar anumite formate, maximul adaptat pentru aceasta - Gif, Png și Jpg. În funcție de tipul de imagine pe care doriți să o adăugați unei pagini web, va trebui să alegeți unul dintre formatele menționate, care, la rândul său, aparțin așa-numitelor grafice raster.
Prin ea însăși, implică faptul că imaginea pe hârtie sau pe un monitor va fi formată din așa-numitele elemente unice numite pixeli (puncte de culoare). Toate imaginile de orice format legate de grafica raster au anumite proprietăți.
Mărimea imaginii este determinată de un astfel de concept ca permisiune, care este orizontal și vertical, de exemplu, 300 pe 200. Uneori, totuși, se vorbește despre numărul total de pixeli din imagine, de exemplu, producătorii de camere (12 Mega pixeli etc.).
În ceea ce privește web-ul, dimensiunea fizică a unei imagini raster poate depinde în mod semnificativ de dimensiunea pixelilor (granulația ecranului) a dispozitivului pe care utilizatorul vizualizează pagina web. Imaginile sunt, de asemenea, caracterizate de un astfel de concept ca numarul de culori folosit în ea. De exemplu, Gif folosește doar 256 de culori, care sunt specificate într-un octet de informații.
Ei bine, pe lângă asta, aceste formate pot folosi diverse modele de culoare, cu ajutorul căruia se formează toate nuanțele posibile. Când am discutat despre scris cu tine, ne-am uitat în detaliu la principiile formării modelului RGB.
Unul dintre principalele dezavantaje ale graficelor raster este dimensiunea mare a imaginilor rezultate, chiar și în formatele Gif, Png și Jpg care sunt folosite pe web. Desigur, pentru a reduce imaginile rezultate, diverse algoritmi de compresie, care funcționează atât cu degradarea calității (compresie cu pierderi), cât și fără ea.
Toate acestea sunt foarte asemănătoare cu principiile de funcționare ale algoritmilor de compresie audio - comprese MP3 cu pierderi și, în primul rând, sunt eliminate orice tranziții care cel mai probabil nu vor fi percepute de urechea umană. O astfel de analogie în lumea graficelor raster poate fi Format Jpg, în care se realizează compresia informației cu pierderi. În același timp, se ține cont de posibilitățile de percepție vizuală umană și, în primul rând, sunt eliminate acele detalii care nu vor fi deosebit de vizibile.
Dar există și algoritmi de compresie a imaginii fără pierderi - BMP, Gif și Png. BMP cel mai adesea nu este o imagine comprimată, dar Gif și Png sunt comprimate fără pierderi prin eliminarea informațiilor repetitive și redundante (se dovedește ceva ca arhivarea, dar ținând cont de caracteristicile graficelor raster).
Există multe editoare grafice care pot lucra cu grafică raster (de exemplu, același Photoshop sau acesta), dar ar trebui să utilizați editori care sunt orientați special către acest lucru, pentru că numai atunci veți putea obține cele mai optimizate imagini, care apoi nu va crea o încărcare inutilă pe serverul dvs. de găzduire atunci când le încărcați în browserele utilizatorilor.
Format Gif - elemente de design și animație pentru site
În prezent, aproape toate browserele acceptă cele trei formate principale de grafică raster utilizate pentru web - Gif, Png și Jpg. Din punct de vedere istoric, GIF a fost primul care a apărut și, cu ajutorul lui, în primele browsere a fost posibil să adăugați și să afișați imagini și informații media, care au fost exprimate în primul rând în așa-numita animație GIF.
Abrevierea Gif înseamnă Graphics Interchange Format. Pronunțat ca gif, dar dezvoltatorii standardului au crezut că este corect să-l numească jif, dar un alt nume în interpretarea rusă a prins rădăcini.
Deoarece a fost dezvoltat cu mult timp în urmă, iar majoritatea utilizatorilor din acel moment aveau, oh, atât de puțin, iar la crearea lui, accentul principal a fost pe minimizarea dimensiunii imaginii rezultate (am scris despre asta într-un articol despre sau).
În acest sens, Gif poate include o paletă formată din din doar 256 de culori(se mai numește și paleta indexată). Acestea. o imagine convertită în acest format va conține întotdeauna cel mult 256 de nuanțe și toate celelalte culori vor fi create pe baza amestecării (pixelii adiacenți din paleta de bază sunt selectați inteligent, astfel încât ochiul uman de la distanță să-i perceapă ca fiind culoarea necesară în acest loc).
Dar, din păcate, în practică, la conversia fotografiilor full-color în GIF-uri, apar o grămadă de artefacte (din cauza acestei amestecări) care fac fotografiile inacceptabile pentru postare pe Internet. Prin urmare, nu este folosit pentru a afișa imagini și fotografii pline de culoare pe paginile site-ului web (pentru aceasta, cel mai adesea se alege Jpg sau Png).
Animația gif și utilizarea acesteia pe Internet
Având un dezavantaj atât de semnificativ, Gif ar fi trebuit să cadă în uitare cu mult timp în urmă, dar este, totuși, încă mai viu decât toate ființele vii, iar imaginile în acest format pot fi găsite adesea pe paginile site-ului.
Întreaga captură aici este aceea Formatul GIF acceptă animație(singurul folosit pe web). Toate tipurile de animații și (inclusiv) pe care le puteți găsi în cantități mari pe Internet au extensia GIF.
Adevărat, un format alternativ, Mng, se dezvoltă de ceva vreme, adăugând posibilitatea animației în Png, dar dezvoltarea și distribuția acestuia nu merge într-un ritm foarte mare. Prin urmare, dacă nu țineți cont de tehnologia flash, toată animația de pe web este creată pe baza Gif și flash.
Esența acestei animații este că containerul GIF conține nu o singură imagine, ci mai multe simultan, iar timpul după care aceste imagini se vor înlocui reciproc este de asemenea scris acolo. În acest caz, se va putea bucla animația, când după ultimul cadru începe din nou afișarea primului.
Există editori specializati în care poți crea animație Gif. Principalul lucru este să creați numărul necesar de imagini de o anumită dimensiune, apoi acestea sunt plasate pe cronologia și se stabilește un interval pentru modificarea lor.
Rezultatul este același efect de desene animate pe care deja suntem obișnuiți să-l vedem pe paginile web. Uneori chiar și ochii orbi din bannere animate (citiți despre cum), emoticoane, avatare. Un exemplu de animație GIF este spiridușul din pagina „ ” a proiectului meu.
GIF acceptă fundal transparent (aproape)
Dar animația nu este singura caracteristică a acestui format. De asemenea, poate suporta o modalitate primitivă de a crea transparență pentru imaginile create. Una dintre cele 256 de culori posibile din Gif este setată la transparentă și fundalul paginii web va apărea prin ea, pe care va fi amplasată această imagine.
Dar problema este că pentru orice pixel dintr-o imagine de acest format sunt posibile doar două valori - transparente sau opace (două stări extreme fără posibilitatea unor opțiuni intermediare, cum ar fi translucid, un sfert de transparent etc.). Acestea. despre conceptul de canal alfa (utilizat în Png), în Gif transparent nu se pune problema. Acest lucru face dificilă afișarea fără probleme a nivelurilor de transparență.
Dar totuși, GIF transparent găsește aplicație pe web. De exemplu, diverși marcatori utilizați pe paginile web sunt adesea salvate în acest format. Fundalul din jurul markerului devine transparent și fundalul paginii web se va afișa prin el. De exemplu, așa ar arăta un marker cu un fundal gri:
Și așa va arăta același marcator atunci când înlocuiți fundalul gri cu o culoare transparentă atunci când salvați ca GIF:
Pentru a crea margini netede cu o scădere a transparenței în imaginile Gif, folosesc un singur truc. În orice editor grafic, atunci când creați o imagine în acest format, veți avea posibilitatea de a specifica așa-numita culoare MATE (în caz contrar, culoarea implicită, de obicei albă, va fi folosită ca ea).
Culoarea MATE este amestecată în zonele Hypha unde doriți să creați margini netede cu o scădere a transparenței, dar toate acestea vor arăta bine numai pentru fundalul paginii web care se potrivește cu MATE pe care l-ați specificat. Dar pe deasupra unei alte nuanțe, această imagine nu va arăta foarte bine.
Pentru ce grafică web are sens să folosiți formatul Gif?
După cum am menționat mai sus, în acest format, imaginile sunt comprimate (convertite) fără pierderi, dar numai dacă imaginea originală era de 8 biți (a fost alocat doar un octet pentru codificarea culorilor), adică conținea 256 de culori. Dacă sursa a fost plină de culoare, atunci va exista o deteriorare a calității la salvarea sau convertirea în Gif, tocmai din cauza pierderii unora dintre nuanțe.
Algoritmul de compresie (conversie) din Gifa funcționează în așa fel încât să optimizeze cel mai bine dimensiunea fotografiei cu schimbare verticală a culorii (gradient). Acestea. Este logic să îl folosiți pentru a comprima imagini a căror culoare în linii nu se schimbă prea mult.
Dar atunci când convertiți o fotografie cu un gradient orizontal sau oblic în Gif, imaginea finală se poate dovedi a fi foarte mare, de exemplu, în comparație cu același Png. Ei bine, pe lângă asta, pot apărea artefacte neplăcute.
În plus, acest algoritm de compresie a fost brevetat la un moment dat și de aceea s-a început munca intensivă la alternativa Png 8, dar în acest moment patentele Gif au expirat deja. PNG a ajuns să fie cap și umeri deasupra GIF și continuă să câștige popularitate în rândul webmasterilor.
Jpg (JPEG) - imagini full color cu greutate redusă
Jpg a fost conceput pentru a comprima și stoca fotografii color. Este proprietatea Asociației Fotografilor Americani, care, de fapt, este ceea ce înseamnă abrevierea Jpeg - Joint Photographic Experts Group. Deși această asociație în sine spune că acesta este un format deschis.
După cum am menționat mai sus, comprimă imaginile cu pierdere de calitate. Întreaga imagine este împărțită în pătrate care măsoară 8 pe 8 pixeli și apoi începe să funcționeze algoritmul de compresie, care grupează diferite forme simple din aceste pătrate simple. Toate acele diferențe de culori pe care ochiul uman nu le poate observa sunt eliminate din imaginea Jpg.
Avantaje și dezavantaje ale JPEG
Prin eliminarea unor informații care încă nu ar fi vizibile cu ochiul liber, Jpeg permite uneori comprima de zece ori imaginile color chiar și fără pierderi vizibile de calitate.
Dar, pe de altă parte, chiar dacă selectați calitatea maximă, nu veți putea salva o fotografie în acest format cu absolut aceeași calitate ca cea originală. Cu siguranță vor fi pierderi, dar nu întotdeauna vizibil pentru ochi fără mărire.
Puteți verifica acest lucru singur făcând o fotografie de foarte înaltă calitate și salvând-o în Japeg cu calitate maximă de câteva zeci de ori la rând. Prin urmare, este mai bine nu re-salvați ca Jpg fișiere sursă de același format - vor exista pierderi serioase de calitate din cauza acumulării și suprapunerii artefactelor. Prin urmare, nu ar trebui să salvați o imagine neterminată ca JPEG și apoi să continuați editarea acesteia - veți pierde semnificativ calitatea.
Iată un exemplu de astfel de batjocură (doar câteva salvări repetate în format Jepeg și nu veți putea privi imaginea fără lacrimi):
Dar în ciuda acestor neajunsuri Jpeg a devenit foarte popular mai ales de la apariția fotografiei digitale. Principalele sale avantaje sunt posibilitatea unei compresii rapide, consumatoare de resurse și foarte puternice a imaginilor color. Adevărat, este dificil să numim acest format de grafică raster full-color, deoarece nu acoperă în totalitate întreaga paletă RGB, dar acest lucru poate fi atribuit unor dezavantaje minore.
Ce imagini sunt cel mai bine salvate în format Jpg?
Jpg este cel mai bun pentru salvarea fotografiilor cu tranziții netede de luminozitate și contrast, dar pentru a salva ceva precum desene, texte și alte fotografii cu tranziții de contrast clare, este foarte prost potrivit și, în acest caz, cea mai bună opțiune ar fi utilizarea compresiei fără pierderi în Png.
Uitați-vă cât de inestetic arată o captură de ecran de text în format JPEG (deși cu aceeași greutate sau chiar mai mică în format PNG, imaginea ar fi imposibil de distins de originală):
Jpg (JPEG), după cum am menționat deja, are capacitatea setați calitatea imaginea rezultată prin ajustarea gradului de compresie. Când salvați fotografii care, de exemplu, au mult cer, ar trebui să setați calitatea Jpeg (nivel de compresie) aproape de maxim (compresie minimă) pentru a evita artefactele vizibile chiar pe acest cer.
Și când salvați fotografii cu o mulțime de detalii de culori diferite, puteți reduce calitatea (mărește raportul de compresie) fără a vă teme de apariția unor artefacte vizibile.
Am menționat că la salvarea ca Jpg (JPEG), întreaga imagine este împărțită în pătrate cu latura de opt pixeli. Deci, dacă aveți ocazia să alegeți dimensiunea fotografiei rezultate, atunci este mai bine luați în multipli de opt, deoarece in acest caz veti obtine ceva mai putine artefacte, care se vor observa mai ales in pozele cu linii subtiri etc.
Png - înlocuitor pentru Gif și Jpeg, precum și un fundal transparent în Png32
Inițial, Png a fost dezvoltat ca o alternativă la Gif, care era proprietar la acea vreme (nimănui din exterior nu avea voie să participe). Abrevierea înseamnă „grafică de rețea portabilă” pentru care a fost concepută inițial pentru utilizare pe web. Acest format de grafică raster este complet deschis și descrierea sa se află pe site-ul web al consorțiului W3C.
Permiteți-mi să vă reamintesc că el este format de compresie fără pierderi, ceea ce înseamnă că puteți salva în siguranță imaginea neterminată în Png și apoi puteți continua editarea fără teama de a obține artefacte suplimentare, așa cum a fost cazul în Jpg.
Png8 și Png24 - un înlocuitor complet pentru Gif și Jpeg
Există trei variante ale formatului PNG, fiecare dintre acestea fiind concepută pentru a-și îndeplini propriile sarcini. Primele două au fost create inițial ca o alternativă la formatele deja existente GIF și JPEG, iar al treilea a adus în grafica web ceva ce nu a existat deloc până atunci. Dar mai întâi lucrurile.
Png 8— cele opt indică adâncimea de biți a culorii și indică faptul că atunci când salvați o fotografie în PNG 8, vor fi folosite doar 256 de culori, similar cu Gif-ul deja descris mai sus.
Acestea. a fost dezvoltat ca un înlocuitor cu drepturi depline pentru GIF și rezultatele compresiei imaginii în aceste două formate de grafică raster vor fi aproape identice. La fel ca în Gif - aici transparență susținută, dar cu un canal alfa.
Png 24— numărul 24 înseamnă că pentru fiecare pixel al unei fotografii în acest format sunt alocate trei canale de culoare a câte 8 biți fiecare (1 octet), realizând astfel formarea imaginii pline de culoare. Acea. cu ajutorul Png 24 poți transmite culorile fără distorsiuni. Nici măcar Jpg nu poate face asta sută la sută.
Salvând imaginea originală în Png 24, obțineți exact aceeași fotografie, dar dimensiunea acesteia va fi în continuare mai mare decât atunci când utilizați Jpeg. Dar acest lucru, însă, nu este întotdeauna cazul. Pentru imagini mari cu tranziții clare, acest format poate afișa rezultate chiar mai bune decât Jipeg de calitate acceptabilă.
Acestea. așa cum am menționat mai sus, Jpeg este cel mai potrivit pentru fotografiile obișnuite, dar pentru imaginile cu text sau în care calitatea nu poate fi degradată în niciun caz, Png 24 va fi indispensabil. , pe care le folosesc in articole, Png 8 sau 24 mi se par a fi solutia optima.
De exemplu, aceeași captură de ecran cu text pe care o puteți vedea chiar mai sus salvată în Jpeg (deși cu o calitate scăzută pentru a evidenția posibilele artefacte) în Png va arăta astfel:
Dar de obicei salvez o poză color la începutul fiecărui articol din Jeep, pentru că... Raportul calitate/dimensiune vorbește în favoarea acestei opțiuni particulare. Voi spune imediat că există diferite moduri de a comprima imaginile în format Png, iar unul dintre cei mai buni algoritmi este folosit, după părerea mea, în serviciul online Puny Png.
Png 32 - transparență completă cu canal alfa
Probabil ați înțeles prin analogie că în acest format de grafică raster este posibil să folosiți până la patru octeți de informații pentru un pixel.
Trei sunt responsabili pentru formarea unei imagini pline de culoare prin analogie cu Png 24, dar al patrulea octet este alocat separat pentru a forma un canal alfa, permițând utilizarea Png 32 pentru a obține poze cu fundal transparent.
În el puteți specifica modificări ale gradului de transparență fără nicio culoare MATE, ceea ce înseamnă că astfel de imagini vor arăta la fel de bine pe absolut orice pagină web cu orice fundal. Un exemplu de astfel de imagine este logo-ul din antetul blogului meu:
Probabil că este clar că Png 32 este pur și simplu de neînlocuit și nu are analogi în ceea ce privește capabilitățile pe care le oferă.. Apropo, canalul alfa poate fi folosit și în PNG 8, dar, din păcate, nu toate editorii de grafică raster vă vor permite să faceți acest lucru. Photoshop, de exemplu, nu poate face acest lucru, dar Fireworks sau Gimp pot.
În plus, Png 32 și 8 cu un canal alfa au o astfel de problemă încât nu este pe deplin acceptat în browserul IE, începând de la versiunea 6 și mai jos, iar în loc de un fundal transparent se va amesteca o culoare gri, iar Png 8 cu un canal alfa nu va apărea deloc. Adevărat, utilizatorii practic nu mai au astfel de browsere arhaice, dar totuși.
Multă baftă! Ne vedem curând pe paginile site-ului blogului
S-ar putea să fiți interesat
HTML și CSS - de ce trebuie să le cunoașteți și de ce sunt necesare cunoștințe despre PHP și MySQL, dar într-o măsură mult mai mică
Știți diferența dintre JPEG, GIF, PNG și alte formate de imagine? Când ar trebui să utilizați unul sau altul format sau care este cel mai bun pentru salvarea fotografiilor? Mai jos veți găsi răspunsuri la toate aceste întrebări.
In contact cu
Algoritmi de comprimare a datelor cu pierderi/fără pierderi
În primul rând, trebuie să înțelegeți diferența dintre algoritmii de comprimare a datelor cu pierderi și fără pierderi. Compresia fără pierderi este o metodă de comprimare a imaginii care își menține calitatea indiferent de câte ori este comprimat și restaurat fișierul.
Când utilizați compresia cu pierderi, calitatea imaginii va scădea de fiecare dată când fișierul este comprimat/decomprimat. Unul dintre avantajele neîndoielnice ale acestei metode este posibilitatea unui grad mai mare de compresie. Pentru stocarea și editarea fotografiilor, compresia fără pierderi este mai potrivită, cu toate acestea, dacă trebuie să trimiteți imaginea prin e-mail sau să o publicați pe Internet, este mai bine să utilizați a doua metodă.
.BRUT
Un format de fișier care conține informații brute care provin direct de la senzorul camerelor semi-profesionale și profesionale. Aceste fișiere nu sunt procesate de procesorul camerei și conțin toate informațiile capturate în formă „brută”. Dimensiunea unor astfel de fișiere poate depăși 25 MB. Fișierele RAW sunt grozave pentru editare, dar datorită dimensiunii lor mari, nu sunt foarte convenabile de stocat.
.JPEG (JPG)
Acesta este probabil cel mai comun format grafic. De obicei, este folosit pentru a publica fotografii și imagini cu text pe Internet. JPEG este un format TrueColor, ceea ce înseamnă că poate stoca imagini cu o adâncime de culoare de 24 de biți/pixel. Acest format poate afișa mai mult de 16 milioane de culori.
JPEG și-a câștigat popularitatea datorită capacităților sale flexibile de comprimare a datelor. Dacă este necesar, imaginea poate fi salvată la calitate înaltă. Când utilizați un algoritm de compresie cu pierderi, calitatea imaginii se pierde de fiecare dată când un fișier este salvat. Mai jos sunt imagini JPEG la calitate înaltă, medie și scăzută.
JPEG de înaltă calitate (100). Dimensiune 113 KB
JPEG cu calitate medie (50). Dimensiune 59 KB
JPEG de calitate scăzută (20). Dimensiune 27 KB
.GIF
Formatul GIF (Graphics Interchange Format) nu mulțumește cu adâncimea de culoare (8 biți). Poate stoca imagini comprimate fără pierderi în maximum 256 de culori. Una dintre caracteristicile GIF este suportul pentru animație.
.PNG
Acest format a fost dezvoltat ca înlocuitor pentru GIF. PNG înseamnă Portable Network Graphics. Spre deosebire de GIF, PNG are suport pentru gradații de transparență datorită unui canal alfa suplimentar. De obicei, transparența este indicată de un fundal de șah, așa cum se vede în imaginea de mai jos.
În exterior, fișierele în format PNG nu sunt practic diferite de imaginile JPG. PNG comprimă datele fără pierderi. Dacă transparența este importantă pentru dvs., este mai bine să alegeți acest format.
Când creați site-uri web în etapa de layout, există întotdeauna sarcina de a alege unul sau altul format pentru stocarea imaginilor. Imaginile pot fi salvate în orice PNG, JPEG, GIF și zeci de alte formate, dar ce format ar trebui să alegeți pentru a transmite cea mai bună calitate cu dimensiunea minimă a fișierului imagine rezultat?
Ce format de fișier ar trebui să aleg?
format GIF limitat la 256 de culori. Acesta este un format fără pierderi și, atunci când este utilizat, se obține o compresie minimă a imaginii. Formatul GIF acceptă animație (singurul dintre toate formatele) și transparență, dar imaginile translucide nu pot fi salvate în el. Datorită particularităților algoritmului, comprimă foarte bine imaginile, care au linii verticale (pentru web, de exemplu, acestea pot fi dungi verticale, pictograme cu o singură culoare, puncte grafice etc.). stocați desene, text și simboluri grafice într-un fișier de dimensiune mică.
format PNG este un format în care compresia are loc fără pierderi. În acest format, fiecare pixel are 3 canale de culoare (RGB - roșu, verde, albastru), realizând astfel formarea imaginii pline de culoare fără distorsiuni. Formatul PNG poate fi superior în calitate de culoare față de JPG, dar dimensiunea fișierului va fi și mai mare. Formatul PNG acceptă diferite niveluri de transparență (transluciditate). Datorită particularităților algoritmului, comprimă foarte bine imaginile care conțin linii orizontale. Și când sarcina este să alegeți să salvați un fișier în format GIF sau PNG, pentru cazurile în care imaginea constă din linii primitive, ar trebui să acordați atenție poziției acestor linii - adică. Ar trebui să salvați imaginile cu linii verticale în format GIF, în PNG – orizontală. PNG este o alegere bună pentru stocarea desenelor, textului și graficelor iconice într-o dimensiune mică a fișierului.
format JPG este un format care suferă de pierderea culorii. Algoritmul de lucru în acest format este de așa natură încât comprimă foarte bine imaginile cu degrade (se salvează culorile primului pixel din gradient și ultimul, iar la afișarea imaginii se calculează toate culorile intermediare dintre aceste puncte), ceea ce îl face util pentru stocarea imaginilor la o dimensiune mai mică decât în format BMP. Este mai bine să salvați fotografiile, debordările, siglele, fundalurile etc. în format JPG.
Astfel, atunci când dezvoltați site-uri web, puteți obține rezultate de viteză foarte bune alegând formatul potrivit de stocare a imaginilor.
22 noiembrie 2008 la 07:17Despre formatul PNG. Scurt test drive
- web design
Atenție, sunt multe poze! Toată lumea poate fi accesată.
PNG
Formatul grafic raster PNG, care câștigă o popularitate din ce în ce mai mare în epoca Web 2.0, a apărut în 1995 ca înlocuitor pentru vechiul GIF (și, parțial, TIFF). Până atunci, proprietarii GIF-ului patentat au decis să încarce sume de patru cifre de la toți dezvoltatorii care foloseau formatul, iar comunitatea liberă nu a avut de ales decât să ofere o alternativă gratuită.Deci, care sunt avantajele formatului?
- Suport complet pentru alfa-transparență. Vă permite să faceți zonele din imagine transparente și translucide.
- Algoritm de compresie de înaltă calitate, fără pierderi de calitate. Similar cu LZW, dar puțin mai eficient.
- Posibilitate de scanare intercalată și (spre deosebire de GIF) atât pe verticală, cât și pe orizontală în același timp.
- Corecție gamma încorporată. Vă permite să atașați setările de afișare la o imagine, astfel încât pe diferite monitoare imaginea să fie afișată exact la fel cu cea a autorului.
Deoarece PNG-24 folosește o paletă completă de culori, este dificil să o compari cu GIF. PNG-8 cu paleta sa de index este mai asemănător aici. Iată câteva capturi de ecran pentru comparație: 
Practica (precum și opinia colegilor) arată că GIF comprimă mai bine imaginile mici simple. Dar când vine vorba de imagini mari, GIF-ul este încă lăsat în urmă.
În plus, un alt avantaj destul de mare: de fapt, contrar credinței populare, PNG-8 poate folosi, de asemenea, un canal alfa complet, cum ar fi PNG-24. Photoshop pur și simplu nu îl acceptă, așa că Sergey Chikuenok de la studioul lui Lebedev recomandă utilizarea Adobe Fireworks, ceea ce am decis să fac (Puțin despre asta).
Și în această bătălie, dacă nu avem nevoie de transparență, PNG pierde, ca să spunem așa, în „segmentul pieței de mijloc”. Deși, dacă legați profilul ICC la JPEG, diferența de volum devine inobservabilă. Măsurătorile mele au fost făcute pe JPEG 100%. devine și mai trist.
În general, aruncați o privire pentru dvs.: 
UPDÎn general, rezultatele depind în mod semnificativ de imaginea în sine: PNG comprimă mai bine gradienții și zonele de culoare solidă, dar pentru fotografii JPEG oferă cea mai bună compresie. Deși, spun ei (e greu să cred), în fotografiile mari PNG este lider și aici - acest lucru tocmai a fost verificat în procesul de conversie a capturilor de ecran pentru articol (PNG versus JPEG-70% - un câștig de unu și un jumatate de ori).
Viață după Photoshop sau comprimați mai departe
În multe situații, PNG rămâne absolut de neînlocuit, deoarece transparența nu este în mod normal susținută de niciunul dintre formatele web alternative și ce sferă le oferă designerilor și designerilor de layout... UPDÎn plus, ținând cont de specificul formatului, aceasta este probabil cea mai bună soluție pentru elementele de design de pe web.Google și descărcați - . Programul, de aproximativ 1,5 MB cu un număr minim de setări, vă permite să rulați (inclusiv în lot) fișiere PNG cu compresie.
Pe un pachet de pictograme (90 de fișiere cu un fundal transparent fără clopote și fluiere speciale), câștigul în volum a fost în medie de aproximativ 10-15%. Nu deosebit de impresionant, desigur. Dar pentru fișierele exemplu discutate mai sus, procentul de compresie a variat de la 10% (poster mare fără transparență) la 72% (dreptunghiuri translucide). Deci, merită încercat, mai ales că lucrul cu utilitarul nu necesită mult timp. 
Pe lângă PNGOut, există multe alte programe pe care nu vreau să le examinez în detaliu acum:
- OptiPNG - nu are un shell grafic și funcționează din linia de comandă. Conform datelor neverificate, procentul de compresie este mai mic. UPD dar utilizatorii săi pretind contrariul.
- Pngcrush - Nu l-am încercat eu însumi, ei spun „încearcă să optimizeze fișierul în toate modurile disponibile”, dar principalul lucru nu este „cum încearcă”, ci „cum se optimizează”.
- și o serie de utilități care pur și simplu curăță gunoiul de serviciu din fișiere.
Adobe Fireworks
Sincer, Adobe Fireworks a fost o adevărată descoperire pentru mine: PNG-8, PNG-24 și PNG-32 + o mulțime de setări!
Nu m-am uitat la PNG-24 și PNG-32 în detaliu. Din câte am înțeles, în terminologia lor, 32 este cu un canal alfa, iar 24 este fără. Potrivit estimărilor preliminare, Photoshop face față mai bine acestei sarcini.
Dar PNG-8 a rupt toate stereotipurile mele (și ale celor mai mulți dintre colegii mei). Fișierul final este mult mai mic decât GIF și există suport complet pentru transparență în două moduri: transparența alpha și index Singurul dezavantaj în comparație cu PNG-24 este paleta de index, deși totul depinde de nevoile mele PNG-8 în majoritatea cazurilor face atât GIF, cât și PNG-24.
PNG vs GIF în AF, deși Fireworks nu funcționează foarte bine cu GIF-JPEG obișnuit în mod implicit (nu m-am jucat cu setările). Dar chiar și în comparație cu rezultatul Photoshop, diferența este în favoarea PNG:
Și iată toată varietatea PNG-8 - pentru aceasta merită să instalați Adobe Fireworks: 
Spre comparație: același fișier, datorită eforturilor Photoshop, cântărea 3.188 de octeți față de cei 450 obținuți acum, adică de 6 ori mai mult.
Verdict
În opinia mea, GIF și-a depășit deja utilitatea. Acum, existența sa este în primul rând o chestiune de inerție a societății. UPD Cu toate acestea, segmentul diverselor delicii animate este încă lăsat pe seama GIF :).Pentru elemente de design transparente, ar trebui să utilizați PNG-8 (mai rar PNG-24, când paleta PNG-8 nu este suficientă pentru a salva imaginea fără pierderi).
Pentru fotografii și elemente grafice complexe, JPEG rămâne lider datorită capabilităților sale puternice de optimizare a imaginii. Deși în unele cazuri PNG-8 poate fi suficient - ca și înainte, cu GIF, experimentele îndrăznețe sunt cheia succesului. UPD Dar pentru imagini cu adevărat mari, JPEG încă pierde.
UPD Chiar nu sunt un expert și recenzia a fost scrisă în genunchi, așa cum demonstrează epitetul „scurt”; poate nu cele mai bune exemple. Prin urmare, mulțumesc tuturor celor care au luat parte activ la discuție, în special
Acum formatul jpeg are o poziție de lider. Datorită capacității sale de a comprima fotografiile și imaginile color de mai multe ori, este înaintea formatelor gif și png în ceea ce privește greutatea minimă, iar bmp încă „pășește pe spate”.
În zilele noastre este probabil imposibil să găsești o pagină web pe Internet fără niște fotografii sau imagini pe ea. Astăzi, aceasta a devenit o normă atunci când amenajarea oricăror pagini web, deoarece imaginile însuflețesc, decorează, completează conținutul principal al site-urilor și sunt utilizate cu succes în toate zonele web. Apropo, primul browser care putea afișa grafică a fost Mosaic (mozaic), care a apărut aproape simultan cu apariția limbajului de marcare hipertext Html.
În zilele noastre, aproape toate browserele acceptă cele trei formate principale de grafică raster utilizate pentru web - Gif, Png și Jpg. Din punct de vedere istoric, gif-ul a fost primul care a apărut și cu ajutorul lui au putut fi adăugate și afișate imagini și informații media în primele browsere. Când l-au creat, dezvoltatorii s-au concentrat pe minimizarea dimensiunii imaginii salvate.
La urma urmei, la acea vreme viteza Internetului era atât de scăzută și, astfel încât încărcarea imaginilor să nu dureze „o eternitate”, a fost dezvoltat și aplicat un „format de schimb grafic” special (aceasta este ceea ce înseamnă abrevierea GIF).
Lucrul special despre Gif este că poate include o paletă de doar 256 de culori. Acestea. O imagine convertită în acest format nu va conține întotdeauna mai mult de 256 de nuanțe, toate celelalte culori fiind create dintr-un amestec. Dar tocmai din cauza acestei amestecări apar diverse artefacte neașteptate la conversia fotografiilor color în GIF. Din cauza acestui dezavantaj evident și semnificativ, jpeg și png sunt din ce în ce mai folosite pentru a afișa imagini și fotografii colorate pe paginile site-ului web.
Dar gif este încă popular în industria web dintr-un motiv simplu - acceptă animația, singura folosită pe web. Emoticoanele și avatarele animate, cărțile poștale și bannerele sunt rezultatul formatului GIF. Adevărat, tehnologiile flash nu sunt mai puțin populare acum, dar datorită simplității lor, gif-ul este preferatul webmasterilor, în special al începătorilor.
Esența acestei animații este că containerul GIF conține nu o singură imagine, ci mai multe simultan, iar timpul după care aceste imagini se vor înlocui reciproc este de asemenea scris acolo. În acest caz, este posibilă bucla animația și apoi după ultimul cadru va începe din nou afișarea primului. Astăzi, pe internet există multe editoare specializate în care poți crea singur animație Gif.
Gif poate suporta, de asemenea, un mod primitiv de a crea transparență pentru imaginile create. De ce primitiv? Da, pentru că GIF acceptă doar două valori de transparență - transparente sau opace, fără stări intermediare care pot fi obținute prin utilizarea canalelor alfa în formate Png.
Din acest motiv, apar dificultăți la afișarea nivelurilor de transparență care se schimbă fără probleme, așa că tot ceea ce este legat de fundaluri transparente de înaltă calitate pentru imagini este apanajul Png. Aproape toate imaginile cu fundal transparent pe care le găsim pe Internet au extensie png.
Există mai multe variante de png, fiecare dintre acestea fiind concepută pentru a-și îndeplini propriile sarcini:
Png 8 - aici, prin analogie cu Gif, la salvarea unei fotografii în PNG 8, vor fi folosite doar 256 de culori, prin urmare rezultatele compresiei imaginii în aceste două formate de grafică raster vor fi aproape identice. La fel ca în Gif, transparența este acceptată aici, dar cu un canal alfa.
Png 24 - aici, pentru fiecare pixel al fotografiei, sunt alocate trei canale de culoare a câte 8 biți fiecare (8*3=24), realizând astfel formarea imaginii pline de culoare fără distorsiuni. Calitatea afișajului color este superioară chiar și Jpg, dar va fi mai grea ca greutate.
Png 32 - aici trei canale de culoare sunt responsabile pentru formarea unei imagini pline de culoare, iar al patrulea este alocat separat pentru a forma un canal alfa, care vă permite să utilizați Png 32 pentru a obține imagini cu un fundal transparent. În Png 32 puteți alege orice modificare a gradului de transparență, datorită căreia astfel de imagini vor arăta la fel de bine pe toate paginile web cu orice fundal.
Acum să rezumam toate informațiile și să tragem câteva concluzii.