Smush Your Images For Speedier Web Page Loading
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):
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...