How to Optimize .png File Format

An image format I love to hate is 24-bit png (not the 8-bit one). Sure it has some advantages over other image formats, i.e., it's lossless and best of all, it supports alpha transparency. The thing I hate is the file size. A regular 500x500 high quality jpeg may only be 80KB in size. But the same image in 24-bit png may eat up to 350KB. So I rarely use png unless it's really necessary.


The left is a jpeg. I usually uses jpeg with solid background, but in rare case I have to use a png to preserve the patterned background.

Until one of my client needs me to create an e-commerce web site with patterned background, and needs all product images to be transparent with some shadow. "Uh, oh" exactly. I usually use solid background with jpeg images. But with this requirement, I have no choice but to use png files. And the file size haunts me, and it becomes worse as the client wants a 9 images slide show, in transparent glory (200KB each)! Imagine loading a 1.8MB page on a slow connection. Sure high speed internet is almost everywhere, but not everywhere, especially on mobile devices where internet is expensive.

So I tried to solve the loading issue with some approaches:

  1. Ajax slide show that load images in the background.
  2. Preload the page.
  3. Delay load the images, and display a simple gif while loading.
  4. Combine them all.


All the approaches didn't deliver a satisfying performance. After scratching my head and finally tried to Bing "how to optimize png", bam! Apparently some web sites offer to optimize png online. I tried one of them: I uploaded one of the image, a 200 KB png, waited, and to my surprise the online tool manage to shrink the image to only 45KB, while preserving the transparency and most importantly, almost no noticeable differences, also it works on any browsers (including old Internet Explorer). The end result is very satisfying; the 1.8MB slide show now only takes less than 400KB.

I'm not sure how it works exactly, but after I read some information, it seems that the optimizer works by reducing the number of colors, and replace similar color with nearest match color, from 24-bit color to 8-bit, what I don't understand is how it can preserve the transparency. But never the less, it's very good to know that I can reduce the size of any 24-bit png, and hopefully it can also help you in the future also.

Posted On: Jan-30-2014 @ 12:20am
Last Updated: Jan-30-2014 @ 12:34am

There is no comment. Why not be the first?

More Comments/Post Your Own