PNG24 vs. PNG8: The battle to reduce file size continues

Before you get scared of the long almost “techy” post, know that this is something all people who work with images and graphics can benefit from.

In hopes of a faster loading e-commerce site, I’ve gone through a few tests to determine how could we optimize product images in a more efficient way.

Currently, because of the glow around the products used in our e-commerce site, all PNGs are saved as PNG24. We think that, by using PNG8 in images less than 201 pixels (in width or height), we can save up to 60% in space, allowing for the site to load much faster. True that PNG8 will not allow for the glow to be stored, but on images with small dimensions, it truly doesn’t matter. It is still as transparent as it used to be.

On top of that, we can use image-crushing software, like Ping or PNGCrusher, that compresses both PNG8 and PNG24 files, resulting in approximately 15% in file size savings. Both these little programs work for Mac OSX. For a PC version, I suggest you guys to Google it. (I don’t recommend one in particular because I don’t have the means to be able to test it.)

What are the best Photoshop Optimization settings we have encountered so far? When creating PNG8s, we use 64 Colors, and the Selective / Diffusion / Transparent settings in the Save For Web menu.

This Excel doc documents the trajectory of the tested images.

1) First column offers the original sizes (the sizes currently used in the TNF website)

2. Second column documents the image sizes after being optimized (from PNG24 to PNG8).

3. Third column includes the optimized image sizes after being crushed (Optimizing happens in the Save For Web process, Crushing happens using a third party software. We can use these two processes together for better results.)

4. Fourth column documents the Savings. These happen by taking the original folder size (in column 1) and putting it together with the final folder size (in column 3). Notice how there are less savings in the PNG24 folders, because they didn’t go through the PNG8 optimization process, to save the glow in larger product display images. To make things simpler, I used green to calculate the percentage of savings in the PNG8 images, while yellow is used to calculate the percentage of PNG24 images.

None of these PNGs were interlaced. Interlacing an image causes it to “appear” to load faster, but it adds a few bites to your file, so it depends on what your needs are.

Recently, an engineer at my office came across an interesting Powerpoint presentation that also covers the subject of image optimization from a back-end perspective. Of course, the data is kinda dry and the image compression software it mentions is really more of an MS-DOS command. Still, interesting to click through. You can also download the ppt directly from here.

Hope this helps shed off some weight from your heavy-on-the-back-end sites!

-Alex