When checking over one of our sites, I noticed the home page was 2.5MB. This is rather excessive for a web page and would result in excessive bandwidth usage and unnecessary performance issues serving up such a large page. The issue ended up related to their rotating banner and the 4 images in rotation.
Banner images – They have a rotating banner that looks at their /images/banners folder. The images in rotation add up to 2139KB.
So I did some testing and noticed they are PNG24. I then copied the images to my computer, opened them with paint.net and saved them to a new folder called banners2 as PNG8. This reduced the total images size to 511KB with no real notable reduction in quality.
Here is one of the images prior to resizing at 520KB.
Here is that same image after resaving it as PNG8 – Now only 119KB.
Resizing the images in this case cut the images in the banner folder from 2139KB to 511KB with no noticeable decrease in quality. A 76% reduction in size.
More Before and After.
Before
After
How to Save as a PNG8
I’m sure there are all sorts of programs that can do this. The only one I’m familiar with though is paint.net. It’s easy to use, basically like Windows Paint, but with more option. When you save a png file, you will get the option to choose the bit depth.
