Ce este PNG? Formate de imagine SVG, PNG și JPG: argumente pro și contra Programe pentru lucrul cu png pe Mac, Linux și dispozitive mobile

Formatul de imagine PNG este unul dintre cele mai populare și oferă utilizatorilor să stocheze imagini comprimate fără a-și pierde calitatea. Mai ales, PNG este folosit pentru editarea graficelor sau pe Internet. În continuare, vom analiza câteva moduri simple în care puteți deschide un fișier. a acestui format pe computerul dvs.

Sunt mai multe diverse metode, permițându-vă să deschideți fișiere PNG pentru vizualizare și editare. Trebuie doar să urmați instrucțiunile furnizate mai jos și deschiderea imaginii nu va fi dificilă.

Metoda 1: Vizualizatori de imagini

Pe Internet există multe editoare grafice și software special pentru vizualizarea și editarea imaginilor. Acestea oferă utilizatorilor un număr mare de funcții și instrumente, ceea ce face ca procesul de lucru cu imagini să fie cât mai confortabil posibil. Să ne uităm la procesul de deschidere a unei imagini PNG folosind programul GIMP ca exemplu:

Dacă din anumite motive GIMP nu vă convine, vă sugerăm să vă familiarizați cu lista completa programe pentru vizualizarea imaginilor în articolul nostru de la linkul de mai jos. Cu siguranță vei găsi acolo ceva potrivit.

În cazurile în care trebuie să efectuați diverse manipulări cu o imagine deschisă, utilizați editori grafici speciali cu funcționalități avansate și un număr mare de instrumente diferite. Puteți afla mai multe despre ele în articolul nostru la linkul de mai jos.

Metoda 2: Instrument standard Windows

În toate versiunile de operare sisteme Windows Există un program încorporat pentru vizualizarea imaginilor. Poate fi folosit și pentru a deschide fișiere PNG. Să aruncăm o privire mai atentă la acest proces:

Dacă aveți nevoie de deschiderea tuturor imaginilor PNG printr-un vizualizator standard fotografii Windows, urmați acești pași:

Acum, în mod implicit, toate fișierele PNG vor fi deschise cu mijloace standard vizualizarea fotografiilor. Pentru a schimba programul pentru a deschide, pur și simplu urmați aceiași pași, selectând un alt software.

În acest articol ne-am uitat în detaliu moduri simple deschiderea imaginilor în format PNG. După cum puteți vedea, în acest proces nu este nimic complicat și totul se face în doar câțiva pași.

Grafica computerizată a umplut acum tot ce ne înconjoară, chiar ne uităm la fotografii mai des pe un monitor, telefon sau ecran TV decât pe hârtie. Dar ceea ce este cel mai interesant este că modurile în care sunt stocate aceste imagini sunt foarte diferite. Există zeci de formate de stocare a imaginilor, fiecare cu propriile sale avantaje și dezavantaje, dar cele mai eficiente și populare dintre ele rămân cele care oferă cea mai buna calitateȘi în plus, dosarul se dovedește a fi mic. Un astfel de format este formatul PNG. Ce este acest format și de unde a apărut?

Pe scurt despre motivul apariției acestui format de stocare a imaginilor...

La 4 ianuarie 1995, a fost exprimată ideea creării unui format gratuit care să înlocuiască GIF-ul plătit și deja în decembrie același an nou format PNG era deja gata și propus spre examinare. Formatul GIF la acea vreme făcea posibilă obținerea de fișiere foarte mici, care erau convenabile de utilizat pe site-uri web. Dar GIF-ul fost gratuit a devenit brusc plătit - proprietarul brevetului pentru acesta, Unisys Corporation, intenționa să perceapă bani pentru fiecare imagine care folosește acest format. Acesta a fost motivul dezvoltării unui format gratuit numit PNG, abreviere pentru expresia engleză „grafică de rețea portabilă”. După cum sugerează și numele, este destinat utilizării în rețea, datorită dimensiunii reduse a fișierelor, ceea ce permite paginilor cu grafică să se încarce mai rapid.

Care sunt avantajele și dezavantajele formatului PNG în comparație cu altele, în special principalul său concurent, formatul GIF? Sunt multe diferențe, dar primul lucru este mai întâi...

Formatul PNG folosește un algoritm de compresie numit Deflate, care în sine este open source, ceea ce înseamnă că este complet gratuit. Acest algoritm funcționează pe principiul unui arhivator convențional, comprimând eficient informațiile despre gama de culori a fiecărui pixel, iar acest algoritm vă permite să obțineți un fișier destul de mic. În plus, în acest format puteți salva imagini full-color, adică cele care folosesc până la 48 de biți per pixel - și aceasta este o gamă de culori foarte mare, chiar mai mult decât poate percepe ochiul uman. Formatul GIF vă permite să utilizați doar 256 de culori și nuanțe - suficient pentru cele mai simple imagini, dar foarte puțin pentru calitatea fotografiei.

Formatele PNG, GIF și TIFF folosesc așa-numitul canal alfa. Aceasta înseamnă că puteți face unele părți ale imaginii transparente. În același timp, în formatul GIF acest lucru se face foarte simplu - doar una dintre culorile din care să alegeți este alocată transparentă, iar atunci când vizualizați imaginea, pur și simplu nu este vizibilă - așa puteți face un fundal transparent. format TIFF mai gândit în acest sens, dar este foarte rar folosit – de asemenea dimensiune mare se obtin fisiere. Dar în format PNG, canalul alfa este realizat cu înțelepciune - nu numai că există transparență, dar are și 256 de gradări de luminozitate. Adică, puteți face cu ușurință tranziția de la un fundal complet transparent la o imagine plină color și, în același timp, să obțineți efecte frumoase. Arată deosebit de frumos pe site-uri web. Dacă nu este necesară transparența, pur și simplu nu o puteți folosi atunci când salvați imaginea și obțineți un fișier și mai mic.

Din păcate, formatul PNG are un dezavantaj, nu foarte semnificativ - nu permite salvarea unei secvențe de imagini, așa-numita animație. GIF vă permite să faceți acest lucru. Acest lucru s-a întâmplat deoarece la momentul creării noului format, animația nu era practic folosită nicăieri, iar în 1995 nu era nevoie în mod special de site-uri web colorate, așa că animația a fost exclusă din proiect ca fiind inutilă. Astăzi, nișa animației a fost ocupată de tehnologia Flash, care nu este obișnuită format grafic nu un concurent.

Dacă formatul PNG este atât de bun, atunci de ce nu a devenit super popular? Răspunsul este simplu - a fost slab susținut de dezvoltatorii altor programe. În special influențat de faptul că majoritatea utilizatorilor de Internet au folosit un browser Internet Explorer, dar nu a „înțeles” imaginile în format PNG, deși dezvoltatorii altor browsere au integrat imediat un astfel de suport în ele. Situația s-a îmbunătățit doar când a apărut Internet Explorer 7, dar timpul pentru „promovare” a trecut de mult.

Astăzi, formatul PNG este unul dintre cele mai populare și recomandate trei formate din tehnologiile web, alături de formatele GIF și JPG. Și, dacă nu considerați lipsa animației ca pe un dezavantaj, atunci câștigă din toate punctele de vedere în comparație cu altele. O imagine de înaltă calitate, fără pierderi de calitate, un fișier mic, tranziții ușoare la un fundal transparent și fără a încălca drepturile de autor ale nimănui - de ce altceva are nevoie un dezvoltator de site-uri web pentru a fi fericit?

PNG (Portable Network Graphics), pronunțat „ping”, este un format de stocare grafică raster care utilizează compresie fără pierderi. PNG a fost creat atât pentru a îmbunătăți cât și pentru a înlocui formatul GIF cu un format grafic care nu necesită o licență pentru utilizare. PNG este un standard internațional (ISO IEC 15948:2003) și este recomandat oficial de W3C.

Magazine în format PNG informatii graficeîntr-o formă comprimată. Mai mult, această compresie se realizează fără „pierderi”, spre deosebire, de exemplu, de JPEG standard (chiar și cu nivel înalt calitate).

Formatul PNG este conceput pentru a înlocui formatul GIF mai vechi și mai simplu și, într-o oarecare măsură, pentru a înlocui formatul TIFF mult mai complex.

Dacă vorbim despre web design, atunci în comparație cu GIF are următoarele avantaje principale:

Compresie îmbunătățită: În majoritatea cazurilor, dimensiunea imagini PNG mai puțin decât același în format GIF.
- Mai multe culori în imagine: număr aproape nelimitat de culori în imagine, în timp ce limita pentru GIF este 256.
- Suport opțional pentru canal alfa: în timp ce GIF acceptă doar transparență binară, PGN vă permite să obțineți un număr nelimitat de efecte de transparență prin suportul pentru canal alfa.

Ca un dezavantaj, este de remarcat, desigur, lipsa suportului pentru animație, cum ar fi GIF. Deși, desigur, există un standard similar pentru animație numit Multiple-image Network Graphics (MNG), acesta nu este larg răspândit și, în consecință, nu este acceptat pe scară largă de browserele moderne.

Mai mult, fiind un format gratuit, PNG oferă diverse avantaje practice față de GIF pentru web designer:

• Compresie mai bună: pentru majoritatea imaginilor, PNG atinge o dimensiune mai mică a fișierului decât GIF
• Profunzime de culoare mai mare: PNG oferă truecolor până la 48 de biți, în timp ce în GIF avem doar o paletă de 256 de culori
• Transparență canal alfa: unde GIF oferă doar transparență binară, PNG permite efecte de transparență practic nelimitate, oferind un canal alfa pentru transparență

Merită remarcat faptul că PNG nu permite animația așa cum o face GIF. Dar există un standard Multiple-Image Network Graphics (MNG) care permite acest lucru, dar nu este atât de acceptat de browserele web și editorii de grafică.

Deci, de ce GIF este încă atât de popular?

Probabil vă întrebați de ce PNG nu este un format atât de utilizat pe web, dacă este la fel de bun ca și reclama. Răspunsul este, în mare parte, o concepție greșită despre formatul și suportul browserului pentru acesta.

Datorită faptului că Internet Explorer 6 sau mai mult versiuni timpurii nu acceptă întreaga gamă de caracteristici PNG (inclusiv transparența canalului alfa), oamenii sunt lăsați să creadă (deși acest lucru este incorect) că Internet Explorer nu acceptă deloc PNG sau cel puțin nu acceptă transparența. De fapt, Internet Explorer 5 și 6 acceptă suficiente specificații PNG pentru a-l face echivalent funcțional (sau mai bun) cu imaginile GIF neanimate. Toate celelalte browsere menționate, inclusiv Firefox, Netscape 6 și versiuni ulterioare, Mozilla, Opera 6 și versiuni ulterioare, Safari și Camino acceptă pe deplin transparența PNG.

În afară de această concepție greșită despre suportul pentru browser integrat în Animație GIF a fost (și continuă să fie) principalul motiv al succesului său. Deși, de-a lungul anilor, utilizarea GIF-ului a devenit din ce în ce mai puțin populară în comparație cu alte tehnologii (de exemplu Flash), care devin din ce în ce mai potrivite pentru animație.

Transparența este o caracteristică cheie a GIF și PNG și este adesea motivul pentru care un web designer alege formatul de utilizat. Deși PNG oferă un suport mai cuprinzător pentru transparență, designerii web trebuie adesea să creeze o versiune GIF a imaginilor pentru a se potrivi cu browserele mai vechi. Folosind CSS acest lucru este posibil (și oarecum trivial) prin trimiterea de imagini GIF pentru browsere mai vechi și imagini PNG de înaltă calitate către browserele care le înțeleg. Dar aceasta este o muncă dublă pentru un web designer și, ca rezultat, oamenii urmează calea celei mai puține rezistențe și continuă să folosească imagini GIF.

Așadar, am analizat câteva motive pentru care GIF este încă atât de popular, dar cele mai multe dintre ele se bazează pe o înțelegere greșită a conceptelor sau pe utilizarea unui flux de lucru familiar. Înarmat cu unele cunoștințe cheie despre PNG și cum poate fi utilizat în mod fiabil în browsere, puteți profita de toate beneficiile pe care le are de oferit.

Ce zici de JPEG?

JPEG este un alt format web omniprezent și în majoritatea cazurilor, cum ar fi fotografiile (și altele asemenea), este chiar mai bun decât PNG sau GIF. PNG nu este destinat să concureze cu JPEG. Compresia JPEG produce fișiere mult mai mici decât PNG atunci când lucrați cu fotografii. Pe de altă parte, PNG produce fișiere mai mici atunci când în interiorul imaginilor există text, linii artistice, logo-uri, culori „plate” etc.

Câteva exemple grozave de utilizare a umilului PNG

Acum să vedem cum să folosiți PNG în design web. Am compilat toate fișierele pentru fiecare exemplu în folder separat, disponibil pe prietenii ED.

Gradient

În ultimii câțiva ani, gradienții – o tranziție lină între două sau mai multe culori – au devenit cel mai bun prieten al designerilor web. Deosebit de populare sunt umpluturile subtile, subtile cu gradient care, fără a fi vizibile, creează un sentiment de profunzime și textură.
Uneori GIF este cea mai bună alegere pentru un gradient. Dacă gradientul este o tranziție simplă în două culori, GIF funcționează perfect în el. Cu toate acestea, limitarea GIF-ului la doar 256 de culori creează adesea „bande” vizibile și neglijente printre tranzițiile de gradient mai complexe. JPEG, pe de altă parte, poate scoate niște gradiente destul de îngrijite, dar adesea cu prețul unei dimensiuni mai mari a fișierului. În timp ce gradienții JPEG sunt în general destul de buni, trebuie să rețineți că JPEG utilizează compresie cu pierderi, ceea ce înseamnă că imaginea rezultată nu va fi niciodată la nivelul calității imaginii necomprimate.

Stilul tipic de gradient de fundal în cauză este folosit pentru butoane, blocuri sau oriunde altundeva. Ar putea arăta ca în Figura 5-1. În sensul acelor de ceasornic din colțul din stânga sus, vedem imaginea originală (necomprimată), versiunea GIF, versiunea PNG și JPEG. Puteți vedea că PNG-ul rezultat are cea mai mică dimensiune (515 octeți). Aceasta este de patru ori mai puțin decât Imagine GIF. JPEG este puțin mai mare decât PNG la 637 de octeți și are, de asemenea, o calitate mai scăzută din cauza compresiei cu pierderi (deși ochiul uman nu poate detecta diferența de calitate în acest caz). exemplu simplu rămâne în discuție).

Figura 5-1
Panoul Photoshop - Salvare pentru web,
arătând diferențe dimensiunea fișierului pentru aceeași imagine în formate diferite

O imagine care ar trebui să funcționeze pe orice fundal

Uneori trebuie să creați o imagine care funcționează la fel pe diferite substraturi. Unele exemple generale- acesta este un logo și pictograme. În astfel de situații, dominată în mod tradițional Fișiere GIF, dar există mai multe motive pentru care PNG poate fi mai mult cea mai buna alegere in aceasta situatie. PNG, de obicei, câștigă în dimensiunea fișierului pentru logo-uri sau alte „artă” simple. În plus, transparența inerentă PNG face creație simplă fișiere individuale care funcționează peste orice fundal. PNG oferă transparență binară ca GIF, dar oferă și opțiunea mult mai dorită a unui canal alfa, în care pixelii pot fi parțial transparenți în loc să fie doar porniți sau dezactivați. Utilizarea acestuia din urmă mărește dimensiunea fișierului, uneori chiar mai mare decât un GIF cu transparență binară, dar permite anti-aliasing pe marginile imaginii și face mai elegantă plasarea acestuia deasupra fundalului.

Cu toate acestea, le-am reelaborat conceptul folosind o imagine albă cu simboluri stencil. Au folosit simbolul alb pe fundal transparent, care în general ar putea fi destul de eficient. În acest caz, dvs culoarea de fundal CSS ar apărea într-o zonă pătrată sau dreptunghiulară în jurul simbolului, în locul simbolului în sine.

Au folosit atât Dan, cât și PJ GIF transparentîn loc de PNG. Acest lucru le-a acoperit complet nevoile și a trebuit să creeze imagini pixeli pentru a se potrivi cu stilul pictogramelor. Folosind PNG, puteți obține o tehnică similară, dar cu unele avantaje sub formă de anti-aliasing și transparență parțială pentru utilizare în pictograme mai detaliate.

Bine, dar în ce browsere funcționează asta?

Știu la ce te gândești: toată această transparență PNG arată bine, dar este practică?

Vestea bună este că toate browserele moderne acceptă pe deplin imagini PNG, inclusiv transparența canalului alfa, ale căror beneficii le-am arătat în exemple. Safari (toate versiunile), Firefox (toate versiunile), Opera (versiunile 6 și mai sus), Netscape (versiunile 6 și mai sus) și Mozilla (toate versiunile) vor face tot ce le cer să facă. Dar există o veste proastă - singurul browser pe care nu l-am menționat încă și pe care îl au majoritatea utilizatorilor tăi: Internet Explorer.

Internet Explorer 6 și versiunile anterioare nu acceptă transparența canalului alfa încorporată în formatul PNG. De când alegerea browserului (sau non-alegerea) a fost făcută pentru cei mai mulți dintre mulți navigatori, această gaură deschisă i-a ținut pe designeri web departe de PNG. Dar, odată cu lansarea Internet Explorer 7, am primit suport complet pentru transparența alfa PNG în toate browserele majore. Ce urmează, există modalități de a lucra cu transparența alfa PNG în Internet Explorer 6 și versiunile anterioare? Deci, dacă vrei să folosești acest efect, nimic nu te poate opri. Internet Explorer 6 și versiunile sale anterioare necesită mai multă atenție decât este necesar, dar cu siguranță este posibil.

Hack pentru Internet Explorer: AlphaImageLoader

Internet Explorer vine cu diferite filtre native. Sunt folosite în CSS, dar nu fac parte din specificația CSS oficială. Cu alte cuvinte, nu sunt standardizate pe web. Din păcate, Internet Explorer 6 și mai jos nu acceptă pe deplin formatul PNG (care este recomandat de W3C), dar Microsoft are un filtru care elimină acest neajuns: AlphaImageLoader.

Potrivit unei secțiuni de pe site-ul oficial Microsoft, AlphaImageLoader „afișează o imagine în limitele unui obiect și între fundalul obiectului și conținutul acestuia”. Cu alte cuvinte, AlphaImageLoader încarcă o imagine PNG cu transparența sa deplină, dar o încarcă ca strat propriu, sub care se află conținutul obiectului pe care este aplicată. Imaginile PNG încărcate în acest fel acționează mai mult ca imaginile de fundal decât imaginile din prim-plan (deși ele de fapt „stau” deasupra fundalului obiectului).

Practic, puteți aplica pur și simplu AlphaImageLoader în CSS pe elementele img și vă bucurați de rezultat. Imaginea va fi încărcată mai întâi, transparența va rămâne, dar apoi imaginea va fi încărcată din nou - ca conținut frontal al obiectului - cu zone opace („umbrindu-vă astfel” versiunea transparentă).

Nu puteți folosi PNG transparent ca imagine de fundal CSS pentru un element (X)HTML (să zicem) și așteptați ca AlphaImageLoader să facă treaba corect în Internet Explorer. Amintiți-vă că AlphaImageLoader inserează imaginea dvs. între fundalul și prim-planul obiectului. Deci, în timp ce vă va încărca imaginea în toată gloria ei transparentă, va continua să o încarce și ca imagine de fundal imagine CSSși fără pixelii tăi translucizi minunați.

Utilizarea reală a AlphaImageLoader

Să ne întoarcem la unul dintre exemplele anterioare și să încercăm să-l încărcăm corect în Internet Explorer. Îți amintești de Canalul 49, postul TV din Topeka? Sunt sigur că da. Figura 5-21 arată cum arată site-ul în Internet Explorer 6.

Figura 5-21
Titlul 49abcnews.com, redat în Internet Explorer 6 pentru Windows, cu transparența PNG intactă.

HTML-ul pentru partea de sus a vremii pare că ați ghicit deja:

În prezent, în Topeka, KS:
82° Înnorat
Obțineți prognoza și multe altele...

Vedeți o imagine și este cu siguranță un PNG, chiar și Internet Explorer o încarcă impecabil. Ingredientul secret al acestui lucru este JavaScript. De fapt, am folosit un pic de scripting DOM pentru a elimina elementul img din mers și a-l înlocui cu un element div care - ați ghicit - folosește AlphaImageLoader. JavaScript este descris în comentariile condiționate, un alt idiom la îndemână, dar complet nestandardizat de la Microsoft, încorporat în Internet Explorer. Comentariile condiționate vă permit să utilizați cod numai pentru cunoscute anterior versiuni de internet Explorator. Codul este ignorat de toate celelalte browsere, deci nu le afectează în niciun fel. În elementul site-ului www.49abcnews.com, veți găsi:

Datorită primei linii, dacă lte IE6, acest script va fi inclus în documentul randat numai dacă este afișat într-o versiune de Internet Explorer mai mică sau egală cu (aceasta este indicată de lte) 6. Toate celelalte browsere, inclusiv Internet Explorer 7 nou sosit, va ignora complet acest lucru.

Deci, ce este în fișierul JavaScript fixWeatherPng.js? Să aruncăm o privire:

Window.attachEvent(„încărcare”, fixWeatherPng); funcția fixWeatherPng() ( var img = document.getElementById ("weatherImage"); var src = img.src; img.style.visibility = "ascuns"; var div = document.createElement ("DIV"); div.style. filtru = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale""); Unele stiluri CSS specifice 49abcnews.com au fost omise din motive de concizie. img.replaceNode(div); )

Să analizăm, pas cu pas, ce face scenariul. În primul rând, îi spunem browserului că vrem să executăm funcția fixWeatherPng atunci când pagina se încarcă. Restul scriptului este funcția în sine.

Să începem, mai întâi căutăm imaginea cu care vom lucra după atributul ei id și o salvăm în variabila img. Salvăm atributul src (URL-ul fișierului imagine) în variabila src. Apoi ascundem elementul img prin expunere proprietate CSS vizibilitate la ascuns.

Ca urmare, înlocuim elementul img original (care este ascuns) cu un element div nou creat, la care AlphaImageLoader este atașat cu succes.

Folosirea scripturilor DOM pentru a introduce AlphaImageLoader - filtrarea biților din mers - are un dezavantaj urât, dar necesar - CSS incorect. Mai mult, în afara markupului tău (X)HTML vor exista elemente div non-semantice. Și atâta timp cât toate acestea sunt descrise în comentariile condiționate, nu există nicio șansă ca alte browsere să fie corupte de codul Microsoft. (handyblogger: Aici Jeff încearcă să sublinieze subtil soluția „stângăcioasă” a Microsoft)

Dacă trebuie să faci ceva greșit, măcar poți să-l extragi și să-l ții separat de orice altceva unde nu este necesar.

În concluzie

PNG, ca format grafic, oferă multe avantaje tehnice dincolo de cele utilizate în mod obișnuit în GIF-uri. De fapt, avantajele sunt atât de mari încât PNG ar fi putut demult să-și asume o poziție dominantă ca format de grafică non-fotografică. Lipsa de suport din Internet Explorer pentru unele dintre caracteristicile mai semnificative ale PNG, cum ar fi transparența canalului alfa, a descurajat mulți dezvoltatori web. Dar există două motive foarte bune pentru care nu ar trebui să vă fie frică de PNG.

În primul rând: chiar și Internet Explorer 6 și versiunile sale anterioare suportă aproape complet PNG într-un mod în care GIF-ul poate (cu excepția animației, desigur). PNG aproape întotdeauna produce fișiere mai mici, permițându-le să se încarce mai rapid și să utilizeze mai puține resurse.

În al doilea rând: Internet Explorer 7 oferă suport complet pentru transparența alfa PNG. Efectele care pot fi obținute cu întreaga gamă de opțiuni translucide sunt practic nelimitate. Mă aștept ca ușile să fie deschise pentru designeri care găsesc modalități interesante de a folosi transparența PNG pe linia celor descrise în acest articol. nou nivel stiluri nemaivăzute până acum. V-am oferit câteva idei utile despre ceea ce puteți crea cu transparența PNG, dar nu vă opriți aici. Caută-te singur!

Extras din Web Standards Creativity de Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin și Rob Weychert; publicat de prietenii ED. Copyright Jeff Croft 2007. Folosit cu permisiunea Apress, Inc.