demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

JPEGmini comparison of image compression

Site Optimisation: Ultimate Image Compression Tools

tools / images

Estimated reading time: 2 minutes, 47 seconds

The most effective way to speed up page load times on your site is to reduce the file size of the images. Images make up two-thirds of the total file size of an average web page, so it makes sense that cutting down images will result in the greatest savings to bandwidth and load times.

This step sometimes confuses web developers, who have the reasonable expectation that should optimize images as part of the Save For Web process. Unfortunately, that isn’t true: PhotoShop will often leave a significant amount of file overhead when exporting an image as a JPEG, GIF or PNG. We need to use a second tool to strip this binary information out, reducing the file size further without affecting visual quality. These savings can be anywhere from 5 to 80%, potentially turning a 50K JPEG that was already well-compressed into a file 30K in size.

Before trying for these achievements, we need to ensure that you’ve done a few things:

  1. Make sure that you have saved the site’s images in the most appropriate format. These tools will only optimize what you give them: with the exception of SmushIt, they won’t change a photograph from a GIF to a PNG, even if the latter is a far better choice for file size.

  2. Make sure that you’ve compressed the images first. These tools are “lossless” compressors: they create smaller image files by removing redundant bytes, not by reducing image quality.  Your major savings will continue to come from judicious use of compression; think of these new tools as a “final squeeze” to wring every last bit from your images.

  3. Merge images as sprites where appropriate to reduce the number of HTTP requests.

  4. Consider using and to alter a web page image rather than PhotoShop; compressing the original image will usually result in greater file savings than trying to do so with an image that has been manipulated by PhotoShop a dozen times. 

There are two means of optimizing web images after compression: online, or with a native application. Online tools are handy, but they are significantly slower than native applications.

Image Compression Applications

imageOptim screenshotMy preferred Mac tool for post-PhotoShop compression of image files is ImageOptim. The application is free, built on a number of well-regarded open-source tools, and has a simple drag-and-drop interface. I keep it open during my web development workflow: any images that are destined for a site are simply dropped into its window before being uploaded. You can also take entire image folders and drop them in for processing, making it perfect for established sites.

Online tools

  • One of the first image optimization tools available as a web service, SmushIt is part of the Yahoo web services network. In a somewhat unusual twist, SmushIt will save some GIFs as PNG files if the file size savings are significant enough.

  • Picture Slash! is a very promising new free online image optimisation service: it takes queued orders (including .zip image archives), processes them, and stores the downloads for five days for easy retrieval. My initial limited tests of the service have produced smaller image file sizes than ImageOptim, with little noticable loss in visual quality.

  • JPEGmini is a service that concentrates solely on photographic images. It’s also available as an application from the Mac App Store.

  • TinyPNG delivers image savings for 8, 16, 24 and 32-bit PNG files while preserving alpha mask information.

Would you recommend other image compression tools for this list? .net magazine recently featured expanded coverage of compression tools, but if you have others, please add them in the comments below!

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.