32bit PNG veebis

32bitised PNG pildid veebis

Üsna ammu on kasutatud läbipaistva värviga GIF pilte, et teha ümaraid nurki ja logosid, mis sobivad automaatselt iga taustavärviga. Viimasel ajal on populaarsust kogumas failiformaatn PNG ehk Portable Network Graphics, mis muuhulgas toetab ka 32bitist läbipaistvust. See tähendab, et üks piksel ei ole enam kas täiesti läbipaistev või täiesti läbipaistmatu, vaid läbipaistvus võib varieeruda 256 astmes ja igas värvis, mis võimaldab palju ilusamat graafikat veebilehtede kujundamisel kasutada.

Samas, Microsoft Internet Explorer versioonid 6 ja vanemad ei toeta, kahjuks, 32bitilist PNG faili täies ulatuses - nende brauseritega sama lehekülge vaadatates näidatakse läbipaistva tausta asemel hallikat tooni. Microsoft on pakkunud välja küll tülika häki sellest probleemist mööda saamiseks, kuid miks selle realiseerimine on jäetud webmasteri õlule, mitte pole brauseris juba eos rakendatud, ei oska autor kommenteerida. Hea on see, et MSIE uusimas versioonis 7 on see viga parandatud.

Kuna MSIE on ikkagi levinuim brauser maailmas, on tulemus see, et veebikujundajad on sunnitud loobuma ilusate 32bitiliste PNG piltide kasutamisest ja valima kas 24-bitised fikseeritud taustavärviga pildid (mis juhul tuleb veebilehe tausta muutmisel ka pilt ümber teha) või kasutama indekseeritud PNG või GIF läbipaistvust, mis tähendab, et pildi kvaliteedis on kõvasti kaotatud.

Serveripoolne lahendus brauseri tuvastamise kaudu

Lisaks ülalviidatud häkile, mis nõuab kliendi brauseris javascripti olemasolu, on veel üks võimalus: näidata vanemates MSIE versioonides indekseeritud PNG'd ja ülejäänud brauserites 32bitilist kõrgkvaliteetset pilti.

Selleks on vaja asendada pildi URL lingiga näiteks PHP (või muus keeles) skriptile, mis suudab tuvastada kliendi brauseri versiooni ja näidata sellele sobivat pilti.

Näide PHP varal

Järgnev skript tuvastab esmalt, kas veebikülastaja kasutab probleemset brauserit ning seejärel, sõltuvalt vajadusest, näitab kas 32bitist või indekseeritud png pilti.

Kuna turvalisuse huvides ei ole hea mõte faili asukohta parameetrina ette võtta, siis saab sellist skripti kasutada vaid näiteks väheste logode näitamiseks. Alternatiiv on GET parameetrina ette anda näiteks järjekorra number erinevate piltide hulgast valimiseks või näiteks ainult pildi nime osa, mille alusel kombineeritakse kogu pildi asukoht failisüsteemis, et pahalastel ei oleks võimalik selle skripti abil piltide asemel hoopis näiteks paroolifaile õngitseda. Sellise lahenduse realisserimise jätab autor aga lugeja hooleks.

 <?php
 // Kust kaustas pilte hoitakse
 $images_dir = "images";
 
 // mis on logo faili põhinimeks
 $logo_file="logo";
 
 // kui näidatakse indekseeritud pilti, siis see muutuja täidetakse suffiksiga '_indexed',
 // mis lisatakse põhinime lõppu
 $indexed_suffix = "";
 
 // Kontrollime, kas tegu on probleemse brauseriga
 if (strpos($_SERVER['HTTP_USER_AGENT'],"MSIE") !== false && strpos($_SERVER['HTTP_USER_AGENT'],"MSIE 7") === false){
   // seame failinime suffixi
   $indexed_suffix = "_indexed";
 }
 
 header('Content-Type: image/png');
 readfile("$images_dir/$logo_file$indexed_suffix.png");
 ?>

--Laas 5. märts 2007, kell 12:13 (EET)