Web Graphic Transparency Tutorial – GIF and PNG
As far as I know there are only two types of images on the web that support transparency: GIF and PNG. GIF being the one that has been supported the longest is the widest and probably most accepted form of transparency that doesn’t require and fancy css work or hacks. Transparent PNGs still require either of those two solutions if you want PNG transparency in IE6. I personally prefer to use PNG if I can, but if that’s the case, you’re alienating those silly people still using IE6, and your page probably takes forever to load.
Introduction to Transparent PNGs and Transparent GIFs
If you’re looking for a good example of transparent GIFs on a non-repeating background look no further than on this blog and on Assault Shirts. The logo on the top left is a transparent gif with a light gray matte, and the black image at the bottom is another transparent GIF with a light gray matte. Both are low in file size and it’s almost impossible to tell that it’s a transparent GIF.
Now, I could have used PNG and it may have looked smoother, but the file would be about four times as large–and I’d have to have some special CSS and a unique identifier for the image so that IE6 would properly display the transparency. The other issue is that the PNG has to be 24 bits and that means it’s going to be HUGE in file size. Images as large as the ones on the Assault homepage need to be small for those days we get WOOTed and are at risk of crashing our server. They also need to be small so that all those people still on dial up (who are still potential customers) don’t go running for the hills when a page doesn’t load right away.
Transparency in Action
Here’s an example of a transparent PNG and a transparent GIF as you can see the PNG looks much better as it’s quite clear that the semi-transparent parts of the GIF look flat because they have the light gray matte behind them as opposed to the PNG version because it supports gradual transparency unlike GIF.
28kb GIF
You can see where the mask is and where there are transparent parts of the image. There’s no real gradual transparency like you’ll see in the PNG. If you have an image that has sharp edges though a GIF will look real good and will be very small in file size unlike the PNG:
88kb PNG!!
The PNG looks much better, but is nearly 4x the size. It’s the best looking but the trade off besides the size factor is that it isn’t supported in all web browsers. Here are the settings I used for each of these two files when I used the Save for Web & Devices command:
Downsides to PNG Transparency
I’m not entirely sure what the non transparency will look like if you don’t use the CSS or javascript hack to use PNG transparency in IE6, but I have a feeling it would look something like this:
You can workaround this shortcoming using some fancy css:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
or some fancy javascript:
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
Unfortunately, this at times can take awhile to load and effects the overall performance of your webpage. Another downfall is that if you’re a W3C junky, like I am, and want all your code to validate–it simply won’t because there’s no such CSS “Filter” class. It was added by Microsoft later.
There are several other pitfalls to this such as not being able to repeat background images that have transparrency, and there are also many other workarounds using javascript that have been developed that you can find over at the 24 ways blog post about Transparent PNGs in IE6.
Conclusion
On our website we use almost exclusively GIF files because they are so much smaller in file size. If you have large graphics that you need a gradual transparency with then you can use PNGs, but you’ll have to add a few lines of invalid CSS or some javascript to get them to show up properly. You’ll also have to deal with a bit of a slower loading time. So make sure to ask yourself what do you really want to sacrifice in order to make your website look good? We found a way to do it with GIFs on Assault Shirts, and I think in the interest of time for you and your users it may be the best answer still until all those slow pokes stop using IE6 and below.
Other Notes
- A List Apart has a great article on PNG Transparency that everyone should read
- Dylan Points out that I forget 8 bit PNGs which can be better than GIF at times, but still suffer from some of the same shortcomings as 24 bit PNGs which are not supported in IE6 without some significant hacks.
- Ralph points out a site I completely forgot about that takes screen captures of your blog in different browsers: Browser Shots
- Clark also points out that 8 bit PNGs are better than GIFs and are supported in IE6 – Not sure if it’s true, but he sounds like he knows his stuff!
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
[...] 6 with the exception of using a quite handy (yet at times tricky) png transparency workaround. My next tutorial will be on transparency, and when it’s better to use PNG vs GIFs for transparency. For now let’s just say that [...]
PNG has an 8-bit format as well that you fail to mention. It is that format that is best suited to go up against GIF files. (24-bit PNG files are more suited towards photos, and generally compete with JPG). I have many cases where a PNG file was smaller than the equivalent GIF file
Like the css hack, thanks. Kind of off-topic but does anyone have any good pointers or links to demos for creating favicons with true transparency? Seems like folks have it figured out from favicons I’ve seen but with all the apps and tutorials I’ve tried I end up with non anti-aliased transparency when I save the ico file. Help!
Nice overview Tim,
Good you mention that 8-bit PNGs are better compressed than GIF. Overall your decision that it’s overall more economical to stick to GIF is slightly coloured (haha) by the fact that your site graphics are entirely monochrome, and the transitions don’t work so roughly. When you have one colour above an indeterminate other, transparent GIFs edges will look nasty.
@Invisible,
You want to save your alpha favicon as a simple 24-bit PNG, and then use conditional comments to render it only on non-IE browsers*. Conditional comments are perfectly valid HTML, it’s just that their functionality isn’t recognised by W3C or standard browsers — but that’s not a practical or philosophical problem at all unless you’re actually emotionally in love with W3C as a human being.
However if that’s the case, you can always use server-side code to sniff for the browser, and then serve code respectively.
For everything ancient else, you’ll just have your standardised .ico GIF-formatted favicon.
* The everything-except IE conditional comments work as follows:
Content here
<!–
You can create a separate stylesheet for IE and use <!– [if lte IE6] –> and it will validate.
you can get an idea how your png will look in any browser at this site:
browsershots.org
nice tut btw.
The Gif has 16 colors.
what would be the size of it was 65k?
also, the size difference vs the quality of the gif is well worth it, as the gif looks like garbage if you spend over 2 seconds looking at it.
8bit pngs do not require any hacks in IE 6
they only support one transparent color, not alpha transparency like the 24bit
8bit pngs beat the pants off of gifs every single time
@Barney, looks like the code snippet never made it through but you got me on the right track thanks!
I cannot actually read your tutorials, ironic that you did another (possibly good?) tut on tiling backgrounds and failed to consider what you are putting on top of it.
Sort it out guy so I can enjoy your stuff.
AP
I find the quality of a PNG file far more better then GIF.
But it is sometimes a real pain in the … to make it compatible with IE6 or some other IE6 look alike browsers
[...] can use transparent GIFs, but as we covered in our web graphic transparency article you’ll find that they’re not nearly as flexible, and they don’t support gradual [...]
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(“onload”, correctPNG);
save js file -> pngfix.js
One thing that has been and, to my knowledge, still remains an issue is the fact that IE 7+ cannot properly render .png alpha. It renders it slightly darker than the exact same image in .gif or .jpg. This is not visible in photoshop for example, but is in the browser. This becomes a real issue for those with mixed file types. Your only option in that case is to convert all your files to .png! This issue is a real hinderance, as gifs are not able properly render more intricate gradual transparencies. Fingers crossed for a fix.