PNG kot dešifriranje. Kaj je PNG? Kaj je format png, značilnosti formata, kjer se uporablja

Ko gre za ustvarjanje slik za splet in druge digitalne namene, katere oblike datotek vam lahko zagotovijo najboljše rezultate? Razmisliti morate o hitrosti glede na kakovost in velikost slike. Torej, kaj naj uporabite: SVG, PNG ali JPG?

Včasih ste pravkar uporabili JPG, da ste prilagodili prostor 72 dpi in šli naprej. Nič več. Zasloni z visoko ločljivostjo, več ogledov in potreba po hitrem spletnem mestu so vse skupaj naredili veliko težji. Oglejmo si prednosti in slabosti vsake od teh oblik zapisa!

SVG

SVG ali takšna prilagodljiva vektorska grafika je neverjetno praktična. Zato oblikovalci to obliko uporabljajo pogosteje.

Ker je SVG vektorski format, izgleda odlično pri vseh velikostih in deluje skoraj za vse vrste slik, razen za fotografijo.

SVG je oblika brez izgub, kar pomeni, da pri stiskanju ne izgubi nobenih podatkov, prikaže neomejeno število barv in se najpogosteje uporablja za grafiko in logotipe v spletu ter za projekte, ki si jih bomo lahko ogledali na Retini in drugih visoko ločljivosti zaslonov.

Prednosti SVG

Vektorski format se dobro upodobi v vseh velikostih
Sposobnost ustvarjanja preprostih upodobitev SVG v urejevalniku kode ali besedila
Oblikujte in izvozite zapletene grafike iz Adobe Illustrator ali Sketch
Na voljo je besedilo SVG
SVG je enostavno oblikovati in pisati
Formati SVG podpirajo sodobni brskalniki in so dokaz v prihodnosti
Oblika je zelo stisljiva in lahka
Dobro za iskanje zaradi oblike besedila
Podpora preglednosti
Omogoča shranjevanje fotografij ali animiranih slik

Proti SVG

Zasnova SVG se lahko zaplete
Se ne prikaže v nekaterih zastarelih brskalnikih
Omejena podpora za e-poštne odjemalce

PNG

PNG ali prenosna mrežna grafika je oblika, zasnovana za splet, ki ponuja tisto, česar JPG ne more - preglednost. Zato je PNG tako priljubljen za nalaganje elementov, kot so logotipi za oblikovanje spletnih strani.

Obstajata dve vrsti PNG - PNG-8 in PNG-24. PNG-8 uporablja bolj omejeno barvno paleto s samo 256 barvami, ima nekoliko boljšo preglednost in se izvozi v majhni velikosti. PNG-24 uporablja neomejeno barvno paleto, podpira preglednost, vendar se izvaža v velikih velikostih. Obe vrsti PNG imata stiskanje brez izgub.

Čeprav so formati PNG podobni GIF, ne podpirajo animacije. Ta oblika se najpogosteje uporablja za ikone, majhne fotografije ali slike, ki potrebujejo preglednost.

Prednosti PNG

Podpora preglednosti
Primerno za slike z besedilom
Formati PNG dobro upodabljajo logotipe
Vključuje vdelani besedilni opis za iskalnike
PNG-8 ima majhno velikost datoteke in je najlažji
Izvozi brez neravnih robov

Proti PNG

Velikosti datotek se hitro povečajo za velike datoteke, kot so slike
Nekateri stari e-poštni odjemalci imajo težave z upodabljanjem
Brez animacije
Datoteke PNG-24 so lahko velike, kar ni zelo dobro in primerno za skupno rabo prek interneta

Jpeg

JPG ali JPEG je verjetno najbolj znana oblika slike. To je privzeta možnost za večino slik, saj je zaradi skoraj neomejenega barvnega zaslona priročna za fotografije.

JPG ponuja tudi možnost izbire, kako naj bo slika stisnjena od 0% (močno stiskanje) do 100% (brez stiskanja). Večina oblikovalcev izbere nekaj v razponu od 60 do 70 odstotkov. Slike so na tej stopnji stiskanja še vedno videti dobro, vendar so velikosti datotek bistveno manjše.

JPG uporablja stiskanje z izgubo in med stiskanjem ne podpira izvirnih podatkov. Vsakič, ko se fotografija ponovno shrani in izvozi v formatu JPG, se poslabša.

Format JPG se najpogosteje uporablja za slike, fotografije in vse, kar ima veliko število barv.

Prednosti JPEG-a

Odlično za večbarvne in fotografije
Preprosto zmanjšajte velikost datoteke
Dosledno prikazano v e-poštnih odjemalcih

Proti JPEG

Brez preglednosti
Ustvari neravne robove za besedilo
Brez animacije
Izgubljeni format
Samodejni metapodatki za iskanja ne smejo vsebovati nadomestnih informacij

Kateri format naj uporabite?

Zdaj, ko veste, kakšne so razlike med SVG, PNG in JPG, katero naj uporabite?

Če želite odgovoriti na to, si lahko zastavite nekaj naslednjih vprašanj.

Ali potrebujete vektorsko ali bitno sliko?

Vektor: SVG

Raster: JPG ali PNG

Ali potrebujete preglednost?

Da: SVG ali PNG

Ali uporabljate večbarvno sliko?

Da: JPG ali PNG

Je to velika fotografija?

Ali slika vsebuje besedilo?

Vam je stiskanje brez izgub pomembno?

Da: SVG ali PNG

Ali moram posodobiti in ponovno konfigurirati grafiko?

Št: PNG ali JPG

Ali uporabljate animacijo?

Št: JPG ali PNG

Izhod

Vsi trije formati slik - SVG, PNG in JPG - imajo praktično in široko uporabo. Čeprav je SVG najnovejša oblika in jo je pogosto mogoče shraniti v najmanjšo velikost datoteke, ni vedno najboljša možnost.

Pomislite, kako uporabljate slike v svojem projektu, kako izberete vrsto datoteke, da najdete tisto, ki najbolje ustreza tistemu, kar poskušate doseči. Morda boste celo ugotovili, da nekateri projekti vsebujejo slike, ki uporabljajo vse tri vrste datotek. To se dejansko zgodi precej pogosto!

Vse uspešno delo in ustvarjalnost!

Datoteka PNG je v obliki prenosne mrežne grafike. Oblika uporablja stiskanje brez izgub in se na splošno šteje za nadomestitev formata slike GIF. Za razliko od datotek GIF pa datoteke PNG ne podpora animaciji. Obstaja pa zelo podoben format MNG (Multiple Image Network Graphics), vendar ta oblika ni dobila toliko priljubljenosti kot datoteke GIF ali PNG.

Datoteke PNG se pogosto uporabljajo za shranjevanje grafike na spletnih mestih. Nekateri operacijski sistemi, kot sta macOS in Ubuntu, privzeto shranjujejo posnetke zaslona v obliki PNG.

Druga uporaba PNG je, če morajo biti deli slike pregledni, kar je lahko koristno pri ustvarjanju ilustracij, oblikovanju spletnega mesta, ustvarjanju fotografije itd. Če imate na primer logotip, ki ga želite namestiti nad fotografijo, je logotip veliko lažje "izrezati", ob njem pa pustiti prozorne slikovne pike, tako da ko je postavljen nad drugo sliko to jeslika je bila vidna s prosojnostjo.

Kako odpreti datoteko PNG

Kako pretvoriti datoteko PNG

Verjetno bo zmožen vsak pretvornik slikovnih datotek, s katerim delate pretvori datoteko PNG v drugo obliko (npr. ICO, GIF, BMP, TIF itd.). Nekateri spletni pretvorniki PNG, kot sta FileZigZag in Zamzar, lahko to tudi rešijo.

Druga varianta pretvorba datoteke PNG - uporabite enega od pregledovalnikov slik, ki sem ga že omenil. Čeprav obstajajo predvsem kot "odpirači" za različne vrste slik, nekateri podpirajo shranjevanje / izvoz odprte datoteke PNG v drugo obliko slike.

Kdaj uporabiti datoteke PNG

Datoteke PNG Je odličen format za uporabo, vendar ne nujno v vsaki situaciji. Včasih je PNG lahko prevelik in ne samo, da zavzame nepotreben prostor na disku ali zaplete, ampak lahko tudi znatno upočasni spletno stran, če jo tam uporabljate. Pred pretvorbo vseh slik v PNG je torej nekaj stvari, ki jih morate upoštevati (tega ne storite).

Če razmišljate strogo o velikostih datotek PNG, morate razmisliti, ali so prednosti kakovosti slike dovolj dobre, da žrtvujete prostor (ali počasno nalaganje spletnih strani itd.). Ker je datoteka PNG ne stisne sliko kot druge oblike z izgubo, kot je JPEG, kakovost se ne zmanjša toliko, ko je slika v formatu PNG.

Datoteke JPEG so uporabne, če ima slika nizek kontrast, toda PNG so boljši, kadar imate opravka z ostrim kontrastom, na primer kadar ima slika črte ali besedilo ali velika območja v enobarvni barvi. Tako je posnetke zaslona in ilustracije najbolje shraniti v formatu PNG, medtem ko je "prave" fotografije najbolje shraniti v formatu JPEG / JPG.

Razmislite tudi o uporabi PNG prek JPEG, ko imate opravka s sliko, ki jo je treba znova in znova urejati. Na primer, ker je oblika JPEG predmet tako imenovane izguba generacije, urejanje in shranjevanje datoteke znova in znova povzroča poslabšanje kakovosti slike. To ne velja za PNG, saj uporablja stiskanje brez izgub.

Dodatna pomoč pri datotekah PNG

Če želite ozadje narediti pregledno v obliki PNG, lahko uporabite samodejna orodja, kot je Clipping Magic, brezplačno orodje za odstranjevanje ozadja ali skoraj kateri koli program za urejanje slik.

Če imate na primer Photoshop, sliko položite na lastno plast, odstranite plast ozadja in nato s katerim koli orodjem (na primer Eraser, Marquee, Lasso) izbrišite dele slike, ki bi morali biti prozorni.

PNG (prenosna mrežna grafika), ki se izgovarja kot »ping«, je bitna oblika za shranjevanje grafičnih informacij z uporabo stiskanja brez izgub. PNG je bil ustvarjen za izboljšanje in nadomestitev GIF z grafično obliko brez licence. PNG je mednarodni standard (ISO IEC 15948: 2003) in ga uradno priporoča W3C.

Format PNG shranjuje grafične podatke v stisnjeni obliki. Poleg tega se to stiskanje izvaja brez "izgube", za razliko od na primer standardnega JPEG (tudi z najvišjo kakovostjo).

Format PNG je zasnovan tako, da nadomešča starejši in enostavnejši format GIF ter do neke mere nadomesti veliko bolj zapleten format TIFF.

Če govorimo o spletnem oblikovanju, ima v primerjavi z GIF naslednje glavne prednosti:

Izboljšano stiskanje: v večini primerov je slika PNG manjša od slike GIF.
- Več barv na sliki: Skoraj neomejeno število barv na sliki, medtem ko je omejitev za GIF 256.
- Neobvezna podpora za alfa kanal: medtem ko GIF podpira samo binarno preglednost, PGN omogoča, da s podporo za alfa kanal dosežete neomejeno število učinkov preglednosti.

Kot slabost je seveda treba omeniti pomanjkanje podpore za animacijo, kot je GIF. Čeprav seveda obstaja podoben standard za animacijo, imenovan Multi-image Network Graphics (MNG), vendar ni razširjen in ga zato sodobni brskalniki ne podpirajo široko.

Format slik PNG je eden najbolj priljubljenih in uporabnikom ponuja shranjevanje stisnjenih slik brez izgube kakovosti. PNG se uporablja predvsem za grafično urejanje ali na internetu. Nato si bomo ogledali več preprostih načinov, s katerimi lahko v računalniku odprete datoteko te oblike.

Obstaja več različnih načinov za odpiranje datotek PNG za ogled in urejanje. Upoštevati morate le spodnja navodila in slike ne bo težko odpreti.

1. način: Pregledovalniki slik

Na internetu obstaja veliko grafičnih urejevalnikov in posebna programska oprema za ogled in urejanje slik. Uporabnikom zagotavljajo veliko število funkcij in orodij, zaradi česar je postopek dela s slikami čim bolj udoben. Oglejmo si postopek odpiranja slike PNG na primeru programa GIMP:

Če vam GIMP iz nekega razloga ne ustreza, predlagamo, da se na spodnji povezavi seznanite s celotnim seznamom programov za ogled slik v našem članku. Tam boste zagotovo našli kaj primernega.

V primeru, da morate z odprto sliko izvesti različne manipulacije, uporabite posebne grafične urejevalnike z napredno funkcionalnostjo in velikim številom različnih orodij. Več o njih lahko izveste v našem članku na spodnji povezavi.

2. način: Standardno orodje Windows

Vse različice operacijskega sistema Windows imajo vgrajen pregledovalnik slik. Uporablja se lahko tudi za odpiranje datotek PNG. Oglejmo si podrobneje ta postopek:

Če potrebujete vse slike PNG za odpiranje prek običajnega pregledovalnika fotografij sistema Windows, sledite tem korakom:

Zdaj se bodo vse datoteke PNG odprle s standardnim pregledovalnikom fotografij. Če želite program spremeniti tako, da se odpre, sledite istim korakom, tako da izberete drugo programsko opremo.

V tem članku smo podrobno preučili preproste načine za odpiranje slik PNG. Kot lahko vidite, v tem postopku ni nič zapletenega in vse se naredi v dobesedno nekaj korakih.

Poleg tega je brezplačna oblika PNG spletnim oblikovalcem različne praktične prednosti pred GIF:

Boljše stiskanje: pri večini slik PNG doseže manjšo velikost datoteke kot GIF
Velika barvna globina: PNG ponuja resnično barvo do 48-bitov, ko imamo v GIF le 256 barvnih palet
Prosojnost alfa kanala: Ko GIF ponuja samo binarno preglednost, PNG omogoča skoraj neomejene učinke preglednosti in ponuja alfa kanal za preglednost

Ustrezno je omeniti, da PNG ne dovoljuje animacij, kot to počne GIF. Obstaja pa standard MNG (Multi-image Network Graphics), ki to omogoča, vendar ga spletni brskalniki in grafični urejevalniki ne podpirajo široko.

Zakaj je torej GIF še vedno tako priljubljen?

Verjetno se sprašujete, zakaj se PNG v spletu ne uporablja tako pogosto, če je tako dober kot oglaševan. Odgovor so večinoma napačne predstave o obliki in podpori brskalnika zanjo.

Zaradi dejstva, da Internet Explorer 6 in starejši ne podpira celotnega obsega zmogljivosti PNG (vključno s prosojnostjo alfa), ljudje verjamejo (čeprav to ni res), da Internet Explorer sploh ne podpira PNG ali vsaj ne podpira preglednosti. Dejansko Internet Explorer 5 in 6 podpirata dovolj specifikacij PNG, zaradi česar je funkcionalno enakovreden (ali več) neanimiranim slikam GIF. Vsi drugi referenčni brskalniki, vključno s Firefoxom, Netscapeom 6 in novejšimi, Mozillo, Opera 6 in novejšimi različicami, Safarijem in Caminom, v celoti podpirajo preglednost PNG.

Poleg te napačne predstave o podpori brskalnika je bila vgrajena animacija GIF (in je še vedno) glavni razlog za njen uspeh. Čeprav je z leti uporaba GIF postajala vse manj priljubljena v primerjavi z drugimi tehnologijami (na primer Flash), ki postajajo vse bolj primerne za animacijo.

Preglednost je ključna značilnost GIF in PNG in je pogosto razlog, da se spletni oblikovalec odloči, katero obliko uporabiti. Medtem ko PNG ponuja celovitejšo podporo za preglednost, morajo spletni oblikovalci pogosto ustvariti različice slik GIF, ki ustrezajo starejšim brskalnikom. Uporaba CSS-ja je mogoča (in nekoliko okorna) s pošiljanjem slik GIF za starejše brskalnike in visokokakovostne PNG-je brskalnikom, ki jih razumejo. Toda to je dvojno delo za spletnega oblikovalca, zato se ljudje manj upirajo in še naprej uporabljajo slike GIF.

Pokrili smo več razlogov, zakaj je GIF še vedno tako priljubljen, vendar večina temelji na nerazumevanju konceptov ali uporabi znanega delovnega scenarija. Oboroženi z nekaj ključnega znanja o PNG in kako ga je mogoče zanesljivo uporabljati v brskalnikih, imate priložnost, da v celoti izkoristite prednosti, ki jih ponuja.

Kaj pa JPEG?

JPEG je še ena vseprisotna spletna oblika, ki je v večini primerov, na primer fotografij (ali podobnih), celo boljša od PNG ali GIF. PNG ni namenjen tekmovanju z JPEG. Zaradi stiskanja JPEG so datoteke pri delu s fotografijami veliko manjše od PNG. Po drugi strani pa PNG ustvarja manjše datoteke, kadar so znotraj slik besedilo, umetniške črte, logotipi, "enakomerne" barve itd.

Nekaj \u200b\u200bodličnih primerov uporabe skromnega PNG-ja

Zdaj pa si oglejmo, kako uporabiti PNG v spletnem oblikovanju. Vse datoteke za vsak primer sem zbral v ločeni mapi, ki je na voljo prijateljem ED.

Gradient

V zadnjih nekaj letih je gradient - gladek prehod med dvema ali več barvami - postal najboljši prijatelj spletnega oblikovalca. Posebej priljubljena so subtilna, subtilna gradientna polnila, ki nevsiljivo ustvarjajo občutek globine in teksture.
Včasih je GIF najboljša izbira za gradient. Če je gradient preprost dvobarvni prehod, GIF deluje brezhibno. Vendar omejitev GIF-a na samo 256 barv pogosto ustvari opaznejše in površne pasove med bolj zapletenimi prelivi gradienta. JPEG pa lahko ustvari precej gladke prelive, vendar pogosto za ceno večje velikosti datoteke. Čeprav so gradienti JPEG na splošno dovolj dobri, ne pozabite, da JPEG uporablja stiskanje z izgubo, kar pomeni, da nastala slika nikoli ne bo tako dobra kot nestisnjena.

Zadevni tipičen slog gradienta ozadja se uporablja za gumbe, polja ali samo kjer koli drugje. Mogoče je videti kot slika 5-1. V levem zgornjem kotu v smeri urnega kazalca vidimo izvirno (nestisnjeno) sliko, različico GIF, različico PNG in JPEG. Vidite lahko, da je PNG najmanjša velikost (515 bajtov) v rezultatu. Ta je štirikrat manjša od slike GIF. JPEG je nekoliko večji od PNG za 637 bajtov in ima tudi nižjo kakovost zaradi stiskanja z izgubo (čeprav človeško oko lahko ugotovi, da je razlika v kakovosti v tem preprostem primeru vprašljiva).

Slika 5-1
Photoshopova plošča - Shrani za splet,
prikazuje razlike v velikosti datoteke za isto sliko v različnih formatih

Slika, ki naj deluje na poljubnem ozadju

Včasih je treba ustvariti sliko, ki deluje enako na različnih podlagah. Nekateri pogosti primeri so logotipi in ikone. V takih primerih tradicionalno prevladujejo datoteke GIF, vendar obstaja več razlogov, zakaj bi bil PNG v tej situaciji boljša izbira. PNG na splošno zmaga v velikosti datoteke za logotipe ali katero koli drugo preprosto "umetnost". Poleg tega lastna preglednost PNG omogoča enostavno ustvarjanje posameznih datotek, ki delujejo na katerem koli ozadju. PNG ponuja binarno preglednost, kot je GIF, ponuja pa tudi veliko bolj zaželeno možnost alfa, pri kateri so slikovne pike lahko delno pregledne, ne pa samo vklopljene ali izklopljene. Uporaba slednjega poveča velikost datoteke, včasih celo več kot GIF z binarno prosojnostjo, omogoča pa izravnavo robov slike in jo naredi bolj elegantno pri prekrivanju ozadja.

Vendar sem njihov koncept predelal z belo sliko s šablonskimi simboli. Na prozornem ozadju so uporabili bel simbol, ki bi bil praviloma lahko zelo učinkovit. V tem primeru se vaša barva ozadja CSS prikaže na kvadratnem ali pravokotnem območju okoli simbola, namesto na samem simbolu.

Tako Dan kot PJ sta namesto PNG uporabila prozoren GIF. To je v celoti pokrivalo njihove potrebe in morali so ustvariti slike pikslov za slog ikon. Z uporabo PNG lahko dobite podobno tehniko, vendar z določeno superiornostjo v obliki izravnave in delne preglednosti za uporabo v podrobnejših ikonah.

V redu, ampak v katerih brskalnikih deluje?

Vem, o čem razmišljate: vsa ta prosojnost PNG izgleda dobro, a je praktična?

Dobra novica je, da vsi sodobni brskalniki v celoti podpirajo slike PNG, vključno s prosojnostjo alfa, katere prednosti sem prikazal v primerih. Safari (vse različice), Firefox (vse različice), Opera (različice 6 in novejše), Netscape (različice 6 in novejše) in Mozilla (vse različice) bodo storile vse, kar od njih zahtevam. A obstaja ena slaba novica - edini brskalnik, ki ga še nisem omenil in ki ga ima večina vaših uporabnikov: Internet Explorer.

Internet Explorer 6 in starejši ne podpira preglednosti alfa kanalov, vdelane v format PNG. Odkar je bila izbira (ali ne) brskalnika sprejeta za večino številnih spletnih deskarjev, ta zevajoča luknja odvrne spletne oblikovalce od PNG-ja. Toda z izdajo Internet Explorerja 7 smo v vseh večjih brskalnikih dobili popolno podporo za transparentnost PNG alfa. Kaj sledi, ali obstajajo načini za delo s preglednostjo PNG alfa v Internet Explorerju 6 in starejših? Torej, če želite uporabiti ta učinek, vas nič ne bo ustavilo. Internet Explorer 6 in njegove zgodnje različice zahtevajo več kot dovolj pozornosti, vendar je vsekakor mogoče.

Hack Internet Explorerja: AlphaImageLoader

Internet Explorer ima različne lastne filtre. Uporabljajo se v CSS, vendar niso del uradne specifikacije CSS. Z drugimi besedami, v spletu niso standardizirani. Na žalost Internet Explorer 6 in starejši ne podpirajo v celoti formata PNG (kar priporoča W3C), Microsoft ima filter, ki odpravlja to napako: AlphaImageLoader.

Glede na razdelek na Microsoftovi uradni spletni strani AlphaImageLoader "prikazuje sliko znotraj meja predmeta in med ozadjem predmeta in njegovo vsebino." Z drugimi besedami, AlphaImageLoader naloži sliko PNG s polno preglednostjo, vendar jo naloži kot svojo plast, pod katero je vsebina predmeta, na katerega je nanesen. Tako naložene slike PNG delujejo bolj kot slike v ozadju kot slike v ospredju (čeprav dejansko sedijo na ozadju predmeta).

V bistvu lahko samo uporabite AlphaImageLoader v CSS na img elemente in uživate v rezultatu. Slika se najprej naloži, prosojnost ostane, nato pa se slika ponovno naloži - kot sprednja vsebina predmeta - z neprozornimi območji (s čimer se "zasenči" vaša pregledna različica).

Prosojnega PNG-ja ne morete uporabiti kot sliko ozadja CSS za element (X) HTML (recimo za

) in pričakujte, da bo AlphaImageLoader opravil delo v Internet Explorerju, kot mora. Ne pozabite, da AlphaImageLoader vstavi vašo sliko med ozadje in ospredje predmeta. Torej, medtem ko bo vašo sliko naložil v vsej svoji prozorni sijajnosti, jo bo še naprej nalagal kot sliko ozadja CSS in brez vaših čudovitih prosojnih pik.

Resnična uporaba AlphaImageLoader

Vrnimo se k enemu od prejšnjih primerov in ga poskusimo pravilno naložiti v Internet Explorer. Se spomnite 49. kanala, televizijske postaje v Topeki? Prepričan sem - da. Slika 5-21 prikazuje, kako je spletno mesto videti v Internet Explorerju 6.

Slika 5-21
Glava 49abcnews.com, upodobljena v Internet Explorerju 6 za Windows s nedotaknjeno preglednostjo PNG.

Videti je, da ste verjetno že uganili HTML za zgornji odsek, povezan z vremenom:

Trenutno v Topeki, KS:
82 ° oblačno
Pridobite napoved in še več ...

Sliko vidite, vsekakor pa je PNG, celo Internet Explorer jo naloži brezhibno. Skrivna sestavina tega je JavaScript. Pravzaprav sem uporabil nekaj skriptov DOM, da sem sproti odstranil element img in ga nadomestil z elementom div, ki - uganili ste - uporablja AlphaImageLoader. JavaScript je opisan v pogojnih komentarjih, še enem priročnem, a povsem nestandardnem Microsoftovem idiomu, vgrajenem v Internet Explorer. Pogojni komentarji omogočajo uporabo kode samo za znano različico Internet Explorerja. Vsi ostali brskalniki ignorirajo kodo, zato na noben način ne vpliva nanjo. V elementu na spletnem mestu www.49abcnews.com boste našli:

Zahvaljujoč prvi vrstici, če je lte IE6, bo ta skript vključen v upodobljeni dokument le, če je v različici Internet Explorerja manjši ali enak (to je označeno z lte) 6. Vsi drugi brskalniki, vključno z novo prispeli Internet Explorer 7, bo to popolnoma prezrl ...

Kaj je torej v datoteki JavaScript fixWeatherPng.js? Oglejmo si:

Window.attachEvent ("onload", fixWeatherPng); funkcija fixWeatherPng () (var img \u003d document.getElementById ("weatherImage"); var src \u003d img.src; img.style.visibility \u003d "skrit"; var div \u003d document.createElement ("DIV"); div.style. filter \u003d "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", velikost \u003d" lestvica ")"; // Nekateri stili CSS za 49abcnews.com so izpuščeni za kratkost. img.replaceNode (div); )

Po korakih analizirajmo, kaj počne skript. Najprej brskalniku povemo, da želimo izvršiti funkcijo fixWeatherPng, ko se stran naloži. Preostali del skripta je sama funkcija.

Za začetek najprej iščemo sliko, s katero bomo delali po njenem atributu id in jo shranili v spremenljivko img. Atribut src (URL do slikovne datoteke) shranimo v spremenljivko src. Nato element img skrijemo tako, da lastnost vidnosti CSS nastavimo na skrito.

Na koncu zamenjamo prvotni element img (ki je skrit) z novo ustvarjenim elementom div, na katerega je uspešno pritrjen AlphaImageLoader.

Uporaba skriptov DOM za vstavljanje AlphaImageLoaderja - filtriranje bitov sproti - ima svojo težko, a nujno stran - nepravilen CSS. Poleg tega bodo zunaj vašega (X) označevalnika HTML nesemantični elementi div. In čeprav je vse to opisano v pogojnih komentarjih, ni nobene možnosti, da bi Microsoftova koda poškodovala druge brskalnike. (handyblogger: Jeff tukaj poskuša prefinjeno pokazati na Microsoftovo "okorno" rešitev)

Če morate narediti kaj narobe, ga lahko vsaj izvlečete in obdržite ločeno od vsega drugega, kjer ni potrebno.

V priporu

PNG kot grafična oblika ponuja številne tehnične prednosti poleg tistih, ki se pogosto uporabljajo v GIF. Pravzaprav so prednosti tako velike, da bi lahko PNG že davno prevladoval kot grafični format, ki ni povezan s foto slikami. Nezadostna podpora Internet Explorerja za nekatere pomembnejše funkcije PNG, na primer preglednost alfa, je posledično odvrnila številne spletne razvijalce. Obstajata pa dva zelo dobra razloga, zakaj se PNG ne bi morali bati.

Prvič, tudi Internet Explorer 6 in starejše različice skoraj v celoti podpirajo PNG na način, ki ga lahko GIF (z izjemo animacije, seveda). PNG skoraj vedno prikazuje manjše velikosti datotek, kar omogoča hitrejši prenos in manjšo porabo virov.

Drugič, Internet Explorer 7 ponuja popolno podporo za transparentnost PNG alfa. Učinki, ki jih lahko dosežemo s celotno lestvico prosojnih možnosti, so tako rekoč neomejeni. Pričakujem, da bodo oblikovalci, ki najdejo zanimive načine za uporabo prosojnice PNG, na primer tiste, opisane v tem članku, odprli vrata na novo raven sloga, kakršne še nismo videli. Dal sem vam nekaj koristnih idej, kaj lahko ustvarite s preglednostjo PNG, vendar se pri tem ne ustavite. Poiščite se sami!

Izvleček iz ustvarjalnosti spletnih standardov Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin in Rob Weychert; objavili prijatelji ED. Avtorske pravice Jeff Croft 2007. Uporablja se z dovoljenjem Apress, Inc.