Smush Your Images For Speedier Web Page Loading
If an image is worth a thousand words, what are a thousand images worth? What they're not worth is your time waiting for them to load on a Web page. While the Web is primarily a visual medium, the more image-heavy a Web page becomes, the longer it takes to load before you can see its entire contents. Even pages with just a few images can take a seemingly inordinate amount of time to load if the images aren't properly optimized for Web viewing. Everyone from professional Web page designers to casual bloggers walk the delicate line between including relevant content on a page and causing download bloat.
Some have tools like Photoshop and GIMP and are veritable wizards at using them to properly optimize images for online. But not everyone has access to the right app or necessarily knows how to use it to garner the best results. A pair of developers over at Yahoo who are members of Yahoo's Exceptional Performance team wants to make this an easy and accessible task for everyone, and they have just released a Web-based app that does this very simply. The app is called Smush it and it lives on the appropriately named site, Smushit.com. Not only is Smush it very easy to use, but it aims to compress image sizes down by using "image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality."
You can use Smush it three different ways:
Once the images have been smushed, they are compacted into a zip file that you download.
The developers are not done with their work yet, either. On the personal blog of one of the developers, Stoyan Stefanov, he states that at some point in the near future, they will release the API, open source code, and a command-line version of Smush it. In the personal blog of the app's other developer, Nicole Sullivan, she explains what their goal was for the Smush it app:
"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."
She further states that some of the compression methods they tested were:
We tried the Firefox plug-in version of Smush it on the People.com front page, and Smush it was able to Smush the images by 23.35 percent. If we were the site's developer and were to then reload the Smushed images, the page would be 74.93KB smaller. On our test system we were also running the Firefox plug-in NoScript. Whenever we used the Smush it Firefox plug in on a site, we would first get this error message: "NoScript filtered a potential cross-scripting (XSS) attempt from [about:blank]." We would then need to use the NoScript Unsafe Reload option to get the Smush it plug-in to work its magic. Depending on how your system is configured and what security measures you have in place, your system might erroneously identify the Smush it plug-in's activity as a cross-site scripting attack.
In addition to helping us lighten the load of Web pages by optimizing images, the Smush it app also helped us channel our inner Weird Al Yankovic. The app's name inspired us to pen the following parody (with apologies to Salt N Pepa):
;) |
| Smush it smushing the People.com front page |
You can use Smush it three different ways:
- You can upload pictures from a browser
- You can supply a list of image URLs
- You can use the Smush it Firefox Extension to optimize images from an existing Web page
Once the images have been smushed, they are compacted into a zip file that you download.
| Credit: Stoyan Stefanov and Nicole Sullivan |
"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."
She further states that some of the compression methods they tested were:
- Crushing PNG images
- Converting GIF images to PNG
- Converting JPG images to progressive JPG
- Removing Metadata from images
- Compressing animated GIF
We tried the Firefox plug-in version of Smush it on the People.com front page, and Smush it was able to Smush the images by 23.35 percent. If we were the site's developer and were to then reload the Smushed images, the page would be 74.93KB smaller. On our test system we were also running the Firefox plug-in NoScript. Whenever we used the Smush it Firefox plug in on a site, we would first get this error message: "NoScript filtered a potential cross-scripting (XSS) attempt from [about:blank]." We would then need to use the NoScript Unsafe Reload option to get the Smush it plug-in to work its magic. Depending on how your system is configured and what security measures you have in place, your system might erroneously identify the Smush it plug-in's activity as a cross-site scripting attack.
In addition to helping us lighten the load of Web pages by optimizing images, the Smush it app also helped us channel our inner Weird Al Yankovic. The app's name inspired us to pen the following parody (with apologies to Salt N Pepa):
Smush it
Ah, Smush it
Ah, Smush it
Oooh, JPEG, JPEG
JPEG, JPEG
Oooh, PNG, PNG
PNG, PNG
Optimize my site!
Ow! GIF!
Yahoo developers in the house!
(Now wait a minute, y'all
This Web app ain't for everybody
Only those posting images to the Web
So all you bloggers, get on out there and post
Post, I said!)
Yahoo developers here, and we're speeding up them tubes
Want you to Smush it, babe
Coding by the day then at night pnwing up some noobs
C'mon BFF, let's show the PPL that we LOL
Shrink the JPEGs down so they take a lower toll
Now Smush it
Ah, Smush it - Smush it good
Ah, Smush it - Smush it real good
Ah, Smush it - Smush it good
Ah, Smush it – Sm-Smush it real good
Hey! ow!
Smush it good!
Oooh, JPEG, JPEG
JPEG, JPEG
Oooh, PNG, PNG
PNG, PNG
Smush it good
Smush it real good
Ah, Smush it
Ah, Smush it
WTF, WTF, WTF, WTF, OMG
Yeah, come an give me some lossless compression
Speed up my site or I'll fall into a depression
Can't you see my site loads slow like so much FUD
Now Smush it
Smush it good
Smush it real good
Smush it good
Sm-Smush it real good
Ah, Smush it
Optimize my site!
BFF, you really got me coding
You got me doing much quicker image downloading
Ah, Smush it
Ah, Smush it
Ah, Smush it
Oooh, JPEG, JPEG
JPEG, JPEG
Oooh, PNG, PNG
PNG, PNG
Optimize my site!
Ow! GIF!
Yahoo developers in the house!
(Now wait a minute, y'all
This Web app ain't for everybody
Only those posting images to the Web
So all you bloggers, get on out there and post
Post, I said!)
Yahoo developers here, and we're speeding up them tubes
Want you to Smush it, babe
Coding by the day then at night pnwing up some noobs
C'mon BFF, let's show the PPL that we LOL
Shrink the JPEGs down so they take a lower toll
Now Smush it
Ah, Smush it - Smush it good
Ah, Smush it - Smush it real good
Ah, Smush it - Smush it good
Ah, Smush it – Sm-Smush it real good
Hey! ow!
Smush it good!
Oooh, JPEG, JPEG
JPEG, JPEG
Oooh, PNG, PNG
PNG, PNG
Smush it good
Smush it real good
Ah, Smush it
Ah, Smush it
WTF, WTF, WTF, WTF, OMG
Yeah, come an give me some lossless compression
Speed up my site or I'll fall into a depression
Can't you see my site loads slow like so much FUD
Now Smush it
Smush it good
Smush it real good
Smush it good
Sm-Smush it real good
Ah, Smush it
Optimize my site!
BFF, you really got me coding
You got me doing much quicker image downloading
Ah, Smush it
* Editor's note: This post definitely has a "Friday kinda feel" to it and we're OK with that...
