Web Devs Should Use PNG Images
Had 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.
PNG-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.
- The first is the GIF (12.3k)
- Second is the PNG.(10.2K).
You decide which you would rather use.
Comments [0]