PNG Graphics...
 

So how come more designers do not export their graphics in PNG format? It has a superior transparency implementation and supports 24 bit color which allows for great high-color graphics and yet, it is often the same size or smaller than boring old GIF format.

Give us administrators a choice and create transparent PNGs as well as GIFs please.

There was a time when I thought GIF was going to be extinct due to patent issues...

Probably due to the lack support in Internet Explorer and although there are people are using alternative browsers Internet Explorer still holds the majority

Yea, there are serious problem with IE and .png format ( this can be fixed by an hack by OblivionKnight :)..I know my hacks xD )




~Curt

Well once IE7 is offically released and a lot more people start upgrading we won't have a problem very often with inproper png support, but that's a couple years down the road.

Has MS committed to improving PNG support in IE7 yet? I don't recall seeing any mentions of it yet.... would be good if they did, that way I can switch to transparent PNGs instead of transparent GIFs.

Not sure if they've committed to improving PNG support, but I downloaded the IE7 beta the other day. The browser itself has a long way to go before it's ready for prime time. I'll stick with Linux and Opera thankyouverymuch. :D

About 4 months ago.

http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx

Anyway, it isn't really a hack, to implement PNG transparency. It is a function that was passed off to DirectX in IE 5.5 for better implementation and to show off other filter capability. Internet Explorer for Macintosh and Unix machines supports PNG transparency natively. I use PNG files for all the post icons and smilies on community site and they look just fine in Internet Explorer 5.5 and 6.0.

All Oblivian Knight's hack does is apply the filter of which instructions have been on the MSDN site for 5 years.

Even with that PNG is a far superior graphic format and yet designer's rely on GIF. Not even matted JPEGs which provide a much better graphic quality. With all the hype on OS X and its PNG driven interface, you would think it would have more acceptability.

Thanks for the link, interesting reading.


... except that the page has to load first until the backgrounds appear correct. While the page loads the backgrounds appear with the wrong color and then after loading they become transparent.

I'm all too well familiar with the hack. The problem is that I (and most others I know) have absolutely no interest in having to rely upon somebody doing a hack/patch to have their graphics display properly in the most common browser.

Because it's still a universal format. Every browser out there can reliably show the same thing with a GIF.

Like Erwin mentioned, when the UniSys patents about GIF came up I was expecting alternate formats like PNG and Jpeg-2000 to get more exposure.

This is often the case, the "most popular" is not always the most superior (remember Betamax v VHS ?). Everyone knows about .gifs, they are universally supported.

In my experience, PNG's often take longer to load and are usually bigger in filesize than JPG's and GIF's and so they never really became used on any great scale until recently, now that we have these super speed connections (mine's being upgraded to 10MB soon - thanks Blueyonder!).

This may not be the case for everyone though.. :)

Na pngs can be similar in size when on the same color level because they range from the lowest levels to the highest of 24bit true color

PNGs, even without transparency, do not render correctly in IE. Their color palettes are slightly off (darker, if I remember correctly). A shame because the PNG format is superior to others in terms of its functionality with alpha blending.

I'm doing most of my graphics in PNG format, since for gradients they compress the best in my optimization ware. It'll take a 1KB gradient image and reduce it down to under 200 bytes (in full True Color), for example.

I'll wait to use alpha channeled PNGs, as those files tend to be larger -- and my goal is to give better visual quality at lower file sizes (to save on the bandwidth bill). Just easier to make specific icons and use them (considering how small they are, it takes really no disk space).

Chris

I would use PNG in vB... BUT!

Everything in vB is .gif.... for example find "forum_link.gif" and rename it to "forum_link.png" within vbulletin (the code/templates) and repeat that process about 200 times for all the vB graphix and your done!

-b6

Have you tried a replacement variable?

yes, but there's gonna be heavy template chages throughout, hardly the speedy, quick and efficient solution

-b6

So change the templates then..... I was only offering a solution. :ermm:

Some format changes (like the collapse icons) require editing a js file, not only the template. vB still has hardcoding of images/padding/dimensions. It's why if the stylesheet is missing, you can still see the forum alignment, despite no images/background colors.

So editing the images from gif to png in vBulletin still requires more than simple template redesigning.

Chris

I am fully aware of the goals of the vbulletin-css.com team. ;)

A screen shot of just 1 minute ago, of the hardcoding in even in vBulletin.org's forums (and when the CSS doesn't load).

Both sites are suffering some DNS glitches now. :(

Chris

PNG is great for quality and transparency. To be honest, i only use GIFs because of habbit. However, PNGs are perfect for logos and such. Also, you have to be careful and make sure that PNG is well supported by ALL browsers.

If a banner logo has gradients, PNG is the best format to use as the file sizes are incredibly smaller.

Have a gradient for the tcat and thead, and it can shrink from over 1KB down to 200bytes, for example. On banner logos, what can go for 25KB in GIF format, can be shrunk to 10KB (with text!).

It's one of the reasons, if you're a savvy admin, you'd at least switch over to PNG for the little background images.

Chris

For those who are not familiar with PNGs, just look at my sig lol.