PNGs and Transparency

January 16th, 2006 by Joe

Internet Explorer
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:
.GIF
.JPG
.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.

Posted in Experimentation, Internet, Joe, technology, work

2 Responses

  1. Joe

    UPDATE: Internet Explorer 7 Beta 2 supports alpha transparancy in .PNGs.

  2. Anonymous

    This blog is great!

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

About Greener Living thru Technology

JoeLevi.com is the personal web log of Joe Levi -- an ASP.NET Web Developer by trade and by hobby. Joe's love of technology isn't just limited to the web, he's also interested in green and environmentally friendly technology and technological solutions. If it has to do with technology, improving the quality of life, geek humor, tech politics, self-defense, environmental stewardship, or anything related, you'll probably find it at www.JoeLevi.com.

Site statistics:
Average: ~1.3 P/V; Visits: ~3,000; Pageviews: ~3,600; Google PR: 4; TechnoratiAuthority: 17; Technorati Rank: 487,964





Watch the latest videos on YouTube.com