Formate de imagine SVG, PNG și JPG: argumente pro și contra. Imagine PNG - cum să deschideți, editați și convertiți un fișier Ce înseamnă formatul png
Anunţ
Format de fișier imagine raster PNG
Fișierele PNG (denumite în mod obișnuit „pings”) sunt fișiere într-un format care conține bitmaps. Formatul de imagine PNG a fost creat inițial ca o tranziție de la formatul GIF, deoarece ambele au capacitatea de a afișa fundaluri transparente. O altă similitudine între aceste formate este utilizarea culorilor indexate și compresia fără pierderi. Cu toate acestea, fișierele PNG au seturi diferite de restricții de drepturi de autor. În plus, spre deosebire de imaginile GIF, fișierele PNG nu acceptă animație. Pe site-ul Online-onvert.com poți ușor și complet gratuit.
Informații tehnice despre fișierele PNG
Imaginile PNG sunt cea mai bună soluție(comparativ cu fișierele GIF) datorită faptului că primele folosesc, printre altele, un canal de transparență de 8 biți și acceptă, de asemenea, culori RGB pe 24 de biți, imagini RGB și tonuri de gri. Fișierele PNG au fost dezvoltate pentru a facilita procesul de transfer al acestora pe Internet. Ca format de imagine neprofesional, PNG nu acceptă alte spații de culoare.
În plus, ca format gratuit, PNG oferă designerului web diverse avantaje practice față de GIF:
Compresie mai bună: pentru majoritatea imaginilor, PNG atinge o dimensiune mai mică a fișierului decât GIF
Profunzime mare de culoare: PNG oferă truecolor până la 48 de biți, când în GIF avem doar paletă de 256 de culori
Transparență canal alfa: în timp ce GIF oferă doar transparență binară, PNG permite efecte de transparență aproape nelimitate, oferind un canal alfa pentru transparență.
Este pertinent să rețineți că PNG nu permite animația, așa cum face GIF. Dar există un standard Multiple-Image Network Graphics (MNG) care permite acest lucru, dar nu este acceptat pe scară largă de browserele web și editorii de imagini.
Deci, de ce GIF este încă atât de popular?
Probabil vă întrebați de ce PNG-ul nu este la fel de utilizat pe web dacă este la fel de bun precum anunțul. Răspunsul este, în cea mai mare parte, o concepție greșită despre format și suportul pentru browser.
Din cauza Internet Explorer 6 sau mai multe 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 nu este adevărat) că Internet Explorer nu acceptă deloc PNG, sau cel puțin nu acceptă transparența. De fapt, Internet Explorer 5 și 6 acceptă suficient de specificații PNG pentru a o face echivalentă funcțional (sau mai mult) cu imaginile GIF neanimate. Toate celelalte browsere menționate, inclusiv Firefox, Netscape 6 și versiunile ulterioare, Mozilla, Opera 6 și versiunile ulterioare, Safari și Camino acceptă pe deplin transparența PNG.
În afară de această concepție greșită despre suportul pentru browser, sistemul încorporat 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 mai puțin populară în comparație cu alte tehnologii (ex. Flash), care devin din ce în ce mai potrivite pentru animație.
Transparența este o caracteristică cheie a GIF-urilor și PNG-urilor și este adesea motivul pentru care un designer web alege ce format să folosească. Deși PNG oferă un suport mai cuprinzător de transparență, designerii web trebuie adesea să creeze versiuni GIF ale imaginilor pentru a se potrivi cu browserele mai vechi. Utilizarea CSS este posibilă (și oarecum banală) prin trimiterea de imagini GIF pentru browsere mai vechi și PNG-uri de înaltă calitate către browserele care le înțeleg. Dar asta muncă dublă pentru un web designer și, prin urmare, oamenii caută cea mai mică rezistență ș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 înțelegerea greșită a conceptelor sau pe utilizarea unui flux de lucru familiar. Înarmat cu unele cunoștințe cheie despre PNG și despre modul în care acesta poate fi utilizat în mod fiabil în browsere, sunteți în măsură să profitați de toate beneficiile pe care le oferă.
Și ce zici de JPEG?
JPEG este un alt format web omniprezent și în majoritatea cazurilor, cum ar fi fotografiile (sau altele asemenea), este chiar mai bun decât PNG sau GIF. PNG nu este destinat să concureze cu JPEG. Compresia JPEG face fișierele mult mai mici decât PNG atunci când lucrează 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 „solide” etc.
Câteva exemple grozave de utilizare a PNG umil
Acum să vedem cum să folosiți PNG în design web. Am adunat toate fișierele pentru fiecare exemplu într-un folder separat disponibil pe prietenii lui ED.
Gradient
În ultimii ani, un gradient - o tranziție lină între două sau mai multe culori - a devenit cel mai bun prieten al unui designer web. Deosebit de populare sunt sofisticate, abia distinse umpleri cu gradient, care, fără în mod evident, creează o senzație de profunzime și textură. Uneori, un GIF este cea mai bună alegere pentru un gradient. Dacă gradientul este o tranziție simplă în două culori, GIF-ul funcționează perfect în el. Cu toate acestea, limitarea GIF-ului la doar 256 de culori creează adesea o „bandă” vizibilă și dezordonată printre tranzițiile de gradient mai complexe. JPEG, pe de altă parte, poate produce gradiente destul de îngrijite, dar adesea cu prețul unei dimensiuni mai mari a fișierului. Și în timp ce gradienții JPEG sunt în general suficient de buni, rețineți că JPEG utilizează compresie cu pierderi, ceea ce înseamnă că imaginea rezultată nu se va potrivi niciodată cu calitatea imaginii necomprimate.
Stilul tipic de gradient de fundal în cauză este folosit pentru butoane, casete sau oriunde altundeva. Ar putea arăta ca în Figura 5-1. În sensul acelor de ceasornic, din stânga sus, vedem imaginea originală (necomprimată), versiunea GIF, versiunea PNG și JPEG. Puteți vedea că PNG are cea mai mică dimensiune (515 octeți) în rezultat. 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 capacitatea ochiului uman de a determina 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 mărime fișier pentru aceeași imagine în formate diferite
O imagine care ar trebui să funcționeze pe orice fundal
Uneori este necesar să se creeze o imagine care funcționează la fel pe diferite substraturi. Câteva exemple comune sunt logo-urile și pictogramele. În astfel de situații, dominată în mod tradițional Fișiere GIF, dar există mai multe motive pentru care PNG ar putea fi mai mult cea mai buna alegere In aceasta situatie. PNG tinde să câștige în dimensiunea fișierului pentru logo-uri sau alte „arte” simple. În plus, transparența PNG inerentă face creație simplă fișiere individuale care funcționează pe orice fundal. PNG oferă transparență binară precum GIF, dar oferă și o opțiune mult mai dorită cu un 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 mult decât un GIF cu transparență binară, dar permite netezirea marginilor imaginii și face mai elegantă plasarea acesteia pe fundal.
Cu toate acestea, le-am reelaborat conceptul folosind o imagine albă cu simboluri stencil. Au folosit simbolul alb pe fundal transparent, care, de regulă, ar putea fi destul de eficient. În acest caz, antecedentele dvs culoare css ar apărea într-o zonă pătrată sau dreptunghiulară în jurul simbolului, în locul simbolului în sine.
Atât Dan, cât și PJ au folosit GIF transparent în loc de PNG. Acest lucru le-a acoperit complet nevoile și au trebuit să creeze imagini pixelate pentru stilul pictogramelor. Cu PNG, puteți obține o tehnică similară, dar cu avantajul suplimentar de anti-aliasing și transparență parțială pentru utilizare în pictograme mai detaliate.
Bine, dar în ce browsere funcționează?
Știu la ce te gândești: toată transparența aia PNG arată bine, dar este practică?
Vestea bună este că toată lumea browsere moderne sprijin pe deplin Imagini PNG, inclusiv transparența canalului alfa, ale căror avantaje le-am arătat în exemple. Safari (toate versiunile), Firefox (toate versiunile), Opera (versiunile 6 și versiunile ulterioare), Netscape (versiunile 6 și mai sus) și Mozilla (toate versiunile) vor face tot ce le cer să facă cu un bang. Dar vestea proastă este acel browser pe care nu l-am menționat încă și pe care majoritatea utilizatorilor tăi îl au: Internet Explorer.
Internet Explorer 6 și versiunile anterioare nu acceptă transparența canalului alfa încorporată în format PNG. Deoarece alegerea browserului (sau nu alegerea) a fost făcută pentru majoritatea utilizatorilor web, 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 va opri. Internet Explorer 6 și versiunile anterioare necesită o atenție mai mult decât suficientă, dar cu siguranță este posibil.
Hack pentru Internet Explorer: AlphaImageLoader
Internet Explorer vine cu diverse 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), Microsoft are un filtru care remediază acest neajuns: AlphaImageLoader.
Potrivit unei secțiuni de pe site-ul oficial al 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).
În general, puteți aplica pur și simplu AlphaImageLoader în CSS pe elemente 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 (astfel „umbrind” versiunea dumneavoastră transparentă).
Nu puteți utiliza PNG transparent ca imagine de fundal CSS pentru un element (X)HTML (să zicem pentru
) ș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. Prin urmare, deși îți va încărca imaginea în toată gloria ei transparentă, va continua să o încarce și ca 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 topul referitor la vreme pare că ați ghicit deja:
În prezent, în Topeka, KS: 82° Obțineți prognoza și multe altele...
Vedeți o imagine și cu siguranță este 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 codul numai pentru un cunoscut versiuni de internet explorator. Codul este ignorat de toate celelalte browsere, așa că nu le afectează în niciun fel. În element
site-ul web 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 Internet Explorer mai mică sau egală cu (specificată cu lte) 6. Toate celelalte browsere, inclusiv Internetul nou sosit Explorer 7, va ignora complet acest lucru.
Deci, ce este în fișierul JavaScript fixWeatherPng.js? Hai 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 pentru 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.
Pentru a începe, mai întâi căutăm imaginea cu care vom lucra după atributul id și o stocăm în variabila img. Stocăm atributul src (URL-ul către fișierul imagine) în variabila src. Apoi ascundem elementul img setând proprietatea CSS vizibilitate la ascuns.
Sfarsim prin a inlocui elementul img original (care este ascuns) cu un element div nou creat care are AlphaImageLoader atasat cu succes la el.
Folosirea scripturilor DOM pentru a vă injecta AlphaImageLoader - biți de filtrare din mers - are partea ei proastă, dar necesară - CSS rău. Mai mult, elementele div non-semantice vor fi conținute în afara marcajului (X)HTML. Și atâta timp cât totul este descris în comentarii condiționate, nu există nicio șansă ca alte browsere să fie corupte de codul Microsoft. (handyblogger: Aici Jeff încearcă să sublinieze subtil o soluție „neîndemânatică” de la Microsoft)
Dacă trebuie să faci ceva greșit, măcar îl poți extrage și ține separat de tot ce nu are nevoie.
In custodie
PNG, ca format grafic, oferă multe avantaje tehnice dincolo de cele utilizate pe scară largă în GIF-uri. De fapt, beneficiile sunt atât de mari încât PNG ar fi putut demult să fi preluat ca format grafic fără legătură cu imaginile foto. Lipsa de suport de către Internet Explorer pentru unele dintre caracteristicile PNG mai importante, cum ar fi transparența canalului alfa, a oprit mulți dezvoltatori web ca urmare. 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 anterioare acceptă aproape complet PNG în ceea ce privește ceea ce poate face GIF (cu excepția animației, desigur). PNG aproape întotdeauna arată o dimensiune mai mică a fișierului, permițându-le să se încarce mai rapid și să consume mai puține resurse.
În al doilea rând, Internet Explorer 7 oferă suport complet pentru transparența PNG alfa. Efectele care pot fi obținute cu întreaga gamă de opțiuni translucide sunt aproape nelimitate. Mă aștept ca designerii care găsesc modalități interesante de a folosi transparența PNG, pe linia celor descrise în acest articol, să deschidă ușa către un nou nivel de stiluri nemaivăzut 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 pe tine!
Un 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; postat de prietenii lui ED. Copyright Jeff Croft 2007. Folosit cu permisiunea Apress, Inc.
Fișierul PNG (din engleză Portable Network Graphic) se referă la imagini bitmap. Formatul PNG conține o paletă specifică de culori utilizate într-un desen. Un format grafic similar este destul de des folosit pe World Wide Web atunci când se dotează paginile web cu diferite imagini. Prin utilizarea algoritmului de compresie Deflate, hărți de biți care au extensia Fișier PNG, sunt disponibile pentru compresie fără pierderi evidente de calitate.
Dezvoltat formatul dat fișier pentru a înlocui formatul GIF, deoarece acesta din urmă necesita un fișier plătit software. Printre proprietarii de resurse web, imaginile PNG sunt renumite pentru performanța lor excelentă în comparație cu formatele similare. PNG acceptă adâncimea de culoare de până la 48 de biți. Principala diferență dintre GIF este că așa fisier grafic limitat la doar 8 biți (256 de culori în total). Trebuie să știți că, spre deosebire de GIF, PNG nu acceptă efecte de animație.
Puteți deschide un fișier PNG cu aproape orice vizualizator. În sala de operație sistem Windows, PNG poate fi deschis printr-un simplu dublu clic pentru a vizualiza imaginile. Acest format de imagine rulează și în orice browser web. Dacă utilizatorul trebuie să schimbe imaginea salvată într-o versiune PNG, este suficient să folosească utilități de editare a imaginilor precum Adobe Photoshop sau Microsoft Windows Photos, precum și Corel PaintShop sau ACD Systems.
Această extensie de fișier este foarte populară și conține toate informațiile grafice necesare pentru imagini color de bună calitate.
PNG (Portable Network Graphics) este un format grafic de tip raster care conține o paletă de culori de 8 biți. Algoritmul de compresie Deflate dezvoltat pentru fișierele PNG reduce dimensiunea imaginii salvate fără a pierde calitatea imaginii finale.
În acest articol, veți învăța și cum să deschideți un fișier PNG.
Caracteristică
PNG este al doilea cel mai popular format de internet după JPG.
Printre alte avantaje, merită remarcat:
aspect întrețesut;
corecție software încorporată a paletei de culori și gama.
Acesta din urmă vă permite să coaseți toți parametrii necesari de afișare în imagine, astfel încât să arate pe toate ecranele așa cum a intenționat autorul.
Formatul are 2 versiuni:
PNG-8 (gamă de culori index similară cu GIF);
PNG-24 (paletă plină și plină de culori care imită JPEG).
Istoricul apariției
În 1995, în epoca dezvoltării internetului gratuit, a apărut brusc problema naturii proprietare a formatului GIF complex. Pentru schimbul de date grafice era necesar un format la fel de fiabil, dar gratuit și gratuit world wide web. În acest moment, specificațiile PNG 1.0, aprobate deja în 1996, au fost prezentate la consorțiul internațional W3C.
Formatul a fost creat ca o alternativă la GIF. Acesta din urmă până în 2004 a fost „închis”, adică avea o serie de restricții de utilizare gratuită (necesitau dreptul de autor al proprietarului la salvare, licențe de brevet la postare). PNG a fost lipsit de astfel de neajunsuri, implementând în același timp suport pentru adâncimi de culoare de până la 48 de biți și un canal alfa de 8 biți pentru transmiterea imaginilor.
Dezvoltatorii au reușit să creeze o transparență lină a culorilor, ceea ce este imposibil în GIF. În cea din urmă, paleta este limitată la un canal de 8 biți (256 de culori) și acceptă doar transparență totală.
Cum se deschide fișierele PNG
Astăzi, formatul grafic este afișat fără probleme în browserul de internet și mijloace standard pentru a vizualiza grafica. Vorbind mai în detaliu, imaginea este următoarea: fiecare sistem de operare are propriul set de instrumente pentru lucrul cu formatul. Să aruncăm o privire mai atentă la modul de deschidere a formatului PNG.
Pe net
Pentru a vizualiza fișiere pe Internet, utilizați următorul software:
Windows 7-10
Sistemele de operare ale familiei Windows deschid formatul PNG în următorul mod:
vizualizator de fotografii;
MS Paint;
browser web (numai vizualizare).
Android
Sistemul de operare mobil are următoarele instrumente:
iOS
Pisica mobilă pentru Apple funcționează cu fișiere PNG folosind un astfel de software.
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 de imagine care nu necesită o licență de utilizare. PNG este standard international(ISO IEC 15948:2003) și recomandat oficial de W3C.
Formatul PNG stochează informații grafice într-o formă comprimată. Mai mult, această compresie se realizează fără „pierderi”, spre deosebire, de exemplu, de JPEG standard (chiar și cu cel mai înalt nivel de calitate).
Formatul PNG este conceput pentru a înlocui formatul GIF învechit și mai simplu, precum și, într-o oarecare măsură, pentru a înlocui formatul TIFF mult mai complex.
Dacă vorbim de web design, atunci, în comparație cu GIF, acesta are următoarele avantaje principale:
Compresie îmbunătățită: în cele mai multe cazuri, dimensiunea unei imagini PNG este mai mică decât cea a unui GIF. - Mai multe culori per imagine: număr practic nelimitat de culori per imagine, în timp ce limita GIF este de 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, precum GIF. Deși, desigur, există un standard similar pentru animație numit Multiple-image Network Graphics (MNG), acesta nu este utilizat pe scară largă și, prin urmare, nu este acceptat de browserele extrem de moderne.
