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 PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, 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.
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.
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.
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/) .
The post Advanced PNG Image Compression Made Easy appeared first on Stickybeak Web Design.
