vbulletin Basic Icons exported to png 8-bit format

For those not familiar with it, PNG was originally conceived as a replacement for the Compuserve GIF format in the mid-90's. Although the default Adobe Fireworks file format, PNG is also readable by most browsers. Unlike GIF, PNG preserves the opacity of the images - PNG's do not suffer from the halo effect.

There are three flavors of PNG - PNG8, PNG24 and PNG32. Of these PNG32 is the most widely known about. Unfortunately PNG32 images are not read correctly by Internet Explorer 6 or earlier when they have an alpha channel. The resulting gray box effect is quite ugly to look at and has lead to most developers staying away from PNG altogether.

HOWEVER, PNG8 doesn't have this problem. IE 6 and even 5.5 for mac will read these files correctly and preserve their opacity setting. Further, older browsers that can read PNG (most IE 4 or later, Netscape 4 or later) at all will simply drop the colors in the palette with an alpha setting if they don't understand it, otherwise they treat PNG8's as gif files.

The upside of this is the PNG8 files can be read by all browsers. PNG8 is also the lost format of the Internet because, interestingly, only one graphics package will save a file in PNG8 -- Fireworks (and it's done so since at least version 4). Further PNG8 files are considerably smaller than PNG32 files and for small images or images without a wide range of colors PNG32 offers no real advantage over this lost format.

With that long introduction over, the fileset of this modification simply presents all standard vbulletin icons saved in PNG8 with their alpha settings saved. You need only edit the templates of your board changing any pointer to .gif to .png. I haven't tried it, but you should be able to do a find and replace in templates and replace all instances of .gif with .png (BACKUP YOUR TEMPLATES BEFORE DOING THIS).

[Dr. Bantham]

I am having trouble with the PNG images displaying on FORUMHOME. Though the new PNG variants display within the legend at the bottom of the page (e.g. forum_new.png, forum_old.png), the images within the forum list are the old GIF versions (e.g. forum_new.gif, forum_old.gif). I have confirmed that the appropriate templates refer to the PNG files.

[Michael Morris]

Originally Posted by Dr. Bantham

I am having trouble with the PNG images displaying on FORUMHOME. Though the new PNG variants display within the legend at the bottom of the page (e.g. forum_new.png, forum_old.png), the images within the forum list are the old GIF versions (e.g. forum_new.gif, forum_old.gif). I have confirmed that the appropriate templates refer to the PNG files.

You sure? There are 5 templates here that all much change. FORUMHOME (the legend is near the bottom of the template) forumhome_level1_post, forumhome_level1_nopost, forumhome_level2_post, forumhome_level2_nopost.

If you are unsure of the template responsible go to vbulletin options and in general settings turn on "Display template name in html comments" This will put the template names in the output code so you can see which template needs to be altered.

[Zachery]

If PNG8 doesn't have alpha transparency, why bother using them?

[Dr. Bantham]

Originally Posted by Michael Morris

You sure? There are 5 templates here that all much change. FORUMHOME (the legend is near the bottom of the template) forumhome_level1_post, forumhome_level1_nopost, forumhome_level2_post, forumhome_level2_nopost.

If you are unsure of the template responsible go to vbulletin options and in general settings turn on "Display template name in html comments" This will put the template names in the output code so you can see which template needs to be altered.

Thanks for pointing out the templates. I had searched and replaced forum_new.gif (etc.) with png file variants Though this worked for FORUMHOME, forumhome_level1_post and forumhome_level2_post were referencing the files as variables ($forum[statusicon].png). It was a quick fix once I knew where to look.

[Zachery]

For anyone who will use this, I suggest my mod.

https://vborg.vbsupport.ru/showthrea...=141493&page=2

[mikeroq]

You can choose between PNG-8 and PNG-24 in Photoshop.

[racechick20]

Michael, off topic slightly but I just wanted to say thanks! Finding this and your wonderful explaination has helped me out of a sticky situation. I had 3 part stretching PNGs w/ partial transparency between my forums and I was horrified when I learned that older browsers could see the ugly grey area. Understanding this stuff enabled me to re-export the images as PNG8 using Paint Shop Pro 9.

Just in case it may help someone else down the line - export > PNG Optimizer > Palette based w/ Optimized Octree > set transparency. It works a treat - the drop shadows went a little wierd but it works with the styling I have used. Thanks again! :up: