PNG si deshifrim. Çfarë është PNG? Formati png çfarë është, veçoritë e formatit ku përdoret

Kur bëhet fjalë për krijimin e imazheve për ueb dhe përdorime të tjera dixhitale, cilat formate skedarësh mund t'ju ofrojnë rezultatet më të mira? Duhet të mendoni për shpejtësinë kundrejt cilësisë dhe madhësisë së imazhit. Pra, çfarë duhet të përdorni: SVG, PNG ose JPG?

Kishte një kohë kur thjesht përdore JPG për të përshtatur hapësirën 72dpi dhe për të vazhduar përpara. Jo më. Ekranet me rezolucion të lartë, portat e shumëfishta të shikimit dhe nevoja për një faqe interneti të shpejtë e bënë të gjithë një proces shumë më të vështirë. Le të hedhim një vështrim në të mirat dhe të këqijat e secilit prej këtyre formateve!

SVG

SVG ose i shkallëzuar siç qëndron Grafika vektoriale, tepër praktike. Kjo është arsyeja pse dizajnerët e përdorin këtë format më shpesh.

Meqenëse SVG është formati vektorial, duket e mrekullueshme në çdo madhësi dhe funksionon për pothuajse çdo lloj imazhi përveç fotografisë.

SVG është një format pa humbje, që do të thotë se nuk humbet asnjë të dhënë kur kompresohet, shfaq një numër të pakufizuar ngjyrash dhe përdoret më së shpeshti për grafika dhe logot në ueb, si dhe për projektet që do të shikohen në Retina dhe të tjera të larta. -ekranet me rezolucion.

Të mirat e SVG

Formati vektor jepet mirë në çdo madhësi
Aftësia për të krijuar rendere të thjeshta SVG në kod ose redaktues teksti
Dizajnoni dhe eksportoni grafika komplekse nga Adobe Illustrator ose Sketch
Teksti SVG disponohet
SVG është e lehtë për t'u stiluar dhe shkruar
Formatet SVG mbështeten nga shfletuesit modernë dhe janë prova për të ardhmen
Formati është shumë i kompresueshëm dhe i lehtë
I mirë për kërkim për shkak të formatit të tekstit
Mbështetje për transparencë
Ju lejon të ruani imazhe të palëvizshme ose të animuara

Disavantazhet e SVG

Dizajni SVG mund të komplikohet
Nuk shfaqet në disa shfletues të vjetëruar
Mbështetje e kufizuar për klientët me email

Imazhi PNG

PNG, ose Portable Network Graphics, është një format i krijuar për ueb që ofron atë që JPG nuk mund - transparencën. Kjo është arsyeja pse PNG është kaq popullor për ngarkimin e elementeve të tilla si logot për dizajnet e faqeve në internet.

Ekzistojnë dy lloje të PNG-ve - PNG-8 dhe PNG-24. PNG-8 përdor një gamë ngjyrash më të kufizuar prej vetëm 256 ngjyrash, ka transparencë pak më të mirë dhe eksportohet në jo madhësi të madhe... PNG-24 përdor një gamë ngjyrash të pakufizuar, mbështet transparencën, por eksportohet në një madhësi të madhe. Të dy llojet PNG kanë kompresim pa humbje.

Megjithëse formatet PNG janë të ngjashme me GIF, ato nuk mbështesin animacionin. Ky format përdoret më së shpeshti për ikona, imazhe të vogla statike ose çdo imazh që ka nevojë për transparencë.

Të mirat e PNG

Mbështetje për transparencë
I përshtatshëm për imazhe me tekst
Formatet PNG i japin logot mirë
Përfshin përshkrimin e tekstit në linjë për motorët e kërkimit
PNG-8 ka një madhësi të vogël skedari dhe është më i lehtë
Eksporto pa skaje të dhëmbëzuara

Disavantazhet e PNG

Madhësitë e skedarëve rriten shpejt për skedarë të mëdhenj siç janë imazhet
Disa klientë të vjetër të postës elektronike kanë probleme me paraqitjen e tyre
Asnjë animacion
Skedarët PNG-24 mund të jenë të mëdhenj, gjë që nuk është shumë e mirë dhe e përshtatshme për t'u ndarë në internet

Jpeg

JPG ose JPEG është ndoshta formati më i famshëm i imazhit. Ky është parazgjedhja për shumicën e imazheve, sepse është i dobishëm për fotografitë falë ekranit të tij pothuajse të pakufizuar me ngjyra.

JPG ofron gjithashtu mundësinë për të zgjedhur se si imazhi duhet të kompresohet nga 0% (ngjeshje e fortë) në 100% (pa kompresim). Shumica e stilistëve zgjedhin diçka në intervalin 60 deri në 70 përqind. Imazhet ende duken mirë në këtë nivel kompresimi, por madhësitë e skedarëve janë dukshëm më të vogla.

JPG përdor kompresim me humbje dhe nuk i mbështet të dhënat origjinale gjatë kompresimit. Sa herë që një foto riruhet dhe eksportohet në formatin JPG, ajo degradon.

Formati JPG përdoret më së shpeshti për imazhe, fotografi dhe çdo gjë që ka një numër të madh ngjyrash.

Të mirat e JPEG

E shkëlqyeshme për fotografim me ngjyra dhe fotografi
Zvogëloni lehtësisht madhësinë e skedarit
Shfaqet vazhdimisht në klientët e postës elektronike

Disavantazhet e JPEG

Asnjë transparencë
Krijon skaje të dhëmbëzuara për tekstin
Asnjë animacion
Format i humbur
Meta të dhënat automatike për kërkimet nuk duhet të përmbajnë informacion alt

Cilin format duhet të përdorni?

Tani që e dini se cilat janë disa nga ndryshimet midis SVG, PNG dhe JPG, cilin duhet të përdorni?

Ju mund t'i bëni vetes disa nga pyetjet e mëposhtme për të marrë një përgjigje për këtë.

Keni nevojë për vektor apo format bitmap?

Vektori: SVG

Raster: JPG ose PNG

Keni nevojë për transparencë?

Po: SVG ose PNG

A po përdorni një imazh me shumë ngjyra?

Po: JPG ose PNG

A është kjo një foto e madhe?

A përmban imazhi tekst?

A është e rëndësishme për ju kompresimi pa humbje?

Po: SVG ose PNG

A duhet të përditësoj dhe rikonfiguroj grafikën?

Jo: PNG ose JPG

A po përdorni animacion?

Jo: JPG ose PNG

Prodhimi

Të tre formatet e imazhit - SVG, PNG dhe JPG - kanë përdorime praktike dhe të përhapura. Ndërsa SVG është formati më i ri dhe shpesh mund të ruhet në madhësinë e tij më të vogël të skedarit, nuk është gjithmonë opsioni më i mirë.

Mendoni se si i përdorni imazhet në projektin tuaj, si zgjidhni llojin e skedarit për të gjetur atë që funksionon më mirë për atë që po përpiqeni të arrini. Ju madje mund të zbuloni se disa projekte përmbajnë imazhe duke përdorur të tre llojet e skedarëve. Kjo në fakt ndodh mjaft shpesh!

Gjithë punë të suksesshme dhe kreativitet!

Skedari PNG është në formatin Portable Network Graphics. Formati përdor kompresim pa humbje dhe përgjithësisht konsiderohet si një zëvendësim për formatin e imazhit GIF. Sidoqoftë, ndryshe nga skedarët GIF, skedarët PNG jo mbështet animacionin. Megjithatë, ekziston një format shumë i ngjashëm MNG (Multiple Image Network Graphics), por ky format nuk ka fituar aq popullaritet sa skedarët GIF ose PNG.

Skedarët PNG shpesh përdoren për të ruajtur grafika në faqet e internetit. Disa sisteme operative si macOS dhe Ubuntu ruajnë pamjet e ekranit në formatin PNG si parazgjedhje.

Një përdorim tjetër i PNG është kur pjesët e një imazhi duhet të jenë transparente, gjë që mund të jetë e dobishme kur krijoni ilustrime, dizajnoni një faqe interneti, krijoni një fotografi, etj. Për shembull, nëse keni një logo që dëshironi të vendosni mbi një foto, është shumë më e lehtë të "preni" logon, duke lënë pikselë transparentë rreth saj në mënyrë që kur vendoset mbi një imazh tjetër kjo është imazhi ishte i dukshëm përmes transparencës.

Si të hapni një skedar PNG

Si të konvertoni një skedar PNG

Ka të ngjarë që çdo konvertues i skedarëve të imazhit me të cilin punoni të jetë në gjendje konvertoni skedarin PNG në një format tjetër(p.sh. ICO, GIF, BMP, TIF, etj.). Disa konvertues PNG në internet si FileZigZag dhe Zamzar mund ta trajtojnë këtë po aq lehtë.

Një variant tjetër Konvertimi i skedarit PNG- përdorni një nga shikuesit e imazheve që përmenda më parë. Edhe pse ato ekzistojnë kryesisht si "hapëse" për lloje të ndryshme imazhesh, disa prej tyre mbështesin ruajtjen / eksportimin e një skedari të hapur PNG në një format tjetër imazhi.

Kur të përdorni skedarët PNG

Skedarët PNGËshtë një format i shkëlqyer për t'u përdorur, por jo domosdoshmërisht në çdo situatë. Ndonjëherë PNG mund të jetë shumë i madh dhe jo vetëm të zërë hapësirë të panevojshme në disk ose ta komplikojë atë, por gjithashtu mund të ngadalësojë ndjeshëm një faqe interneti nëse e përdorni atje. Pra, ka disa gjëra që duhen mbajtur parasysh përpara se të konvertoni të gjitha imazhet tuaja në PNG (mos e bëni këtë).

Kur mendoni rreptësisht për madhësitë e skedarëve PNG, duhet të merrni parasysh nëse përfitimet e cilësisë së imazhit janë mjaft të mira për të sakrifikuar hapësirën (ose ngarkimin e ngadaltë të faqeve në internet, etj.). Që nga skedari PNG jo ngjesh imazhin siç bëjnë formatet e tjera me humbje si JPEG, cilësia nuk ulet aq shumë kur imazhi është në format PNG.

Skedarët JPEG janë të dobishëm kur imazhi ka kontrast të ulët, por PNG-të janë më të mirë kur keni të bëni me kontrast të mprehtë, si p.sh. kur imazhi ka vija ose tekst, ose zona të mëdha me ngjyra të forta. Kështu, pamjet e ekranit dhe ilustrimet ruhen më së miri në formatin PNG, ndërsa fotografitë "reale" ruhen më mirë në formatin JPEG / JPG.

Ju gjithashtu mund të konsideroni përdorimin e PNG mbi JPEG kur keni të bëni me një imazh që duhet të modifikohet vazhdimisht. Për shembull, meqenëse formati JPEG i nënshtrohet të ashtuquajturit humbja e gjeneratës, redaktimi dhe ruajtja e skedarit vazhdimisht rezulton në degradim të cilësisë së imazhit me kalimin e kohës. Kjo nuk është e vërtetë për PNG pasi përdor kompresim pa humbje.

Ndihmë shtesë me skedarët PNG

Për ta bërë sfondin transparent në formatin PNG, mund të përdorni mjete automatike si Clipping Magic, një mjet falas për heqjen e sfondit ose pothuajse çdo program për modifikimin e imazheve.

Për shembull, nëse keni Photoshop, vendosni imazhin në shtresën e vet, hiqni shtresën e sfondit dhe më pas përdorni çdo mjet (si Eraser, Marquee, Lasso) për të fshirë pjesë të imazhit që duhet të jenë transparente.

PNG (Portable Network Graphics), e theksuar "ping", është një format bitmap për ruajtjen e informacionit grafik duke përdorur kompresim pa humbje. PNG u krijua për të përmirësuar dhe zëvendësuar GIF me një format grafik pa licencë. PNG është një standard ndërkombëtar (ISO IEC 15948: 2003) dhe rekomandohet zyrtarisht nga W3C.

Ruan formatin PNG informacion grafik në formë të ngjeshur. Për më tepër, ky kompresim kryhet pa "humbje", ndryshe nga, për shembull, JPEG standarde (madje edhe me nivelin më të lartë të cilësisë).

Formati PNG është krijuar për të zëvendësuar formatin më të vjetër dhe më të thjeshtë GIF, dhe në një farë mase për të zëvendësuar formatin shumë më kompleks TIFF.

Nëse po flasim për dizajnin e uebit, atëherë në krahasim me GIF ka përparësitë kryesore të mëposhtme:

Kompresim i përmirësuar: Në shumicën e rasteve, madhësia Imazhet PNG. më i vogël se GIF.
- Më shumë ngjyra në imazh: Numri pothuajse i pakufizuar i ngjyrave në imazh, ndërsa kufiri për GIF është 256.
- Mbështetje opsionale për kanalin alfa: Ndërsa GIF mbështet vetëm transparencën binare, PGN ju lejon të arrini një numër të pakufizuar efektesh transparence përmes mbështetjes për kanalin alfa.

Si një disavantazh, natyrisht, vlen të përmendet mungesa e mbështetjes për animacion, si GIF. Megjithëse, natyrisht, ekziston një standard i ngjashëm për animacionin i quajtur Grafika e Rrjetit me Shumë imazhe (MNG), ai nuk është i përhapur dhe, në përputhje me rrethanat, nuk mbështetet gjerësisht nga shfletuesit modernë.

Formati i imazhit PNG është një nga më të njohurit dhe u ofron përdoruesve të ruajnë imazhe të kompresuara pa humbur cilësinë e tyre. PNG përdoret më së shumti për redaktim grafik ose në internet. Më pas, ne do të shikojmë disa mënyra të thjeshta me të cilat mund të hapni një skedar të këtij formati në kompjuterin tuaj.

Ekzistojnë disa metoda të ndryshme për hapjen e skedarëve PNG për shikim dhe redaktim. Thjesht duhet të ndiqni udhëzimet e mëposhtme dhe nuk do të jetë e vështirë të hapni imazhin.

Metoda 1: Shikuesit e imazhit

Në internet ka shumë redaktues grafikë dhe softuer special për shikimin dhe modifikimin e imazheve. Ata u ofrojnë përdoruesve një numër të madh funksionesh dhe mjetesh, gjë që e bën procesin e punës me fotografi sa më komode. Le të shohim procesin e hapjes së një imazhi PNG duke përdorur shembullin e programit GIMP:

Nëse GIMP për ndonjë arsye nuk ju përshtatet, ju sugjerojmë që të njiheni me listën e plotë të programeve për shikimin e imazheve në artikullin tonë në lidhjen më poshtë. Aty do të gjeni patjetër diçka të përshtatshme.

Në rastin kur kërkohet të kryhen manipulime të ndryshme me imazhin e hapur, përdorni specialin redaktorët grafikë me funksionalitet të zgjeruar dhe një numër të madh mjetesh të ndryshme. Ju mund të mësoni më shumë rreth tyre në artikullin tonë në lidhjen më poshtë.

Metoda 2: Mjet standard i Windows

Në të gjitha versionet e funksionimit Sistemet Windows ka një shikues imazhi të integruar. Mund të përdoret gjithashtu për të hapur skedarë PNG. Le të hedhim një vështrim më të afërt në këtë proces:

Nëse keni nevojë që të gjitha imazhet PNG të hapen përmes një shikuesi standard Fotot e Windows, ndiqni këto hapa:

Tani, si parazgjedhje, të gjithë skedarët PNG do të hapen me mjet standard duke parë foto. Për të ndryshuar programin në hapje, thjesht ndiqni të njëjtat hapa duke zgjedhur një softuer tjetër.

Në këtë artikull, ne kemi trajtuar në detaje mënyra të thjeshta hapja e imazheve PNG. Siç mund ta shihni, në këtë proces nuk ka asgjë të komplikuar, dhe gjithçka bëhet fjalë për fjalë në disa hapa.

Për më tepër, të qenit një format falas PNG ofron avantazhe të ndryshme praktike ndaj GIF për dizajnerët e uebit:

Kompresim më i mirë: Për shumicën e imazheve, PNG arrin një madhësi skedari më të vogël se GIF
Thellësi e madhe ngjyrash: PNG ofron ngjyra të vërteta deri në 48-bit, ndërsa në GIF kemi vetëm gamë ngjyrash 256
Transparenca e kanalit alfa: Kur GIF ofron vetëm transparencë binare, PNG lejon efekte pothuajse të pakufizuara transparence, duke ofruar një kanal alfa për transparencë

Është me vend të theksohet se PNG nuk lejon animacion siç bën GIF. Por ekziston një standard i Grafikës së Rrjetit me Shumë imazhe (MNG) që e lejon këtë, por ai nuk mbështetet gjerësisht nga shfletuesit e uebit dhe redaktuesit grafikë.

Pra, pse GIF është ende kaq popullor?

Me siguri po pyesni veten pse PNG nuk përdoret aq gjerësisht në ueb, nëse është aq i mirë sa reklamohet. Përgjigja është, në pjesën më të madhe, keqkuptime në lidhje me formatin dhe mbështetjen e shfletuesit për të.

Për arsye të Internet Explorer 6 dhe më shumë versionet e hershme nuk e mbështesin gamën e plotë të aftësive PNG (përfshirë transparencën e kanalit alfa), njerëzit lihen të besojnë (megjithëse kjo nuk është e vërtetë) se Internet Explorer nuk mbështet fare PNG, ose të paktën nuk mbështet transparencën. Në fakt, Internet Explorer 5 dhe 6 mbështesin mjaft specifika PNG, duke e bërë atë funksionalisht ekuivalent (ose më shumë) me imazhet GIF jo të animuara. Të gjithë shfletuesit e tjerë të referuar, duke përfshirë Firefox, Netscape 6 dhe më lart, Mozilla, Opera 6 dhe më lart, Safari dhe Camino, mbështesin plotësisht transparencën PNG.

Përveç këtij keqkuptimi për mbështetjen e integruar të shfletuesit Animacion GIF ishte (dhe vazhdon të jetë) arsyeja kryesore e suksesit të saj. Megjithëse, me kalimin e viteve, përdorimi i GIF është bërë gjithnjë e më pak i popullarizuar në krahasim me teknologjitë e tjera (për shembull Flash), të cilat po bëhen më të përshtatshme për animacion.

Transparenca është një karakteristikë kryesore e GIF dhe PNG dhe shpesh është arsyeja pse një dizajner ueb zgjedh cilin format të përdorë. Ndërsa PNG ofron mbështetje më gjithëpërfshirëse të transparencës, dizajnerët e uebit shpesh duhet të krijojnë versione GIF të imazheve për t'iu përshtatur shfletuesve më të vjetër. Duke përdorur CSS është e mundur (dhe disi e çuditshme) duke dërguar imazhe GIF për shfletues të vjetër dhe PNG me cilësi të lartë te shfletuesit që i kuptojnë ato. Por kjo është një punë e dyfishtë për një dizajner ueb dhe si rezultat njerëzit shkojnë me më pak rezistencë dhe vazhdojnë të përdorin imazhe GIF.

Pra, ne kemi mbuluar disa arsye pse GIF është ende kaq popullor, por shumica e tyre bazohen në një keqkuptim të koncepteve ose duke përdorur një skenar të njohur pune. Të armatosur me disa njohuri kyçe të PNG dhe se si mund të përdoret me besueshmëri nëpër shfletues, ju jepet mundësia të përfitoni nga të gjitha përfitimet që ofron.

Po në lidhje me JPEG?

JPEG është një tjetër format web i kudogjendur dhe në shumicën e rasteve si fotografitë (apo të tjera si ato) është edhe më i mirë se PNG ose GIF. PNG nuk ka për qëllim të konkurrojë me JPEG. Kompresimi JPEG i bën skedarët në madhësi shumë më të vogla se PNG kur punoni me foto. Nga ana tjetër, PNG prodhon skedarë më të vegjël kur teksti, linjat artistike, logot, ngjyrat "madje" etj. janë të pranishme brenda imazheve.

Disa shembuj të shkëlqyer të përdorimit të PNG të përulur

Tani le të hedhim një vështrim se si të përdorim PNG-të në dizajnin e uebit. I kam mbledhur të gjithë skedarët për secilin shembull në një dosje të veçantë të disponueshme për miqtë e ED.

Gradient

Gjatë viteve të fundit, gradienti - një tranzicion i qetë midis dy ose më shumë ngjyrave - është bërë miku më i mirë i një web-dizenjuesi. Veçanërisht të njohura janë mbushjet delikate dhe delikate të gradientit, të cilat krijojnë pa vëmendje një ndjenjë thellësie dhe teksture.
Ndonjëherë GIF është zgjidhja më e mirë për një gradient. Nëse gradienti është një tranzicion i thjeshtë me dy ngjyra, GIF funksionon pa të meta. Megjithatë, kufizimi i GIF-it në vetëm 256 ngjyra shpesh krijon "bandim" të dukshëm dhe të ngathët midis tranzicioneve më komplekse të gradientit. JPEG, nga ana tjetër, mund të prodhojë gradient mjaft të rregullt, por shpesh me koston e një madhësie më të madhe skedari. Ndërsa gradientët JPEG janë përgjithësisht mjaft të mirë, mbani mend se JPEG përdor kompresim me humbje, që do të thotë se imazhi që rezulton nuk do të jetë kurrë aq i mirë sa i pakompresuar.

Stili tipik i gradientit të sfondit në fjalë përdoret për butona, kuti ose kudo tjetër. Mund të duket si Figura 5-1. Në drejtim të akrepave të orës nga këndi i sipërm i majtë, ne shohim imazhin origjinal (të pakompresuar), versionin GIF, versionin PNG dhe JPEG. Ju mund të shihni se PNG është madhësia më e vogël (515 byte) në rezultat. Kjo është katër herë më e vogël se një imazh GIF. JPEG është pak më i madh se PNG me 637 bajt, dhe është gjithashtu më i ulët në cilësi për shkak të kompresimit me humbje (megjithëse syri i njeriut është në gjendje të përcaktojë ndryshimin në cilësi në këtë shembull i thjeshtë mbetet e hapur për pyetje).

Figura 5-1
Paneli i Photoshop-it - Ruaj Për Web,
duke treguar ndryshime në madhësinë e skedarit për të njëjtin imazh në formate të ndryshme

Një imazh që duhet të funksionojë në çdo sfond

Ndonjëherë është e nevojshme të krijohet një imazh që funksionon njësoj në nënshtresa të ndryshme. Disa shembuj të zakonshëm janë logot dhe ikonat. Në situata të tilla, skedarët GIF kanë dominuar tradicionalisht, por ka disa arsye pse PNG mund të jetë një zgjedhje më e mirë në këtë situatë. PNG në përgjithësi fiton në madhësinë e skedarit për logot ose çdo "art" tjetër të thjeshtë. Përveç kësaj, transparenca e natyrshme e PNG bën krijimi i thjeshtë skedarë të vetëm që funksionojnë në krye të çdo sfondi. PNG ofron transparencë binare si GIF, por gjithashtu ofron një opsion alfa shumë më të dëshirueshëm, në të cilin pikselët mund të jenë pjesërisht transparentë, në vend që thjesht të jenë të ndezur ose të fikur. Përdorimi i kësaj të fundit rrit madhësinë e skedarit, ndonjëherë edhe më shumë se një GIF me transparencë binare, por lejon anti-aliasing në skajet e imazhit tuaj dhe e bën atë më elegant vendosjen mbi sfond.

Megjithatë, unë ripërpunova konceptin e tyre duke përdorur një imazh të bardhë me simbole stencil. Ata përdorën një simbol të bardhë sfond transparent, e cila, si rregull, mund të jetë mjaft efektive. Në këtë rast, ngjyra juaj e sfondit CSS do të shfaqet në një zonë katrore ose drejtkëndore rreth simbolit, në vend të vetë simbolit.

Si Dan ashtu edhe PJ përdorën GIF transparente në vend të PNG. Kjo mbuloi plotësisht nevojat e tyre dhe ata duhej të krijonin imazhe pixel për stilin e ikonave. Duke përdorur PNG, mund të arrini një teknikë të ngjashme, por me njëfarë epërsi në formën e transparencës anti-aliasing dhe të pjesshme për përdorim në ikona më të detajuara.

Mirë, por në cilët shfletues funksionon?

E di se çfarë po mendoni: e gjithë ajo transparencë PNG duket e mirë, por a është praktike?

Lajmi i mirë është se të gjithë shfletuesit modernë mbështesin plotësisht imazhet PNG, duke përfshirë transparencën alfa, përfitimet e së cilës i kam treguar në shembuj. Safari (të gjitha versionet), Firefox (të gjitha versionet), Opera (versionet 6 e lart), Netscape (versionet 6 e lart) dhe Mozilla (të gjitha versionet) do të bëjnë gjithçka që unë u kërkoj të bëjnë pa zhurmë. Por ka një lajm të keq - i vetmi shfletues që nuk e kam përmendur ende dhe që shumica e përdoruesve tuaj e kanë: Internet Explorer.

Internet Explorer 6 dhe më poshtë nuk mbështet transparencën e kanalit alfa të ngulitur në formatin PNG. Që kur zgjedhja (ose jo) e shfletuesit u bë për shumicën e shfletuesve të shumtë të internetit, kjo vrimë e hapur i ka mbajtur dizajnerët e uebit larg nga PNG. Por, me lëshimin e Internet Explorer 7, ne morëm mbështetje të plotë për transparencën alfa PNG në të gjitha shfletues të rëndësishëm... Çfarë është më tej, a ka mënyra për të punuar me transparencën alfa PNG në Internet Explorer 6 dhe më poshtë? Pra, nëse dëshironi të përdorni këtë efekt, asgjë nuk do t'ju ndalojë. Internet Explorer 6 dhe versionet e tij të hershme kërkojnë më shumë se mjaftueshëm vëmendje, por është padyshim e mundur.

Hakimi i Internet Explorer: AlphaImageLoader

Internet Explorer vjen me filtra të ndryshëm më vete. Ato përdoren në CSS, por nuk përbëjnë asnjë pjesë të specifikimit zyrtar të CSS. Me fjalë të tjera, ato nuk janë të standardizuara në ueb. Fatkeqësisht Internet Explorer 6 dhe më poshtë nuk e mbështesin plotësisht formatin PNG (i cili rekomandohet nga W3C), Microsoft ka një filtër që eliminon këtë të metë: AlphaImageLoader.

Sipas një seksioni në faqen zyrtare të Microsoft-it, AlphaImageLoader "shfaq një imazh brenda kufijve të një objekti dhe midis sfondit të një objekti dhe përmbajtjes së tij." Me fjalë të tjera, AlphaImageLoader ngarkon një imazh PNG me transparencën e tij të plotë, por e ngarkon atë si shtresën e vet, poshtë së cilës është përmbajtja e objektit ku është aplikuar. Imazhet PNG të ngarkuara në këtë mënyrë veprojnë më shumë si imazhe të sfondit sesa imazhe në plan të parë (edhe pse në fakt ato qëndrojnë në krye të sfondit të objektit).

Në thelb, thjesht mund të aplikoni AlphaImageLoader në CSS në elementët img dhe të shijoni rezultatin. Imazhi do të ngarkohet së pari, transparenca mbetet, por më pas imazhi do të ngarkohet përsëri - si përmbajtja e përparme e objektit - me zona të errëta (duke "hijezuar" kështu versionin tuaj transparent).

Ju nuk mund të përdorni një PNG transparente si një imazh të sfondit CSS për një (X) element HTML (të themi për

) dhe prisni që AlphaImageLoader ta bëjë punën në Internet Explorer ashtu siç duhet. Mos harroni se AlphaImageLoader fut imazhin tuaj midis sfondit dhe planit të parë të objektit. Pra, ndërsa do të ngarkojë imazhin tuaj në të gjithë lavdinë e tij transparente, do të vazhdojë ta ngarkojë atë si një imazh të sfondit CSS, dhe pa pikselët tuaj të mrekullueshëm të tejdukshëm.

Përdorimi real i AlphaImageLoader

Le të kthehemi te një nga shembujt e mëparshëm dhe të përpiqemi ta ngarkojmë saktë në Internet Explorer. Ju kujtohet Channel 49, stacioni televiziv në Topekë? Jam i sigurt - po. Figura 5-21 tregon se si duket faqja në Internet Explorer 6.

Figura 5-21
Titulli 49abcnews.com i dhënë në Internet Explorer 6 për Windows me transparencë PNG të paprekur.

HTML për seksionin kryesor të lidhur me motin duket sikur mund ta keni marrë me mend:

Aktualisht në Topeka, KS:
82 ° I vranët
Merrni parashikimin dhe më shumë ...

Ju e shihni imazhin dhe është padyshim një PNG, madje edhe Internet Explorer e ngarkon atë në mënyrë të përsosur. Përbërësi sekret për këtë është JavaScript. Unë në fakt përdora pak skriptim DOM për të hequr elementin img në lëvizje dhe për ta zëvendësuar me një element div që - e keni marrë me mend - përdor AlphaImageLoader. JavaScript përshkruhet brenda komenteve të kushtëzuara, një tjetër idiomë e dobishme, por plotësisht e pa standardizuar nga Microsoft e integruar në Internet Explorer. Komentet e kushtëzuara ju lejojnë të përdorni kodin vetëm për një version të njohur të Internet Explorer. Kodi është injoruar nga të gjithë shfletuesit e tjerë, kështu që nuk i prek ata në asnjë mënyrë. Në element faqen e internetit www.49abcnews.com, do të gjeni:

Falë rreshtit të parë, nëse lte IE6, ky skrip do të përfshihet në dokumentin e dhënë vetëm nëse shfaqet në versionin e Internet Explorer më pak se ose e barabartë me (kjo tregohet me lte) 6. Të gjithë shfletuesit e tjerë, duke përfshirë Internet Explorer 7 i sapoardhur, do ta injorojë plotësisht këtë ...

Pra, çfarë ka në skedarin JavaScript fixWeatherPng.js? Le t'i hedhim një sy:

Window.attachEvent ("onload", fixWeatherPng); funksioni fixWeatherPng () (var img = document.getElementById ("weatherImage"); var src = img.src; img.style.visibility = "i fshehur"; var div = document.createElement ("DIV"); div.style. filtër = "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", madhësia = "shkallë")"; // Disa stile CSS specifike të 49abcnews.com janë hequr për shkurtësi. img.replaceNode (div); )

Le të analizojmë hap pas hapi se çfarë bën skenari. Së pari, ne i themi shfletuesit që duam të ekzekutojmë funksionin fixWeatherPng kur faqja të ngarkohet. Pjesa tjetër e skenarit është vetë funksioni.

Për të filluar, së pari ne kërkojmë një imazh me të cilin do të punojmë sipas atributit të tij id dhe do ta ruajmë atë në ndryshoren img. Ne ruajmë atributin src (URL në skedarin e imazhit) në variablin src. Më pas e fshehim elementin img duke vendosur veçorinë e dukshmërisë CSS në hidden.

Ne përfundojmë duke zëvendësuar elementin origjinal img (i cili është i fshehur) me një element div të sapokrijuar, të cilit AlphaImageLoader është bashkangjitur me sukses.

Përdorimi i skriptimit DOM për të futur AlphaImageLoader-in tuaj - filtrimi i copave në lëvizje - ka anën e tij të vështirë, por të nevojshme - CSS e pasaktë. Për më tepër, jashtë shënjimit tuaj (X) HTML do të ketë elemente div josemantike. Dhe ndërsa e gjithë kjo përshkruhet brenda komenteve të kushtëzuara, nuk ka asnjë shans që shfletuesit e tjerë të korruptohen nga kodi i Microsoft. (handyblogger: Jeff po përpiqet të nxjerrë në pah zgjidhjen "e ngathët" të Microsoft këtu)

Nëse duhet të bëni diçka të gabuar, të paktën mund ta nxirrni dhe ta mbani të ndarë nga çdo gjë tjetër aty ku nuk është e nevojshme.

Në paraburgim

PNG, si një format grafik, ofron shumë përparësi teknike përtej atyre që përdoren zakonisht në GIF. Në fakt, përfitimet janë aq të mëdha sa që PNG mund të kishte dominuar shumë kohë më parë si një format grafik që nuk lidhet me imazhet e fotografive. Mbështetja e pamjaftueshme nga Internet Explorer për disa nga veçoritë më të rëndësishme PNG, të tilla si transparenca alfa, ka frenuar shumë zhvillues ueb si rezultat. Por ka dy arsye shumë të mira pse nuk duhet të keni frikë nga PNG.

Së pari, edhe Internet Explorer 6 dhe versionet e mëparshme pothuajse plotësisht mbështesin PNG në mënyrën që mundet GIF (me përjashtim të animacionit, sigurisht). PNG pothuajse gjithmonë tregon madhësi më të vogla skedarësh duke lejuar shkarkime më të shpejta dhe më pak përdorim të burimeve.

Së dyti, Internet Explorer 7 ofron mbështetje të plotë për transparencën alfa PNG. Efektet që mund të arrihen me gamën e plotë të opsioneve të tejdukshme janë praktikisht të pakufishme. Pres që dizajnerët që gjejnë mënyra interesante për të përdorur transparencën PNG, si ato të përshkruara në këtë artikull, të hapin derën për një nivel të ri stili të paparë më parë. Unë ju kam dhënë disa ide të dobishme se çfarë mund të krijoni me transparencën PNG, por mos u ndalni me kaq. Kërkoni për veten tuaj!

Fragment nga Web Standards Creativity nga Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin dhe Rob Weychert; postuar nga miqtë e ED. E drejta e autorit Jeff Croft 2007. Përdoret me leje nga Apress, Inc.