NOTEPAD

Advanced PNG Image Compression Made Easy

By John Connole
2 Jun

Compressing images for the web is one of the easiest ways to optimise website speed and save on bandwidth costs. There are some really easy-to-use tools for all of your image compression needs, that can crush your images (even smaller than Photoshop can) without loss of quality. This article is going to take a look at a couple of tools to help with PNG compression.

If you’re publishing images on your website, you should know about the Photoshop ‘Save For Web‘ tool which enables you to compress your images for the web. Fireworks, Illustrator, GIMP and Pixelmator all have equivalent tools. If you don’t know how to use it, you should read this article first before taking a look at the tools we’re going to talk about.

Image Compression with ImageOptim

ImageOptim is one of our favorite loss-less image compression applications. It’s available for mac only, however people looking for an app for PC can take a look  Caesium. ImageOptim is a loss-less image compression tool that works by removing unnecessary comments and colour profiles from your images, and it works for all your favorite web-based image formats. ImageOptim combines the power of several image compression algorithms including PNGOUTAdvPNGPngcrush, extended OptiPNGJpegOptim, jpegrescan, jpegtran, and Gifsicle and will basically keep trying to compress your image with the different algorithms until it gets the best result.

ImageOptim is really easy to use. Simply drag and drop the image you want to compress into the application window and it will automatically compress and save the image for you. Since we’re dealing with loss-less compression we shouldn’t really have a problem with it overriding the original file.

Image Compression with Imageoptim

Just to show you an example of some of the results you can get, we’ve done a quick image test. Since ImageOptim works on a variety of formats we’ve tested with a photograph saved in the JPG and PNG formats.

An example of the results you can get from using Imageoptim. In fact, we used Imageoptim to compress this image and saved 17.7% of the whole file size.

An example of the results you can get from using ImageOptim. In fact, we used ImageOptim to compress this image and saved 17.7% of the whole file size.

Super Duper Transparent PNG Compression with ImageAlpha

ImageAlpha is and application from the same maker as ImageOptim, however it does something rather special. It allows you to turn the RGB layers of the image to 8bit whilst keeping the alpha channel in 24bit. This is awesome for PNG24 images with varying opacity ( such as drop shadows ) that can tolerate having their colours dropped down to 256 variants ( 8bit ). For illustrations this often works great however your results may vary for photographs etc. The file size savings are spectacular. We’ve taken the Stickybeak Bird and used different tools to compress it. You can see that the bird on the far right is less than one-third of the size of the Photoshop bird, without any perceivable loss of quality. The far right bird is compressed with ImageAlpha and ImageOptim. The one in the middle is compressed using ImageOptim only. The bird on the far left is compressed using only Photoshop.

can-you-tell-the-difference

Taking a few seconds to compress your images further before uploading to your server is well worth it. Faster websites ultimately deliver a better user experience and are better for SEO ( http://www.mattcutts.com/blog/site-speed/) .

 

 

John left QUT with a Master of Creative Industries (Interactive & Visual Design) and a firm view that design should be simple, clean and timeless. Back in 2009, John started Stickybeak with the single-minded purpose of offering a highly-specialised, highly-personal service to customers. Believing you should only accept work from clients you can genuinely help, John's ethics are at the very heart of the way Stickybeak does business. When he's not helping clients get the very best from their company, he likes nothing more than sitting around a campfire, unleashing his inner photographer or attempting to Kitesurf

Leave a Reply