Web Devs Should Use PNG Images

3704312555_1f9bf46220_o.gifHad a conversation the other day with a dev who thought my usage of PNG images in my designs was interesting. Actually it’s been so long since I used GIF I thought his comments were interesting.

PNG is by far a superior file type. Like all file types though, it’s all in you usage. There are three PNG file types, 32, 24, and 8. Each has a different compression ratio, suitable for different situations.

PNG-32 has the least compression, support for layers, index and alpha opacity and is the default image type used in some image editing software, like Adobe’s FireWorks.

PNG-24 has more compression, no support for layers. I use it for artwork with gradients in lieu of JPG.

PNG-8 has the most compression, the ability to limit the number of colors (just like GIF) and support for alpha and index transparency.

So, PNG-8 is used in place of GIF, and PNG-24 can be used in place of JPG. I find that the benefits of PNG-24 on photographic images does not supersede that of the trusty JPG which still provides a better compression, and thus smaller file size.

3705121536_325d3d98b5_o.pngPNG-8 however produces consistently smaller file sizes and greater clarity than GIF in images based on vector art.

So why didn’t PNG make a bigger initial splash in the web dev world? It’s because of Internet Explorer 6’s lack of alpha transparency support. Transparency was touted as PNG’s great benefit; and it certainly was the most exciting. IE6’s lack of support kept devs from making the switch en mass and they thusly disregarded the compression/file size benefits.

Take a look at the images included in this post. They are of a prime example, a logo created in vectors, lots of blocks of color.
  1. The first is the GIF (12.3k) 
  2. Second is the PNG.(10.2K).
You decide which you would rather use.