PNGs and Transparency

...

There are basically three types of images that can be used on the internet today:

  • .gif
  • .jpeg
  • .png

.GIFs are nice because they’ve been around forever, you can animate them (string a bunch of them together and define how long each “cell” is displayed, and if the series of “cells” should repeat, and if so how many times), and they can be transparent (you can specify areas of them that you can see through). Unfortunately, they can only be (up-to) 256 colors deep, meaning color-rich images look poor.

.JPEGs are nice because they can handle pictures with much higher resolution than .GIFs. Unfortunately, they cannot be animated and they cannot be transparent.

.PNGs (pronounced “PING,” and stands for Portable Network Graphic), are nice because they offer better compression than .GIFs (so an images filesize should be smaller, and should load faster), they have all the color-depth of .JPEGs (24 bit, or 16+ million colors), they contain some basic meta-information (author and title, for example), and can be transparent. Unfortunately .PNGs do not (offically) support animation (another format called .MNG was proposed to do that), and their transparency is not (yet) supported in Internet Explorer (6.x).

Here’s an example of the same image as a .GIF, .JPEG, and .PNG:

Now, look at this same page in Internet Explorer versus Firefox (or Mozilla, or Opera).

Hopefully Internet Explorer 7 (when it’s out of Beta) will support transparent .PNGs. Soon, my site will be utilzing .PNGs as the primary (if not exclusive) image format, and will feature some (hopefully) pretty cool stuff based on transparency. All MSIE 6.x & lower users should still see a usable page, but it won’t look as cool. Then again, that’s pretty much how it is today: MSIE users see the pages, but they’re not as cool as those using a standards-based browser like Firefox.

2 thoughts on “PNGs and Transparency

Leave a Reply