smush.it – optimize your images without sacrificing quality
Sometimes I notice great things, but just forget to blog about them. However, having Chris H in town reminded me – I just have to write about smush.it.
Background
We always chase every single byte when it comes to minifying, compressing, obfuscating and what-not in the case of our JavaScript files (and to some extent, HTML and CSS files as well). What we fail to target, though, is image sizes, who are the biggest culprit in download size, and the least seen-to performance problem.
One reason it is so is probably due to the vast number of of image optimizers out there, all specialized at different formats; also, many times they’re far from user friendly as well.
Enter smush.it
Stoyan Stefanov and Nicole Sullivan are the great people behind smush.it, and it is a service to help you optimize your images. The key sentence in the description statement is:
It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images – without changing their look or visual quality.
What this means is that, practically, all the images you use can have a smaller file size without losing an ounce of it visual glare and perfection. Ain’t that sweet? π
How it works
They use a number of different open-source algorithms and services, all combined into one interface, to deliver the most optimized images to you. You can download all images, now smaller in file size, in a ZIP file and then just update your own web site with better-performing images.
The only thing which can get you is that they, at times, deliver a PNG image instead of an upload GIF image. While I agree that PNG is generally a better format for 8-bit versions of images, it does lead to that you as a developer have to update your references. On the other hand, this could be a good incentive to stop using GIF altogether. π
Ways to use smush.it
The lovely thing about smush.it is that they make it so easy to use. You can optimize images by:
- Upload images in the web browser
- Provide image URLs
- Use a bookmarklet, which gets triggered for all images in the current web page
- Use the Firefox extension, which also gets triggered for all images in the current web page
The result for either way is a ZIP file with optimized images.
So, what are you waiting for? Start optimizing now!
I usally use optipng on my local machine but smush.it is a great complement! Super easy to use! Everyone who cares about frontend performence should check it out.
very nice! I'll be using this to check my designs to quickly filter out images that are optimized inefficiently. I normally use the traditional "save for the web" function in PS. I checked a few of my sites and noticed that for most images smush it only generates very minor improvements (ranging from no savings to 2%, so PS isn't doing it all that bad), but it does fliter out the poorly optimized ones quite quickly. Specially when using the firefox plugin, so yes, it's definitly usefull as a quick "second opinion" π
as far as the name goes: good thing they put the dot in smush.it, because when I pasted the url in Firefox I couldn't help but read it as smu shit! π (but that's probaly just my filthy mind)
Also to note (from their FAQ) they have a simple to use API and they plan on releasing the source code shortly. Good news for anyone working with lots of images.
Interesting, but I prefer to process images locally. I was suprized they didn't use advdef as it's the best lossless PNG compressor about.
It is well recommended!
Aaron,
Great, thanks for pointing that out!
Aldrik,
They do have an API, though, so that approach might be an option. What I like about is that JPEG, PNG and GIF compressing is all combined into one place.
I was really impressed by smush.it, especially their Firefox extension, that makes everything a breeze. More people in web development need to take file sizes seriously.
Unfortunately, I don't get to smush that much, since our gfxguy is just AWESOME at reducing file sizes, while maintaining image quality. π
Oh, I forgot to mention that an upcoming API will certainly be appreciated.
One wonders how they're going to be paying for the insane amounts of traffic though π
Morgan,
Lucky you then! Few get to work with people like that. π
In regards to traffic, perhaps Yahoo! are helping out there, or some other kind of sponsorship.
http://github.com/grosser/smusher/
commandline tool to automatically optimize whole folders of images, through smush.it api
grosser,
Great, thanks for the tip!
I created a new service called punypng (http://www.gracepointafterfive.com/punypng)
I think it delievers some pretty impressive results when compared to the other tools out there. Head to head, it gives you more bytes. Give it a try.