Digital Web Magazine

The web professional's online magazine of choice.

Creative Use of PNG Transparency in Web Design : Comments

By Jeff Croft

May 28, 2007

Comments

Nikita

May 29, 2007 12:32 AM

Great article, beauty examples, big thnx

Luke Stevens

May 29, 2007 2:50 AM

Wow, what a comprehensive article! I did something subtle with the header & lead photo on your.sydneyanglicans.net. I think its a neat effect and look forward to seeing more of it :)

Matt

May 29, 2007 3:07 AM

Great article! I’ll be using PNG’s alot more now. I have used this method to fix IE in the past The easiest way to PNG. Looking at the code it seems to use the same method. Thanks!

Sushi Shibata

May 29, 2007 3:44 AM

Nice article! I always had problems with colors not matching up with backgrounds and such. Found out it was due to embedded gamma metadata in the PNG, as described in this article. The article states caveats and workarounds for the PNG color issues. Oh, and apparently PNG is correctly pronounced “ping”, in English at least. :)

Craig Buckler

May 29, 2007 3:55 AM

Nice summary of PNG usage.

However, rather than using PNGs for translucent HTML overlays, I’d recommend using an HTML element with a color background that has transparency applied. That is supported in some browsers with the CSS3 ‘opacity’ setting. It can also be done in script, which would be necessary for IE anyway.

That way, there’s no graphic to create and you can change the color or the amount of transparency very easily.

Dimitri Glazkov

May 29, 2007 4:36 AM

Nice article. One other use of PNG transparency is subtle color correction. Take a look at this site: http://antarctica.uab.edu/

The photos from Flickr are given a PNG overlay, which has a slight blue tint (and a semi-vignette), which makes the colors fit better with the site’s color scheme.

Scott

May 29, 2007 6:24 AM

Nice write-up. I first began experimenting with PNG transparencies with my CSS Zen Garden entry. The effect produced by the combination of the fixed positioning and the PNG is pretty unique.

My main problem with the PNG format has been that colors do not match cross-browser. I’ll check out the article that “Sushi” linked to in his comment to see if I can fix that problem.

laura

May 29, 2007 7:13 AM

I use PNGs whenever possible for file size reasons, but if you need a script to use PNG transparencies on IE 6 and below (let’s face it, most users haven’t updated to IE 7) then it negates the benefits in terms of accessibility. I look forward to more users switching to IE 7, but until that’s a majority, I won’t be using PNGs with transparencies.

Nico

May 29, 2007 7:26 AM

I have to admit I’m afraid of PNGs because of IE6. I have use the AlphaImageLoader filter for some sites, and once even a javascript that automatically fixes any PNG found on the code (wich turned out to be a bad idea, as the site was a blog where the owner added some bookmark icons on the bottom of each post, all PNGs, causing a long delay on the page load time).

I’d love to use transparent PNGs for page content background, setting it as a background image for a div with a repeat-y, but a) I’m not sure if the AlphaImageLoader filter works when the PNG is used as a CSS background, and b) I’m afraid that since the image is repeated several times it could cause a long delay on the page load time. Has anyone tried this?

By the way, about non-matching colors, it’s because some browsers use gamma correction for PNGs (more info). I use a neat app called GammaSlamma, wich removes the Gamma info making all browsers display the same colors. It’s OS X only, but I’m sure there has to be something similar for Windowa out there.

Sean

May 29, 2007 7:37 AM

@laura

I would bet that the majority of the visitors to your site do use a browser capable of handling PNG transparencies.

I just added up all of my users over the last three weeks that used IE6 or lower as well as the ones that used IE7 or any other browser. 45.7% are using the former, where as 54.3% are using the latter. And this is a federal government website that is not geared toward the early adopters for web technologies.

I know that 54.3% is a slim majority, and certainly not big enough to abandon the other users yet. But remember, just because IE6 is the biggest number doesn’t mean its the majority of your visitors.

Anthony Brewitt

May 29, 2007 7:51 AM

PNG’s are a fantastic file format I have been using them ofr years and also have a web design blog which uses its transparency properties to great effect. The format is of usch a high quality I nearly leave all my projects in the format now.

Jonathan E

May 29, 2007 8:20 AM

First off, this is a great article by Jeff that not only covers a lot of the technology, but provides several real-world examples which are all great. Over a year ago I wrote and article on my site about Using Transparent PNG Images in Internet Explorer a while back, but the method I use doesn’t require any JavaScript.

I think it’s important to point out that the method in Jeff’s article won’t work if a user has JavaScript turned off, but the method I’ve described on my site will. I’m also using conditional comments to make sure that the only invalid CSS that gets used goes to IE 6 (and lower) only.

Thanks again Jeff for such a good article.

macgregor

May 29, 2007 8:36 AM

Great article Jeff -I’ve been following your blog and reading your comments and opinions in a lot places I frequent for years now. Thanks for your insight and examples on using PNGs. I have run into the same colour matching / gamma problems when using PNGs with css background colours — will check out the resources above but would love to learn more about squashing those gamma problems. One of the designers I work with switched to gifs for a site I’ve been working on because the colours in the PNGS did not match on Safari and Firefox.

Kristin Pishdadi

May 29, 2007 9:16 AM

Great writeup Jeff. The icons is something I would have never thought of.

Phil Freo

May 29, 2007 10:11 AM

Jeff,

Great article… very well written! I’ve never considered using PNGs as image masks before. That’s a great idea.

Phil

John Lascurettes

May 29, 2007 10:36 AM

I found by repeating your four-up example of the graded button background that I achieved the smallest file size without noticeable artifacts with JPG followed by PNG and finally GIF. PNG and JPG were close, but JPG was still significantly smaller at a setting without any detectable image quality loss.

For those that are afraid to use PNG because of IE6’s lack of support, know that it’s in dealing with PNGs with alpha transparency only that you need to fall back to the proprietary Windows properties. PNG-8 only supports 2-bit alpha channels as GIF does and as far as I know, IE can handle that. The savings you can collectively make with the PNG-8 images over GIF in file size are worth it. Also note that PNG-8 is a lossy format just as GIF is, but it compresses better and renders faster.

Now, that said… Can anyone recommend a better PNG-24 maker than Photoshop’s built in engine? It seems to make much large images than JPG and is only worth doing if the alpha transparencies are what you’re after. Is it because PNG-24 is not a lossy format that it can’t compete with JPG in image size; or is it Photoshop’s implementation of it (which is what I remember reading somewhere)?

PS: and to echo what others are saying, remember to strip out the Gamma metadata that some PNG makers will automatically insert into the images, especially if you’re trying to match an image to a background color.

Jimmy

May 29, 2007 12:16 PM

You forgot to mention that firefox’s PNG rendering doesnt precisely match real color. For example, create a PNG image that is solid baby blue. Then put it on a page with that same hex color BG and watch the colors not match. :(

Justin

May 29, 2007 12:35 PM

Fireworks has great support for exporting to PNG. A lot of people get confused with this because PNG is also the native format (that stores layer information, animation frames, etc.) that Fireworks uses. I often come across websites using PNGs that are actually FW source files (usually indicated by a larger filesize).

I’ve found that Photoshop tends to bloat the size of PNGs it produces for some reason (maybe because they weren’t exported via ImageReady)? I’m not 100% sure since I don’t use PS much, but I’ve come across 16×16 PNG32 icons produced in PS that are over 35KB. When re-exported via Fireworks, they come out at only a few hundred bytes.

I often use PNG Behavior originally created in 2003 by Erik Arvidsson. It’s an IE specific HTC file that you can apply via CSS. I use it by applying a ‘.png’ css class to PNGs that use transparency, otherwise the script can cause a hit on page load time (since it loops through all images). There are a few issues with it and I see there is an improved version that solves a few issues with printing.

Jeff Croft

May 29, 2007 1:37 PM

Hey guys — thanks for all the great comments. Color matching with PNGs can indeed be an issue, and perhaps it should have been mentioned in the chapter (I felt it was out of scope since this chapter was mostly about transparency, but perhaps I should have reconsidered).

As others have said, the color-matching issues are a result of gamma metadata that some apps embed into PNGs and some browsers read and use. In other words — it’s a feature, not a bug. :) It’s actually a pretty simple issue to deal with if you know it exists and know how to deal with it. The links that have already been posted here are great — check ‘em out.

Also, people keep referring to this as an “article,” which is is here at Digital-Web. But I just wanted to say for the record that it is actually a chapter of a book, Web Standards Creativity, published by Friends of ED. So, if you liked it, be sure to grab the whole book — it’s chock full of these types of chapters by really great web designers and authors. :)

Thanks again, everyone!

Brian Artka

May 29, 2007 2:00 PM

great chapter Jeff. I have not gotten to reading the book yet, but this came at a good time because I am starting a project that will be utilizing the gingeroot technique you turned into wonderful CSS. I now know where to flip to =) thanks!

Damien

May 29, 2007 4:30 PM

Absolutely fantastic article Jeff – I just finished chapter 1 of WSC and finding it a great read! Everyone else here, go buy it right now, you wont be disappointed.
I’ve used the alpha image loader before but only in limited use and would never have thought of using the DOM to do it on the fly. This is going to be hugely helpful!

Deny Sri Supriyono

May 29, 2007 7:13 PM

i love the mask and the watermark ideas :)

i did play with PNG for my portfolio site and it was fun.
it shows great on IE6 with IE PNG Alpha Fix.

great article, jeff :)

Geoff

May 29, 2007 7:34 PM

You can use PNGs in CSS backgrounds, but:
1. it only works on elements with a set width
2. you can set the image to scale to the element size, or to be cropped, but you can’t use repeat or background position
3. any nested elements can lose their ‘clickability’. You need to add ‘position:relative’ to any children of the element.

Faridur Rahman Choudhury

May 29, 2007 10:35 PM

We can achieve IE6 support without using Javascript, provided we use the PNG as a background image in CSS.

For browsers supporting PNG AlphaTransparency #container{ background:url(“CurveBox.png”); }

For IE6 and below * html #container{ background:url(“blank.gif”); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=“CurveBox.png”, sizingMethod=“image”); }

Michael Peo

May 30, 2007 1:26 AM

Scott Schiller has made a nice demonstration of the use of transparent pngs. Shillers post is actually about rounded corners, but his demonstration makes clever(?) use of translucent png images.

Matthew Jeffryes

May 30, 2007 3:13 AM

In your watermark example, doesn’t using transparent PNGs remove the point of a watermark. If user can just grab the picture from the page without watermark, what’s the point of using a watermark in the first place?

Jeff Croft

May 30, 2007 6:28 AM

Matthew: You’re assuming the watermark is for some kind of protection. That’s not the point, here. The point is simply a visual effect. The term “watermark” doesn’t imply privacy or security — that’s only one use for a watermark; there are many more. :)

Ben

May 30, 2007 6:44 AM

Good article, I’ve done the rounded corners and tabs with PNG but I’ve never even thought about using PNG’s as a punch-out to make icons in combination with the background. Going to spend the next few days going over my sites to see if there’s anything I did one way that some clever PNG’s could do better.

Also, for consideration in the program to use discussion, GIMP does a great job making PNG’s, even getting smaller file sizes than JPEG on photo’s. It’s just not as easy to use as Fireworks or Photoshop. (I actually do about 80% of my work in Fireworks then finish it in GIMP and compress it then)

K

May 30, 2007 11:09 AM

PNG and transparency is great, but for some uses you might as well do the transformation server side. For a web shop, it would be very simple to generate a price sticker and put it over a product image.

You should of course cache the result, so that the script doesn’t have to do anything if the image exists :-)

Jeff Croft

May 30, 2007 11:32 AM

K, there’s certainly nothing wrong with that approach, as well. However, it was definitely out of the scope of the book, which is all about using web standards in creative ways. :)

Dan

May 30, 2007 2:12 PM

I have come across an issue to using pngs on a web page – not major enough though to stop using them. I’ve noticed that IE6 sometimes stalls when loading a page with several pngs on it when using the javascript to fix the alphaloader issue. Don’t know if there’s a way to technically fix that, but usually it can be solved by clicking refresh. Again, it doesn’t happen often enough for me not to use pngs.

Jermayn Parker

May 30, 2007 5:54 PM

Great article and very informative that I will definitely have to play around with and use the watermark for my current project (selling race cars).

Thanks for the tips :)

Jonathan E

May 31, 2007 10:13 AM

@Dan: Be sure and check out the link to the article I posted above. It will explain how to display transparent PNG images in IE 6 using only CSS, without the need for JavaScript.

In case you missed it, the URL is:

http://www.reinspire.net/blog/2006/03/25/ie_transparent_pngs/

I’d be interested to know if you experience the same stalling issues that you’ve been getting in IE when using the JavaScript solution.

Ben

May 31, 2007 10:28 AM

@Dan

There’s an article on the dev opera site that explains what’s going on with the javascript and mentions some techniques for working around it, though it’s not really related to the way that javascript is used to replace PNG’s in IE6.

The article can be found at http://dev.opera.com/articles/view/timing-and-synchronization-in-javascript/

Having not tested any of the workarounds myself yet I can’t say for sure what (if any) will work but my best guess would be using the deferred script-block loading technique mentioned.

Hope that helps.

Dipesh Solanki

June 1, 2007 9:44 AM

Great article on png’s.

I found that you can do pretty good translucent rollover effects over background images with out the need for any javascript. The only problem is that it doesn’t work in IE6.

Have a look at http://www.qdtech.co.uk

Will Morgan

June 1, 2007 3:34 PM

Yup, similar to my little rant on why everyone should use PNGs. It’s a shame, since PNG has been around for around a decade, yet people still use this format immensely. (My rant = my link)

Ali

June 3, 2007 11:32 PM

isn’t it important that a watermark actually be a part of the image and not an overlay?

Jonathan E

June 4, 2007 11:18 AM

@Ali: See this comment from Jeff.

Neil

June 5, 2007 8:17 AM

Great article and very informative.

Is there supposed to be a download file attached to the article with some of the code samples? I noted the following paragraph, which mentioned a code download;

I

Tiffehr

June 5, 2007 10:33 AM

@Neil: This article is actually a book excerpt from Web Standards Creativity, featuring Jeff Croft’s chapter from the book. The book includes instructions referring back to files on the publisher’s website, friends of ED. You can find the download accompaniment for the book here: http://www.friendsofed.com/download.html?isbn=1590598032. The “haley_example” directory is in the folder for Jeff Croft’s Chapter 05.

Neil

June 5, 2007 2:41 PM

Hey Tiffehr – thanks for the heads up with that one.

Gordon

June 6, 2007 10:06 AM

Excellent article.
I just had some problems with the AlphaImageLoader though. Is anyone aware of a bug that leads to the filter being applied but not displayed? I had this on two installations of IE6 with a number of techniques presented here and elsewhere.

On a sidenote, AlphaImageLoaders can break your website in Internet Explorer on certain versions of Citrix Metaframe Server. One of our customers reported some of his clients couldnt access his website. They reported the site would be rendered multiple times on one window in random positions on top of each other. When I turned off the AlphaImageLoader it worked fine. The Citrix KnowledgeBase suggests some DLL issue and provides a hotfix. I dont know the marketshare of Metaframe Server and the amount of people affected by this is probably neglectable though, but it was an issue for my customer.

Wulf

June 7, 2007 7:00 PM

David Jones

June 10, 2007 9:46 PM

Hi All,

I’ve written an article that shows how to reduce the size of PNG images because Photoshop seems to seriously bloat them.

I’ve also written a command that recursively goes through a directory (like your websites’ images directory) and optimizes any PNG files it can find.

Enjoy!

David Jones

June 10, 2007 9:48 PM

Ops the article link didn’t work properly. Here is the article.

matt

June 13, 2007 8:42 AM

I really need to fix all the png files on my site to work in IE. Thanks for the tips on how!

Student

June 16, 2007 8:00 AM

Great article and very informative. I did play with PNG for my portfolio site and it was fun.
thanks

Mark

July 23, 2007 8:01 PM

I had the opportunity to work on two sites that both harness the power of the PNG similar to the Gingeroot example.

Sorry, comments are closed.

Media Temple

via Ad Packs