If you want a transparency for web, GIF is your only option. PNG transparencies aren’t supported in Internet Explorer without a "tweak", which means that all your visitors would have to have this tweak installed.
IMO, it is rare that one really needs a transparency – you are far better off making the background of your image match the background of your web page and save as a JPG.
Amy,
You can’t have true translucency with web graphics. Without using applets, Java Script etc. you can only make an image look translucent.
To do this you will need to include the background image or color in the pill image. Otherwise you end up with a white background and that wouldn’t look very good. You should only use GIF or JPG’s for web pages if you want full compatibility.
Great article Trevor. And a great set of workarounds for the issue. Of even greater benefit (to me) was the petition to Micorsoft.
Trevor,
Nice article. But I wouldn’t use PNG’s on ANY client site. I definitely wouldn’t use them on any of my sites. I think the GIF header on their own page shows how much faith they have in using PNG’s.
I do think it would be great if PNG’s were supported by a higher percentage of the browsers out there, but looking at the stats shows me that there are a lot of people with outdated hardware and software.
Until something changes on the internet that forces everyone to upgrade their software I will continue to use absolute alignments and include the necessary portions of the background in the image that needs to appear translucent.
Photo Help:
That’s a fair and conservative approach, but I think it depends upon your audience. For example, on my site, I use PNGs and plan (at some point) to convert all remaining GIFs to PNGs (if it results in a smaller file size – as I am an optimization nut), but then again, I expect my target audience to be mostly graphic geeks with somewhat recent software. By somewhat recent, I am implying IE5+, Mozilla, NN6+, Opera 5+, etc., with Javascript enabled; plus at 1024×768, 8-bit RGB (i.e., 24-bit) display.
However, when designing client sites (home or work), I always figure out their needs, infrastructure, target audience, software, etc., before making any decisions about how the site will be composed.
Trevor,
Yes it does depend on audience. I know you are happy with PNG’s so this is more for other people contemplating a switch…
Keep in mind that the only windows supported browsers are Netscape 6, Opera 6, and recently-released Mozilla 1, IE 5.5+ on Windows. Macs still have many unsupported browsers floating around out there.
I know several people personally that are still on dial-up that don’t feel like waiting to download an updated version. Many using IE 4 or 5 and Netscape 4.7.
It is your site and you should do with it what you want. I like very optimized sites as well and I don’t know why you want to use PNG for optimization. Granted I don’t use them so maybe I am not as familiar with the optimization techniques for PNG’s as I am on JPG’s and GIF’s but in the tests I have done I get smaller files using GIF’s and JPG’s than I would if I used PNG’s.
Even if you can get the files smaller it wouldn’t be by much and ironically the same people that would benefit from the smaller size are the same people that don’t upgrade to the newest browser. I just like as many people as possible to see it the way I intended for it to be seen. I don’t want someone to look ant an image that should fade at the edges and see a hard edged out of place boxy image.
Granted saving money on bandwidth costs is another reason for optimization, but most of my sites don’t come close to hitting the quotas.
Photo Help:
I’m not arguing with you, I agree with you. I was only elaborating 🙂
And in fact, I too am on dial-up, which is why I am so interested in optimization. I can empathize with those who suffer through slow connections because I am one of them!
As for PNG optimization, in about 80% of circumstances, (indexed) PNG is roughly 15 – 25% smaller than the equivalent GIF. But, it is no substitute (at all) for JPG.
Anyway, I am not saying PNG is better or anything like that, I am only trying to share the facts and answer questions.
As Tony would say: Peace 😉
Trevor,
I know you aren’t arguing 🙂 I just thought I would put more info out for the benefit of others that might not understand all the ramifications.
There is one question I have though. Could you please tell me under what circumstances PNG’s are smaller than GIF’s or post some examples. I have done several tests and found that 256 color GIF’S are about 6% smaller and 4 color GIF’s are about 25% smaller.
If I fill the entire background with a gradient the file size of the PNG is smaller by about 2% than a GIF with the same settings, but I still have the option to use the lossy setting and make the file about 70% smaller than the PNG. On the images with that many colors I would use a JPG anyway unless it needed to be animated or transparent.
Based on my tests the only advantage I see with PNG is the multiple levels of transparency.
Note: I used Save For Web. I only tested about 10 files of differing sizes and color depths. The percentages varied from test to test but PNG never once output a file smaller than the GIF or JPG I used.
Again, not arguing I just want to know if you believe I am doing something wrong?
Photo Help:
Have a read through this article <
http://www.apcmag.com/apc/v3.nsf/0/037E66E85A5453DACA256D440 01A3D67>. It discusses the features and benefits of PNG.
Also, what are you using to save PNGs, just the SFW plugin? I really recommend using SuperPNG <
http://www.fnordware.com/> as it uses a larger buffer to create smaller files (or something like that – perhaps Chris will come along and correct my terminology on this one). It also adds support for 16-bpc PNGs, meta information, etc.
I’ll also see if I have a few minutes this weekend to do a few unbiased samples for you, but in the mean time, here are several examples of how PNG compression stacks up to GIFs. It is worth noting as well that images with diagonal patterns tend to produce smaller file sizes when saved as a GIF.
Trevor,
Thakns for the article. I will read it when I get a chance. I do like the lossless qualities of the format. It gives the option of putting high resolution images on the web for download while allowing anyone to be able to view them. Something you don’t get by using TIF’s.
I was just using Save For Web or Image ready. I can see how another program could do a better job. You don’t need to waste your time doing samples unless you want to. I just knew I wasn’t seeing the kind of results you were 🙂
SuperPNG is not another program, but rather a free plugin for Photoshop to replace the current PNG plugin.
