Download the Smush it Firefox extension to follow along with my post.
I’m at Ajax Experience this week with my teammate, Stoyan Stefanov. This morning we did a lightning-demo of our new tool SmushIt.com. Smush it allows you to automate image optimization by using the best of open source algorithms to achieve the smallest, high performance images possible.
Smush it comes in different flavors:
- You can upload a bunch of pictures in your browser
- You can provide us with a list of image urls or
- You can get a Firefox Extension to optimize the images found on any web page
Our fundamental principal was that the images we produced needed to be 100% pixel for pixel faithful to the original quality. That means that our techniques are completely lossless. We decided to let designers decide what quality level was necessary, then, given that quality, we use the best open source compression algorithms to make the image as small as possible.
Smush it also generates a zip so that you can easily download and replace all of the images in your page.The tool smushes your images in several ways and outputs the best result, or gives you a bravo if your images are already optimized. Some of the options we test are:
- Crush PNG
- Convert GIF to PNG
- Convert JPG to progressive JPG
- Remove Metadata
- Compress animated GIF
We would love feature requests, bugs, or suggestions so that we can improve the tool. I am nicole at my domain. At Ajax Experience I showed the tool on Korea Yahoo, BBC News, and Barack Obama’s site. Can you guess who had over 300K of useless image bloat?
Modern sites are doing more than they ever have before, this tool will help keep them lean, mean, and (of course) fast.
Christian Heilmann recorded a video of our demo for YDN. The audio is a bit wonky, I’ll link to the official AE recordings as they become available.
Comments
22 responses to “New tool: Easy image optimization with Smush it”
I tried to post a note to “info@smushit.com” (the email address in your “Feedback” link), but it failed with “Relay access denied”. I don’t know whether that’s your problem or Gmail’s problem.
What I wanted to point out was the lack of any mention of how to use the Firefox extension. It’s easy to do, once you figure it out, but just a simple mention of right-clicking the SmushIt icon in the status bar would help.
Congratulations, this is an awesome tool. I want to automate the inclusion of this in my app, something I can do on the command line to make sure all the images I’ve got are as small as possible.
A standalone tool would be fine, but assuming you’re up for it, an API would be even better. Hell, I’m willing to just figure out how the request/response mechanism works myself if you guys don’t have a problem with people sending a lot of data through the site 🙂
This is a great tool. I’ve been trying to figure out a way to convince my coworkers to compress images on their projects. This tool will make is super simple for them. Thanks!
I’d be very interested in more under-the-hood information. For example, what are you using to compress animaged GIFs?
I was so impressed with your presentation…best five minutes so far in the conference…and this tool is ridiculously cool. I cannot believe how fast it is. I am telling everyone who will listen, and poking everyone who won’t until they do.
Great product. I am going to use it. API to automate the compression would be great. Do you have any plans of releasing it?
Can you tell what are the open source algorithms and tools that you use?
Smush It is pretty cool. I got a 5.75% reduction on images that were already optimized with Fireworks. My one question is about it turning my gifs into pngs. I guess I have to go back and convert them back to gifs, but I’m not sure why they were changed in the first place.
@David Thanks for the feedback. We’ve fixed the feedback address now. Better documentation to follow shortly.
@Ross We’re working on a command line version. We’ll announce it when it is ready. For the API, we need to see how much stress this puts on our servers first. We actually need to try all the different compression algorithms to figure out which is best, so it is somewhat costly.
@chris, @mike, Thanks! Glad you find it useful. We built it because it was something we needed, so it is satisfying to see that other people are also excited about it.
@Thejesh GN We’ll definitely release it. The best place for this product is inside the push/production process to that high performance images are created from day one.
@OpenSource Documentation to follow, please check back soon. We committed our last changes just a couple of hours before the demo, so we have some documentation catch up to do. 😉
@Bundle, PNG8 is often smaller than GIF and yet it has all the same functionality (except animation). We attempt this conversion and, if it is smaller, we return a PNG. For really tiny images (10 px by 10px) GIF will occasionally be smaller but in most cases it is worthwhile to use PNG. You might want to check out our presentations on the Ajax Experience website or on my slideshare account. http://www.slideshare.net/stubbornella/
Excellent product! I have a website where members upload their picture, and their files are huge. I use ImageMagick to create thumbnails, but ImageMagick offer very little when it comes to compression. I’m very exciting about this new tool…
[…] optimizasyonu için gerçekten güzel, denemeye deÄŸer bir araç. bu konuda usta olmanıza gerek yok. belirli oranlarda resimlerin boyutlarını sıkıştırma yoluyla küçültüyorsunuz ve bunu 3 […]
Check out this news post about Smush it and be sure to read on for the Smush it song at the end: http://hothardware.com/News/Smush-Your-Images-For-Speedier-Web-Page-Loading/
[…] optimizasyonu için gerçekten güzel, denemeye deÄŸer bir araç. bu konuda usta olmanıza gerek yok. belirli oranlarda resimlerin boyutlarını sıkıştırma yoluyla küçültüyorsunuz ve bunu 3 […]
Smush it will also convert GIFs to PNGs for better optimization. It’s simply great and easy and has made my life much easier. Thanks to Yahoo team.
You might want to read John Harrington’s “Photo Business Blog” entry about this tool. He makes a good point that providing it, and using it, are very possibly in violation of the DMCA. Furthermore, giving people the ability to remove copyright information with a click, legal or not, is not very IP friendly. Perhaps you could tell it to skip the IPTC fields that contain copyright information?
[…] tool uses a number of existing open source algorithms to create the smaller file sizes. When Yahoo Developer Network announced it last week, one of the […]
@Indika Thanks! Glad you like it.
@MarcW We’ve turned off JPG smushing while we sort this out. It turns out it is a pretty complicated problem as everyone is including copyright metadata in different ways. If you have specific suggestions about the chunks of metadata that need to be kept, please do share that with us. Stoyan is a musician and I am a painter (when we aren’t performance-geeks), so we are very serious about protecting artists rights. Thanks for the input!
@Tasi I enjoyed your post, thanks. Metadata is great in a lot of contexts, it can be interesting to know the camera or geographic information about how a photo was taken. On the other hand, it can add significant bloat to a web page, and most users will never see the value added from the metadata. For example, opening and saving the image using and image editor such as Photoshop will add loads of metadata, that probably isn’t super useful, but slows down the user experience when that image is served over the web. For digital archiving, I would keep the highest quality images with all the metadata possible. For the web, I think performance is a higher priority.
[…] a cada fotografÃa. La herramienta ya lleva en marcha casi medio mes, obra de Nicole Sullivan [review de smush it!] y Stoyan Stefanov y no pinta nada mal, contando incluso con una extensión para Firefox que […]
Another great firefox extension for performance! I can’t wait for the command-line version. I have a lot of pages to optimize before the holiday season!!! 😉
Do you plan on sharing the various algorithms used to smush the images?
Wow, I love smush_it, it has become an addiction to squeeze every ounce out of my websites. Thanks!
[…] http://www.stubbornella.org/content/2008/09/30/new-tool-easy-image-optimization-with-smush-it/ […]
I love your new tool. It took away a great burden from my head, image optimization. I myself is more into coding rather than of Graphics. So really amazing .. I’m following you on Twitter. I wish u ll Follow me back
Thanks
http://github.com/grosser/smusher/
commandline tool to automatically optimize whole folders of images, through smush.it api