Smush.it is a website that can reduce the size of your images. It’s free, fast, and effective. Smush.it has been created by two members of Yahoo’s Exceptional Performance team—the same people who brought you Yslow.
Smush.it will never reduce the quality of your images, but it can reduce their file size. So you get exactly the same image, but it takes less time to download. Since images are typically the heaviest part of a web page, Smushing them can make your pages load much faster.
How do you use it?
You can use Smush.it in three ways:
- Upload images through your browser
- Supply a list of links to images
- Use the Firefox add-on, or the browser bookmarklet, to Smush all the images from one of your pages
Smush.it will tell you how much it saved, and give you the option to download the optimised (Smushed) images individually or packed in a ZIP file.
Smush.it also has an API, which allows you to Smush images automatically as they are published (without needing to visit the Smush.it website). The documentation is sparse, but likely to improve soon.
How does it work?
Smush.it uses several image-compression algorithms:
- ImageMagick converts GIFs to PNGs, whenever this reduces file size.
- PNGcrush for PNG files
- JPEGtran for JPEGs
- GIFsicle for animated GIFs
None of these algorithms is new; Smush.it simply packages them into a friendly interface.
If you use GIFs, you can expect Smush.it to convert them to PNGs (because PNGs are usually smaller). Because this conversion changes the file extension (image.gif becomes image.png), you will need to update any references to the image (such as in your CSS or HTML).
How effective is Smushing?
Smushing can substantially reduce your file sizes, especially when applied to GIFs or PNGs. The actual savings will depend on the nature of your images; in extreme cases you can save over 90%, but occasionally you may save nothing. Smushing generally produces larger savings for GIFs and PNGs than for JPEGs. As a hand-waving estimate, I reckon you can expect about 10–20% savings on PNG files.
I already optimise my images in Photoshop. Why Smush them?
Photoshop is extremely weak at optimising images. It does some things well (JPEG compression), but others badly. In particular, Photoshop’s PNG output is usually bloated; the size of your Photoshop PNGs can be substantially reduced by Smushing them.
I only pick on Photoshop because it’s popular. The same criticism applies to graphics programs in general.
There’s more to image optimisation than Smushing
By design, Smushing is fundamentally limited because it only performs lossless compression: it preserves the quality of the original image. Much greater savings are possible by using lossy compression, which reduces the image quality. Graphics programmes are generally good at this: when saving a JPEG for the web, you can choose how much compression to use. Moderate lossy compression should be used on almost all your JPEGs.
Lossy compression applies not only to JPEGs, but also to PNGs. Your PNGs may have thousands of unique colours, but can you actually appreciate them all? By reducing the palette to 256 colours (or fewer!), you can make the file much smaller; this is lossy compression, because colours are changed slightly. In many cases, it’s impossible to spot any difference between truecolour and 8-bit PNGs.
To summarise: use moderate JPEG compression, and use 8-bit PNGs instead of truecolour PNGs whenever you can. Smush.it can’t help you here; you have to manage this yourself.
Smushing vs. running the same tools yourself
Instead of using Smush.it, you can run the same image optimisation algorithms yourself. In some cases this will result in greater savings, because you have direct control of the tools and can configure them to act more aggressively.
For example, you can run PNGcrush in a brute-force mode that uses every algorithm in its library. This is much slower than the standard smart
method, but it sometimes gets a better result. More significantly, you can use JPEGtran to remove useless metadata from your JPEGs—but Smush.it currently does not implement this, because they are concerned about removing copyright information.
In other words, running the tools yourself will offer significant savings for JPEGs, and small savings for PNGs. However, these tools are not designed to be soft and cuddly: they don’t have plush graphical interfaces, and their websites don’t have reassuringly large, green Download now!
buttons. They are made for geeks, by geeks.
Examples
I ran Smush.it on a few home pages to see how much could be saved:
- Microsoft.com: saved 18% (26 kb)
- Amazon.com: saved 3% (8 kb)
- Number10.gov.uk: saved 15% (44 kb)
- TheWebSqueeze.com: saved 7% (20 kb)
These savings are clearly worth having, but they don’t tell the whole story. Let’s use the WebSqueeze logo text as an example:
This image is a 45.2 kb JPEG; Smushing reduces this to 43.7 kb. But since this is a low-colour image, the JPEG format was a poor choice. I saved it as a PNG in Photoshop, choosing a palette of only 64 colours. The PNG version is 18.8 kb—less than half the size of the original! I then ran the image through a brute-force PNGcrush, which reduced it to 16.6 kb. Finally, I ran the 18.8 kb image through Smush.it, which produced exactly the same result. A summary:
- JPEG format
- Original JPEG: 45.2 kb
- Smushing it: 43.7 kb
- PNG format
- Lossy compression to a 64-colour PNG: 18.8 kb
- Smushing this, or running PNGcrush myself: 16.6 kb
In total, I saved 62%. By far the greatest part of this saving came from reducing the colours; Smushing then shaved off a little more. The two images are visually indistinguishable from each other. Take a look. Can you tell the difference?
By applying lossy compression to just one image, I achieved greater savings than by Smushing the entire page! Smushing is good, but it can’t hold a candle to lossy compression.
The verdict
If you’re comfortable installing and running these tools yourself, then you may get somewhat better results. In fairness, however, you are not really part of Smush.it’s intended audience; you’re an alpha-geek!
Smush.it makes lossless image optimisation accessible to the masses. It’s easy, fast, and free. Unless you’re already running the same tools, there’s really no excuse not to start Smushing!
However, Smushing is no substitute for traditional lossy compression. You can get much greater savings by applying lossy JPEG compression or using reduced-colour PNGs. Do these things first, and then Smush the resulting images.
