Now before some of you start roaring that there’s nothing “new” about PNG graphics – which have been a W3C recommendation since 1996, the time when I first heard of them – you have to understand that one of the first lessons I learned as a web designer many years ago was not to use those new-fangled JPEG files; since most browsers only offered GIF support. This I learned after building my first website; with those stunning full-color images that relatively few users could see. Like I said, this was a long time ago.
That lesson left me being extremely conservative about adopting new technologies and techniques, since my goal has always been to support the widest customer base.
Having said that, my lovely wife Dawn wanted to give her website an extreme makeover, including a new design that more properly reflected her personality and that would make the user feel like they were in “her room.” This included a complex background instead of the solid colors it used to have, as well as a goal of minimizing the rectangular “boxes” that visually “confined” the previous design – replacing them with softer, more feminine boundaries. As part of this new design, she wanted to “float” a cutout image of herself on the page in place of the rectangular image that was previously there. This seemed like a great place to try a variable-transparency full-color PNG image.
While I would normally use a tried-and-true GIF image for such purposes, the limited color depth and graininess of the transparency with my target image left me unsatisfied; and the desire to float a cutout on a background that changed depending on screen size (it’s a fairly large tile that repeats irregularly depending upon the width of the screen) prevented me from using a JPEG that could easily be feathered to the underlying image.
A decade after the recommendation, PNG should be a safe bet, right? Let’s try it out!
The image looked stunning, but at close to 240kb, the size worried me. Still, when I laid it on the background and then checked it out at a variety of common screen resolutions and using MSIE 7, Firefox, Opera and Netscape, I was impressed and so was Dawn – that is, until she looked at the site on her laptop, which was still running MSIE 6. Rather than the wonderful transparency I was seeing, she was seeing grey boxes around the images.
What a surprise! While MSIE 6 natively “supported” the use of PNG files, it did not readily support their transparency. I’m glad I hadn’t upgraded both systems at the same time, or I would not have seen this major problem…
I dropped the PNG, not willing to lose the presentation for my many MSIE 4-6 users, and tried a few workarounds using GIF and JPEG files; but I wasn’t pleased at the huge loss of quality in doing so. Not willing to give up so easily, I turned to Google for a solution and sure enough, I found one.
This page details the problems and solutions for displaying variable transparency effects using PNG graphics in older versions of MSIE and while I won’t pretend to fully grasp the solution, I was able to make it work and was infinitely pleased with the results – until I noticed that some of my links no longer worked.
See, in my rush to try the solution, I hadn’t carefully read all the background information, and now my “background” was causing me problems. Not the main page background, but the table-cell background I was using to provide a nice, solid canvas for our text and other page elements. It seems that the transparency solution raises the z-level of the cell background to become the top element, “blocking” the hyperlink, even though you can “see” it. Adding an additional event handler ( position: relative; ) to the hyperlink solved the problem, but this too caused an unneeded spiking of my stress level – especially when I discovered that while text links could be globally addressed with this element through my CSS file, JavaScript and image links needed to have it individually added through inline styles. Talk about a never-ending series of pain-in-the-ass tasks!
This was a fairly frustrating exercise, but one which I’m glad we undertook. Now, where appropriate, I’ll include PNG graphics in my designs. Perhaps you can too!