Graphics, Browsers, and Accessibility

If you've been a regular of my site for some time now, you may have recently noticed a trend toward the usage of PNG type images on my site. Additionally, if you're using Microsoft's Internet Explorer you may have noticed a special message has been appearing on all of my site's pages. Joking aside, you may be wondering why I have been pushing such conversions. (Referring to both graphics and browsers.) The answers are actually quite simple and I intend to address them in this entry.

First, let's address the subject of my graphics conversion. As I mentioned earlier, I have chosen to create and/or convert many of my graphics to PNG. This choice was made for many reasons, but the main reasons have to do with file size, transparency (or alpha as it's called in graphic design), and quality.

The PNG format is a high quality graphics format which preserves the true color of images along with alpha and gamma information. For a better understanding of PNG, please read the Wikipedia PNG article [wikipedia link] on the subject.

Without getting into to much detail, I want to describe the graphic alternatives to PNG and why I chose not to use them instead. Let's first look at all of the formats side by side containing the same graphic:

GIF - 5,665 bytes	JPEG - 37,144 bytes	PNG - 28,676 bytes

As you can see, the first table has no background, while the second table has a black background. I did this to demonstrate the alpha (transparency) qualities of the graphics. Let's go through each of the formats one-by-one and find their pros and cons.

The GIF [wikipedia link] has a very small file size, but image quality and detail is greatly lost. The GIF does have alpha recognition, but the edges of it's transparency can be very rough. I've found that the GIF format is great for small animations, but it's lack of image quality makes it unable to compete with the other formats when it comes to still images.

The JPEG [wikipedia link] has amazing quality, but this is - of course - off set by its file size. JPEGs are a worthy competitor of the PNG, since both formats tend to have relatively similar file sizes and quality. The major difference is that the JPEG lacks transparency.

PNG is the final format I decided to choose from. When compared with the GIF and the JPEG, the PNG comes out ahead for two reasons: it has high quality with comparable file size to the JPEG and transparency with out rough edges and loss of resolution. When it comes to making the choice of graphic type for an image with transparency and quality, the PNG is the way I go. Now it's time to use our new graphics knowledge to help define my issues with browsers.

I'll keep this part very simple and general. My reason for saying "This site is best when NOT viewed with Microsoft Internet Explorer" is due entirely to PNG images. At this time, Microsoft's web browser does not support the correct viewing of PNG images, thus the quality of these graphics are lost for many visitors.

I'll avoid the debate about which browser is better by simply stating that I use FireFox for its functional extensions, that is why I promote it in my anti-IE message. I support any browser which helps to progress web development, therefore I encourage you to look for yourself for a better browser. I know that Microsoft is releasing a new version of IE this summer, which they say will support PNGs, so perhaps you IE users can just bide your time until the new version comes out.

Well, that about wraps it up. I hope this answers any questions you may have had. As one last shameless plug, I encourage you to try out FireFox using the link provided in my message above. You'll find its' functionality and customability very beneficial.