Formati slika SVG, PNG i JPG: prednosti i mane. PNG slika - kako otvoriti, urediti i pretvoriti datoteku PNG datoteke

Štoviše, budući da je besplatan format, PNG nudi razne praktične prednosti u odnosu na GIF za web dizajnera:

• Bolja kompresija: za većinu slika PNG postiže manju veličinu datoteke od GIF-a
• Veća dubina boja: PNG nudi truecolor do 48 bita, dok u GIF-u imamo samo paletu od 256 boja
• Prozirnost alfa kanala: gdje GIF nudi samo binarnu prozirnost, PNG omogućuje gotovo neograničene efekte prozirnosti nudeći alfa kanal za prozirnost

Važno je napomenuti da PNG ne dopušta animaciju kao GIF. Ali postoji standard mrežne grafike s više slika (MNG) koji to dopušta, ali ga web preglednici i grafički uređivači ne podržavaju tako široko.

Vjerojatno se pitate zašto PNG nije tako široko korišten format na webu ako je tako dobar kao što se reklamira. Odgovor je velikim dijelom pogrešna predodžba o formatu i podršci preglednika za njega.

Zbog Internet Explorer 6 i starije verzije ne podržavaju cijeli niz značajki PNG-a (uključujući transparentnost alfa kanala), ljudi su prepušteni vjerovanju (iako to nije istina) da Internet Explorer uopće ne podržava PNG ili barem ne podržava transparentnost. Zapravo, Internet Explorer 5 i 6 podržavaju dovoljno PNG specifikacija da bi bio funkcionalno ekvivalentan (ili bolji) neanimiranim GIF slikama. Svi ostali spomenuti preglednici, uključujući Firefox, Netscape 6 i novije, Mozillu, Operu 6 i novije, Safari i Camino u potpunosti podržavaju PNG transparentnost.

Osim ove zablude o ugrađenoj podršci preglednika GIF animacija bio (i nastavlja biti) glavni razlog njegova uspjeha. No, tijekom godina korištenje GIF-a postaje sve manje popularno u usporedbi s drugim tehnologijama (primjerice Flash), koje postaju sve pogodnije za animaciju.

Transparentnost je ključna karakteristika GIF-a i PNG-a i često je razlog zašto web dizajner odabire format koji će koristiti. Iako PNG nudi sveobuhvatniju podršku za transparentnost, web dizajneri često moraju izraditi GIF verziju slika kako bi odgovarale starijim preglednicima. Korištenjem CSS-a ovo je moguće (i donekle trivijalno) slanjem GIF slika za starije preglednike i visokokvalitetnih PNG slika preglednicima koji ih razumiju. Ali ovo je dupli posao za web dizajnera i kao rezultat toga, ljudi slijede put manjeg otpora i nastavljaju koristiti GIF slike.

Dakle, pogledali smo nekoliko razloga zašto je GIF još uvijek toliko popularan, ali većina njih se temelji na nerazumijevanju koncepata ili korištenju poznatog tijeka rada. Naoružani nekim ključnim znanjem o PNG-u i o tome kako se može pouzdano koristiti u preglednicima, možete iskoristiti sve prednosti koje nudi.

JPEG je još jedan sveprisutni web format i u većini slučajeva, kao što su fotografije (i slično), čak je bolji od PNG-a ili GIF-a. PNG nije namijenjen natjecanju s JPEG-om. JPEG kompresija stvara znatno manje datoteke od PNG-a kada radite s fotografijama. S druge strane, PNG proizvodi manje datoteke kada se unutar slika nalazi tekst, umjetničke linije, logotipi, "ravne" boje itd.

Sada pogledajmo kako koristiti PNG u web dizajnu. Sakupio sam sve datoteke za svaki primjer u posebnu mapu, dostupnu na prijateljima ED-a.

U posljednjih nekoliko godina, gradijent - glatki prijelaz između dvije ili više boja postao je najbolji prijatelj web dizajnera. Osobito su popularni suptilni, jedva vidljivi gradijentne ispune, koji bez da su upadljivi stvaraju osjećaj dubine i teksture.
Ponekad je GIF najbolji izbor za gradijent. Ako je gradijent jednostavan prijelaz u dvije boje, GIF u njemu radi besprijekorno. Međutim, ograničenje GIF-a na samo 256 boja često stvara primjetne i neuredne "trake" među složenijim gradijentnim prijelazima. JPEG, s druge strane, može ispisati prilično uredne gradijente, ali često po cijenu veće veličine datoteke. Iako su JPEG gradijenti općenito prilično dobri, morate zapamtiti da JPEG koristi kompresiju s gubitkom, što znači da rezultirajuća slika nikada neće dostići kvalitetu nekomprimirane slike.

Tipični stil gradijenta pozadine o kojem je riječ koristi se za gumbe, blokove ili bilo gdje drugdje. Moglo bi izgledati kao na slici 5-1. U smjeru kazaljke na satu od gornjeg lijevog kuta, vidimo originalnu (nekomprimiranu) sliku, GIF verziju, PNG verziju i JPEG. Možete vidjeti da je rezultirajući PNG najmanje veličine (515 bajtova). Ovo je četiri puta manje od GIF slike. JPEG je malo veći od PNG-a sa 637 bajtova i također je niže kvalitete zbog kompresije s gubitkom (iako sposobnost ljudskog oka da detektira razliku u kvaliteti u ovom jednostavnom primjeru ostaje upitna).

Slika 5-1
Photoshop ploča - Spremi za web,
prikazujući razlike u veličini datoteke za istu sliku u različitim formatima

Ponekad morate stvoriti sliku koja jednako funkcionira na različitim podlogama. Neki uobičajeni primjeri su logotipi i ikone. GIF-ovi tradicionalno dominiraju ovim situacijama, ali postoji nekoliko razloga zašto PNG može biti više najbolji izbor u ovoj situaciji. PNG obično pobjeđuje u veličini datoteke za logotipe ili neku drugu jednostavnu "umjetnost". Osim toga, inherentna transparentnost PNG-a čini jednostavno stvaranje pojedinačne datoteke koje rade na bilo kojoj pozadini. PNG nudi binarnu transparentnost poput GIF-a, ali također pruža mnogo poželjniju opciju alfa kanala, u kojem pikseli mogu biti djelomično transparentni umjesto da se samo uključuju ili isključuju. Korištenje potonjeg povećava veličinu datoteke, ponekad čak i veću od GIF-a s binarnom prozirnošću, ali omogućuje anti-aliasing na rubovima vaše slike i čini elegantnijim njezino postavljanje na vrh pozadine.

Međutim, preradio sam njihov koncept koristeći bijelu sliku sa šablonskim simbolima. Koristili su bijeli simbol na prozirnoj pozadini, što bi općenito moglo biti vrlo učinkovito. U ovom slučaju, vaš boja pozadine CSS bi se pojavio u kvadratnom ili pravokutnom području oko simbola, umjesto samog simbola.

I Dan i PJ koristili su prozirni GIF umjesto PNG-a. To je u potpunosti pokrilo njihove potrebe, a morali su izraditi pikselne slike koje odgovaraju stilu ikona. Korištenjem PNG-a možete postići sličnu tehniku, ali s nekim prednostima u obliku anti-aliasinga i djelomične prozirnosti za korištenje u detaljnijim ikonama.

Znam što mislite: sva ta PNG prozirnost izgleda dobro, ali je li praktična?

Dobra vijest je da svi moderni preglednici u potpunosti podržavaju PNG slike, uključujući prozirnost alfa kanala, čije sam prednosti pokazao u primjerima. Safari (sve verzije), Firefox (sve verzije), Opera (verzije 6 i novije), Netscape (verzije 6 i novije) i Mozilla (sve verzije) učinit će sve što od njih zatražim. Ali postoji jedna loša vijest - jedini preglednik koji još nisam spomenuo, a koji ima većina vaših korisnika: Internet Explorer.

Internet Explorer 6 i starije verzije ne podržavaju prozirnost alfa kanala ugrađenu u PNG format. Otkad je većina web surfera napravila izbor (ili nedostatak) preglednika, ova zjapeća rupa drži web dizajnere podalje od PNG-a. Ali s izdavanjem Internet Explorera 7 dobili smo punu alfa podršku PNG prozirnost u svim većim preglednicima. Što je sljedeće, postoje li načini za rad s PNG alfa transparentnošću u Internet Exploreru 6 i nižim verzijama? Dakle, ako želite koristiti ovaj efekt, ništa vas neće spriječiti. Internet Explorer 6 i njegove ranije inačice zahtijevaju više pažnje nego što je potrebno, ali je definitivno moguće.

Internet Explorer dolazi s raznim izvornim filtrima. Koriste se u CSS-u, ali nisu dio službene CSS specifikacije. Drugim riječima, nisu standardizirani na webu. Nažalost, Internet Explorer 6 i niže verzije ne podržavaju u potpunosti PNG format (koji preporučuje W3C), ali Microsoft ima filtar koji otklanja ovaj nedostatak: AlphaImageLoader.

Prema dijelu na Microsoftovoj službenoj web stranici, AlphaImageLoader "prikazuje sliku unutar granica objekta i između pozadine objekta i njegovog sadržaja." Drugim riječima, AlphaImageLoader učitava PNG sliku s punom transparentnošću, ali je učitava kao vlastiti sloj, ispod kojeg je sadržaj objekta na koji je primijenjena. PNG slike učitane na ovaj način djeluju više kao pozadinske slike nego slike u prednjem planu (iako one zapravo "sjede" na vrhu pozadine objekta).

U osnovi, možete jednostavno primijeniti AlphaImageLoader u CSS-u na img elemente i uživati ​​u rezultatu. Prvo će se učitati slika, prozirnost će ostati, ali zatim će se slika ponovno učitati - kao prednji sadržaj objekta - s neprozirnim područjima (na taj način "zasjenjujući" vašu prozirnu verziju).

Ne možete koristiti prozirni PNG kao pozadinu CSS slika za (X)HTML element (recimo za ) i očekujte da AlphaImageLoader ispravno obavi posao u Internet Exploreru. Zapamtite da AlphaImageLoader umeće vašu sliku između pozadine i prednjeg plana objekta. Dakle, iako će učitati vašu sliku u svoj njezinoj transparentnoj slavi, također će je nastaviti učitavati kao pozadinska slika CSS, i bez vaših prekrasnih prozirnih piksela.

Vratimo se jednom od ranijih primjera i pokušajmo ga ispravno učitati u Internet Exploreru. Sjećate se Channel 49, TV postaje u Topeki? siguran sam da da. Slika 5-21 prikazuje kako stranica izgleda u Internet Exploreru 6.

Slika 5-21
Naslov 49abcnews.com, prikazan u Internet Exploreru 6 za Windows, s netaknutom PNG prozirnošću.

HTML za gornji dio vremena izgleda kao što ste već mogli pogoditi:

Trenutno u Topeki, KS:
82° Oblačno
Saznajte prognozu i više...

Vidite sliku, a to je definitivno PNG; čak je i Internet Explorer učitava besprijekorno. Tajni sastojak ovoga je JavaScript. Zapravo sam upotrijebio malo DOM skriptiranja da uklonim element img u hodu i zamijenim ga elementom div koji - pogađate - koristi AlphaImageLoader. JavaScript je opisan unutar uvjetnih komentara, još jednog zgodnog, ali potpuno nestandardiziranog Microsoftovog idioma ugrađenog u Internet Explorer. Uvjetni komentari omogućuju vam korištenje koda samo za poznatu verziju Internet Explorera. Svi ostali preglednici ignoriraju kod, tako da ni na koji način ne utječe na njih. U elementu stranice www.49abcnews.com pronaći ćete:

Zahvaljujući prvom retku, ako je lte IE6, ova skripta će biti uključena u prikazani dokument samo ako je prikazana u verziji Internet Explorera manjoj ili jednakoj (to označava lte) 6. Svi ostali preglednici, uključujući novopristigli Internet Explorer 7, potpuno će zanemariti ovo.

Dakle, što se nalazi u datoteci JavaScript fixWeatherPng.js? Pogledajmo:

Window.attachEvent("onload", fixWeatherPng); funkcija fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; Neki CSS stilovi specifični za 49abcnews.com izostavljeni radi sažetosti. img.replaceNode(div); )

Analizirajmo, korak po korak, što skripta radi. Prvo, kažemo pregledniku da želimo izvršiti funkciju fixWeatherPng kada se stranica učita. Ostatak skripte je sama funkcija.

Počnimo, prvo tražimo sliku s kojom ćemo raditi po njenom id atributu i spremamo je u img varijablu. Spremamo src atribut (URL slikovne datoteke) u src varijablu. Zatim skrivamo img element izlaganjem CSS svojstvo vidljivost u skriveno.

Kao rezultat toga, zamjenjujemo izvorni element img (koji je skriven) novostvorenim elementom div, na koji je AlphaImageLoader uspješno priključen.

Korištenje DOM skriptiranja za umetanje vašeg AlphaImageLoadera - filtriranje bitova u hodu - ima svoju ružnu, ali nužnu lošu stranu - netočan CSS. Štoviše, izvan vašeg (X)HTML označavanja postojat će nesemantički div elementi. I sve dok je sve ovo opisano unutar uvjetnih komentara, nema šanse da drugi preglednici budu oštećeni Microsoftovim kodom. (handyblogger: Ovdje Jeff pokušava suptilno ukazati na Microsoftovo "nespretno" rješenje)

Ako nešto morate učiniti neispravno, barem to možete izdvojiti i držati odvojeno od svega ostalog gdje ne treba.

PNG poput grafički format, nudi puno tehničke prednosti izvan onih koji se obično koriste u GIF-ovima. Zapravo, prednosti su toliko velike da je PNG već odavno mogao zauzeti dominantnu poziciju kao grafički format koji nije foto. Nedostatak podrške Internet Explorera za neke značajnije značajke PNG-a, kao što je transparentnost alfa kanala, kao rezultat toga odvratio je mnoge web programere. Ali postoje dva vrlo dobra razloga zašto se ne biste trebali bojati PNG-a.

Prvo: čak i Internet Explorer 6 i njegove ranije verzije gotovo u potpunosti podržavaju PNG na način na koji GIF može (s izuzetkom animacije, naravno). PNG gotovo uvijek proizvodi manje datoteke, što im omogućuje brže učitavanje i korištenje manje resursa.

Drugo: Internet Explorer 7 nudi punu podršku za PNG alfa transparentnost. Učinci koji se mogu postići s punim rasponom prozirnih opcija gotovo su neograničeni. Očekujem da će se za dizajnere koji pronađu zanimljive načine korištenja PNG prozirnosti poput onih opisanih u ovom članku, otvoriti vrata novoj razini stilova dosad neviđenoj. Dao sam vam neke korisne ideje o tome što možete stvoriti s PNG prozirnošću, ali nemojte tu stati. Potražite sebe!

Izvadak iz Web Standards Creativity Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin i Rob Weychert; objavili prijatelji ED-a. Autorska prava Jeff Croft 2007. Korišteno uz dopuštenje Apress, Inc.

PNG format slike jedan je od najpopularnijih i nudi korisnicima pohranu komprimiranih slika bez gubitka kvalitete. Najviše od svega, PNG se koristi za uređivanje grafike ili na Internetu. Zatim ćemo pogledati nekoliko jednostavnih načina na koje možete otvoriti datoteku ovog formata na računalu.

Postoji nekoliko različitih metoda za otvaranje PNG datoteka za pregled i uređivanje. Samo trebate slijediti dolje navedene upute i otvaranje slike neće biti teško.

Na Internetu postoji mnogo grafičkih urednika i posebnog softvera za pregled i uređivanje slika. Korisnicima pružaju veliki broj funkcija i alata, što proces rada sa slikama čini što ugodnijim. Pogledajmo postupak otvaranja PNG slike pomoću programa GIMP kao primjera:

Ako vam GIMP iz nekog razloga ne odgovara, predlažemo da se upoznate s njim puni popis programi za pregled slika u našem članku na donjoj poveznici. Tamo ćete sigurno pronaći nešto prikladno.

U slučajevima kada je potrebno izvršiti razne manipulacije sa otvorena slika, iskoristite posebne grafičke uređivače s naprednom funkcionalnošću i velikim brojem različitih alata. Više o njima možete saznati u našem članku na poveznici ispod.

Sve verzije Windows operativnog sustava imaju ugrađeni preglednik slika. Također se može koristiti za otvaranje PNG datoteka. Pogledajmo pobliže ovaj proces:

Ako trebate sve PNG slike otvoriti kroz standardni preglednik Windows fotografije, prati ove korake:

Sada će prema zadanim postavkama sve PNG datoteke biti otvorene s standardnim sredstvima gledanje fotografija. Da biste promijenili program za otvaranje, jednostavno slijedite iste korake, odabirom drugog softvera.

U ovom smo članku detaljno pogledali jednostavnih načina otvaranje slika u PNG formatu. Kao što vidite, u ovaj proces nema ništa komplicirano, a sve se radi u samo nekoliko koraka.

PNG datoteka je rasterska slika spremljena u formatu Portable Network Graphic. Svaka PNG slika sadrži paletu - skup korištenih boja. Za smanjenje veličine datoteke koristi se kompresija bez gubitaka pomoću algoritma Deflate. Koristi se prvenstveno na Internetu kao slike za web stranice. Format je razvijen kako bi zamijenio GIF, koji je, uz svoje nedostatke, imao ograničenja za korištenje u slobodnom softveru do 2004. godine. Novi PNG format riješio je te probleme. Konkretno, implementira podršku za 8-bitni alfa kanal i podršku za dubinu boja do 48 bita. Dok je u GIF formatu moguća samo puna transparentnost, a paleta boja je ograničena na samo 256 boja (8 bita). Međutim, za razliku od svog prethodnika, ovaj format ne podržava animaciju. U tu svrhu kreiran je još jedan MNG format. Također je nemoguće koristiti CMYK paletu u PNG datotekama, jer ovaj format nije namijenjen za profesionalni rad s grafikom. PNG datoteke mogu se otvoriti u bilo kojem pregledniku i gotovo svakom programu za pregledavanje i uređivanje slika. U Windows datoteka s PNG proširenjem može se otvoriti dvostrukim klikom miša.

Ekstenzija datoteke .png predstavlja PNG sliku. Pregled i obrada rasterske slike u PNG formatu moguća je korištenjem sljedeće programe: Microsoft Windows Fotografije, Microsoft Windows preglednik fotografija, Microsoft Paint, Adobe Photoshop CC. Također, navedeni programi mogu pretvarati slike, slike i crteže ovog formata.

PNG datoteka se može otvoriti posebnim programima. Otvoriti ovaj format, preuzmite jedan od predloženih programa.

PNG proširenje je format datoteke koji se koristi za pohranu slika bez gubitka kvalitete. Ovo je najpopularniji format fotografija na internetu, posebno dizajniran za korištenje na webu.

Datoteka s datotečnim nastavkom PNG je datoteka Prijenosna mrežna grafika. Format koristi kompresiju bez gubitaka i općenito se smatra alternativom GIF-u. Ali za razliku od GIF-a, PNG datoteke ne podržavaju animaciju.

PNG format sadrži fotografije u sivim tonovima i fotografije u boji, a podržani su i transparentni slojevi. PNG kompresija obično je bolja od one koja se koristi u GIF-u. JPG je ponekad bolji od PNG-a, ali kompresija može uzrokovati artefakte na slikama s tekstom ili oko područja visokog kontrasta.

Za otvaranje PNG datoteka možete koristiti bilo koji internetski preglednik ili grafički uređivač. I Windows i Mac OS platforme imaju ugrađene mehanizme za pregled takvih slika.

Png - Windows zadani preglednik fotografija često se koristi za otvaranje PNG datoteka jer sistemski program Windows. Ali postoji mnogo drugih načina da ih vidite.

Svi preglednici (kao što su Chrome, Firefox, Internet Explorer, itd.) automatski će vidjeti PNG datoteke koje otvorite na internetu, što znači da ne morate preuzimati svaku PNG datoteku koju želite pogledati na svoje računalo. Također možete koristiti svoj preglednik za otvaranje PNG datoteka koje već imate na računalu pomoću kombinacije tipki Ctrl + O. Većina ovih programa također podržava povlačenje i ispuštanje, tako da možete jednostavno povući PNG datoteku u preglednik da biste je otvorili .

Postoji i nekoliko izvanmrežnih opcija za otvaranje takvih slika - ove su posebne grafički urednik. Nekoliko popularnih su XnView, IrfanView, FastStone Image Viewer, Google Drive, Eye of GNOME i gThumb. Za uređivanje PNG datoteka možete koristiti gotovo bilo koji od navedenih programa, aplikacije Paint i Paint.NET, popularni uslužni program GIMP, kao i dobro poznati Adobe Photoshop.

Slikovne datoteke mogu se pretvoriti različiti putevi, na primjer, pretvoriti u png i iz png pomoću raznih programa i online usluge. Na primjer, to može učiniti Png editor - Photo Converter.

Datoteka slike koja je pohranjena u formatu Portable Network Graphic (PNG). Sadrži bitmapu boja i koristi kompresiju bez gubitaka, slično .GIF datoteci, ali bez ograničenja kopiranja. Obično se koristi za pohranjivanje web slikovnih grafika.

PNG format (čitati kao png) stvoren je kao odgovor na ograničenja GIF formata, prije svega radi povećanja podrške za boje i pružanja formata slike bez patentiranja. Nadalje, dok GIF datoteke podržavaju samo neprozirne ili potpuno prozirne piksele, PNG slike mogu sadržavati 8-bitni kanal prozirnosti koji omogućuje promjenu boja iz neprozirnih u prozirne.

PNG slike ne mogu se animirati kao GIF slike. Ali povezani .MNG format može se animirati. PNG slike ne podržavaju CMYK jer nisu namijenjene za profesionalnu grafičku upotrebu. PNG slike podržava većina web preglednika.

Mac OS X 10.4 i noviji pohranjuju snimke zaslona kao PNG datoteke. Ubuntu Linux također pohranjuje ispisane snimke zaslona u PNG formatu.

Vrsta MIME: slika/png

Preuzmite program za PNG format

U ovom članku želim govoriti o jednoj vrlo neugodnoj značajci Photoshopa, koja se pojavljuje prilikom spremanja prozirne slike u PNG24. Uzmimo originalnu sliku i kopirajmo dio u PNG24. Učinio sam to na sljedeći način: koristeći alat Polygonal Lasso, odabrao sam fragment, kopirao ga i zalijepio u novi dokument, a zatim ga spremio pomoću Save for Web:

PNG 24, 456 KB

Kao što smo saznali u 1. dijelu, u PNG24 slika se u biti sastoji od dva sloja: RGB sloja koji sadrži informacije o boji svakog piksela i alfa kanala koji sadrži informacije o njihovoj prozirnosti.

Logično je pretpostaviti da u potpuno prozirnim područjima treba postojati jedna boja kako bi se slika učinkovito upakirala. Međutim, ovo je ono što je Photoshop spremio u RGB sloj (vidio sam to kroz uređivač Seashore):

I golim okom može se vidjeti da ostaju veliki fragmenti apsolutno nepotrebnih informacija:

Ako ne želite koristiti druge uređivače (na primjer, nisam primijetio takav nedostatak u Adobe Fireworksu), predlažem jednostavan način za uklanjanje ovog nedostatka u Photoshopu. Naš zadatak je sve informacije u potpuno prozirnim područjima zamijeniti jednom bojom (po mogućnosti crnom, da ne sumnjamo da će ta područja imati najmanju težinu u bajtovima).

1. Otvorite primjer u Photoshopu i odaberite sliku na sloju: Ctrl+kliknite na malu sliku sloja u paleti slojeva.

2. Prijeđimo na način rada brze maske (tipka Q).

3. Koristeći Image → Adjustments → Threshold, ostavite samo one piksele maske čija je boja crna. Da biste to učinili, povucite klizač u krajnji lijevi položaj.

4. Izađite iz moda brze maske (tipka Q) i obrnite odabir (Select → Inverse ili Ctrl+Shift+I). Odabrani ostaju samo potpuno prozirni pikseli.

5. Ispunite odabrano područje crnom bojom (postoji mnogo načina, na primjer, preko Uredi → Ispuni).

6. Ponovno obrnite odabir i dodajte masku sloju (ikona u paleti slojeva).

7. Sada radimo Save for Web i vidimo kako je slika čudesno “tanja” za 122 KB.

Još jednom ponavljam da su sve radnje vrlo zgodno snimljene u Radnje, nakon čega se izvode jednim pritiskom na tipku.

Nastavit će se.

Komunicirajući sa svojim kolegama na raznim seminarima iu studiju, došao sam do zaključka da je za mnoge jedina prednost PNG formata prisutnost iskrene prozirnosti. Ako na Internetu potražite informacije o ovom formatu, lako je primijetiti da su web programeri podijeljeni u dva tabora. Prvi pišu o tome koliko je ovaj format divan, koristeći čisto tehničke podatke koji su nerazumljivi običnim koderima i dizajnerima (na primjer, o superiornosti algoritama deflate kompresije nad LZW), dok drugi ostavljaju komentare različitih stupnjeva gluposti o beskorisnosti PNG, a da se uopće nije potrudio udubiti u bit stvari opisanih u specifikaciji.

Pokušajmo shvatiti koje prednosti pruža ovaj format kako bismo naučili kako ih koristiti pri pripremi ilustracija za web.

Krenimo od terminologije. Pretpostavljam da većina čitatelja koristi Photoshop i da su naišli na nazive PNG-8 i PNG-24. Ovo nisu dva različita formata, već samo varijacije istog PNG-a. Format vam omogućuje pohranjivanje tri vrste slika: sivih tonova (jedan kanal se koristi za opis slike - bijela), indeksirane boje (koristi se paleta boja, kao u GIF-u) i truecolor (koriste se tri kanala - RGB).

Najvažnija prednost PNG formata su, naravno, novi algoritmi kompresije. Svatko se sjeća da GIF učinkovito sažima samo horizontalna područja iste boje? Sada možete zaboraviti na ovo ograničenje:

Druga važna prednost je filtriranje linija (filtriranje skeniranja ili delta filtri), zahvaljujući kojima PNG paker može dobiti mnogo prikladnije podatke za kompresiju.

Pogledajmo primjer kako rade. Uzmimo sliku veličine 5x5 piksela s vodoravnim gradijentom i nacrtajmo kako se ona može spremiti u datoteku (svaki broj je jedinstvene boje).

Kao što možete vidjeti iz primjera, GIF koder komprimirao bi nizove koji se ne spakiraju dobro vodoravno (jer se iste boje šire okomito). Evo kako PNG koder može pretvoriti ove podatke:

Broj 2 pojavio se ispred svake linije. Ovo je filtar koji je primijenjen na liniju. U ovom slučaju, to je Up filter, koji govori dekoderu: "Za trenutni piksel, uzmite vrijednost gornjeg piksela i dodajte mu trenutnu vrijednost." U našem slučaju to je 0, jer se boje trenutnog i gornjeg piksela ne razlikuju. A ti se podaci mogu pakirati učinkovitije ako imamo dovoljno veliku sliku.

Zašto sam napisao Može biti? Zato što bi u našem idealiziranom slučaju sljedeća shema bila učinkovitija:

Ovdje se primjenjuje filtar 1 pod nazivom Sub, koji govori dekoderu: "Uzmite vrijednost piksela lijevo od trenutnog i dodajte mu trenutnu vrijednost." U ovom slučaju 1.

Nakon filtriranja, svi nizovi (zajedno s vrijednostima filtera) kombiniraju se u jednu sekvencu, koja se zatim komprimira korištenjem algoritama deflate (njihova rasprava je izvan dosega ovog članka).

Provjerimo filtre:

Pažljivi čitatelj može primijetiti da se filtri ne primjenjuju na cijelu datoteku, već na retke.

To znači da svaki niz može imati rudnik filtar. Ispada da može postojati 5 visina slike za filtriranje jedne slike. Općenito, zadatak dobrog kodera je upravo odabrati takve vrijednosti filtra pri kojima će veličina datoteke biti minimalna. Nažalost, Photoshop ne radi uvijek dobro svoj posao, pa u pomoć dolaze razni uslužni programi poput OptiPNG i PNGCrush, koji u velikom broju prolaza odabiru različite metode filtriranja i strategije kompresije podataka, čime značajno smanjuju volumen nekih složenih slika. Međutim, vrijedi zapamtiti da ti programi ne jamče smanjenje veličine za svaku datoteku, oni samo pokušavaju pronaći najbolji način kodiranje podataka.

Još jedan bolan udarac Photoshopu je to što ne zna spremati slike u sivim tonovima, odnosno ne zna smanjiti dubinu boje. Ovdje će nas ponovno spasiti gore spomenuti alati koji, ako je moguće, smanjuju dubinu boje bez ugrožavanja kvalitete slike.

Prednosti sivih tonova u odnosu na pravu boju su očite: na primjer, bijela boja u prvom slučaju je zapisana (u decimalnom sustavu) kao broj 255, au drugom - 16777215.

Sada, naoružani znanjem o pohranjivanju podataka u PNG formatu, možemo ga koristiti u pripremi slika za web. Više o tome u sljedećim člancima.

Ovdje ste jer imate datoteku koja ima ekstenziju datoteke koja završava na .png. Datoteke s ekstenzijom datoteke .png mogu pokrenuti samo određene aplikacije. Moguće je da su .png datoteke podatkovne datoteke, a ne dokumenti ili mediji , što znači da uopće nisu namijenjeni za gledanje.

PNG datoteke su komprimirane rasterske slikovne datoteke koje se obično implementiraju za vizualne elemente koji se nalaze na web stranici među ostalim web grafikama. Sadržaj slike ovih .png datoteka sastoji se od indeksnih boja integriranih bitmap slikama, a kompresija digitalne slike bez gubitaka i specifikacije kodiranja koje su implementirane u ove .png datoteke slične su standardima kompresije integriranim u GIF datoteke. Također poznat kao prijenosna mrežna grafika, PNG format razvijen je kako bi se uklonila ograničenja GIF slika u smislu podrške za boje i licenciranja patenata. Kanal transparentnosti ovih PNG datoteka poboljšan je za implementaciju 8-bitne podrške. Podrška za CMYK nije dostupna u ovim PNG datotekama.

Pokrenite .png datoteku ili bilo koju drugu datoteku na računalu dvostrukim klikom na nju. Ako su vaše asocijacije datoteka ispravno postavljene, otvorit će je aplikacija koja treba otvoriti vašu .png datoteku. Moguće je da ćete morati preuzeti ili kupiti ispravnu aplikaciju. Također je moguće da imate ispravnu aplikaciju na računalu, ali .png datoteke još nisu povezane s njom. U ovom slučaju, kada pokušate otvoriti .png datoteku, možete reći sustavu Windows koja je aplikacija ispravna za tu datoteku. Od tada će otvaranje .png datoteke otvoriti ispravnu aplikaciju.

Adobe Photoshop CS6 za Mac

ACD Systems Canvas 14

ACD sustavi ACDSee 15

PNG (Portable Network Graphic) datoteka odnosi se na rasterske slike. PNG format sadrži određenu paletu boja korištenih u crtežu. Ovaj grafički format prilično se često koristi na World Wide Webu kada se na web stranicama nude različite slike. Zahvaljujući korištenju algoritma kompresije Deflate, rasterske slike, s ekstenzijom PNG datoteke, dostupni su za kompresiju bez očitog gubitka kvalitete.

Razvili smo ovaj format datoteke da zamijenimo GIF format, jer je potonji dugo vremena zahtijevao plaćanje softver. Među vlasnicima web resursa, PNG slike poznate su po izvrsnim karakteristikama u usporedbi sa sličnim formatima. PNG podržava dubinu boje do 48 bita. Glavna razlika između GIF-a je u tome što je takva grafička datoteka ograničena na samo 8 bita (ukupno 256 boja). Trebali biste znati da, za razliku od GIF-a, PNG ne podržava efekte animacije.

Datoteku s ekstenzijom PNG možete otvoriti pomoću gotovo bilo kojeg programa za pregledavanje. U operacijskoj sali Windows sustav, otvaranje PNG-a moguće je jednostavnim dvoklikom miša za pregled slika. Ovaj format slike radi u bilo kojem web pregledniku. Ako korisnik treba promijeniti spremljenu sliku u PNG verziji, dovoljno je koristiti alate za uređivanje slika kao što su Adobe Photoshop ili Microsoft Windows Photos, kao i Corel PaintShop ili ACD Systems.

Ovo proširenje datoteke vrlo je popularno i nosi sve potrebne grafičke informacije za slike u boji dobre kvalitete.