Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

(Not Quite) PNG-Tastic!


For my new design of Pew Pew Laser Blog, I went for all .PNG images. I did so mainly to save myself a lot of work recreating .GIF after .GIF when changing the background colors of elements. The new hotness of the .PNG format is that it can have transparencies of varying degrees; for example, an pixel can be grey with a 50% transparency value. This gives us awesome and easy shading, without any halos or jaggies or sharp edges on a properly created .PNG.

Note that I said 'properly created .PNGs'. The husband spend a couple hours helping me figure out why the shadowed part of my logo looked jaggy in IE7 and Safari, though it looked fine in Firefox and Opera. In the end, it was because I had left the background purple in the image. This meant that the shadow was tied to that purple. When viewed in IE7 or Safari, the jaggies appeared because the shadowed-purple didn't match the actual purple of the page. (This may be due to the .PNG gamma correction effect.) In any case, we were able to resolve the issue by deleting the background purple layer from the .PSD, and allowing the shadow to float freely.

This difficulty overcome, I do thing .PNGs are the right way to go. Historically, .PNGs file sizes were quite large. But you can squeeze a few KB out of your images by using the PNGCrusher utility. I even set it up as a right-click option using Neil Turner's nifty instructions for doing so. I was able to shave 5% of the file size off my horking header images; which I'd originally created using Photoshop CS2's Save for Web feature.


Tags: graphics photoshop web-development

Authorized users may log-in to leave a comment.

Last Blog: Free At Last.

Next Blog: IE and the AlphaImageLoader for .PNGs.