Clientside Image Compression
Over the last year of consulting I’ve done several jobs where I didn’t have access to the images used by the site. In one case it was 3rd party software and I was just enhancing the user experience through JavaScript, in another case the images were created dynamically by the server. In yet another case I worked on a site that had editors uploading photos all the time.
In each of these cases it became apparent that the images were never optimized by the people creating them (or, in the case of the machine, by it). I got inspired by smush.it which was demo-ed at the Ajax Experience last year in Boston and spent some time picking apart PNGCrush (an open source image cruncher) and have put together a rather robust solution in JavaScript.
Introducing the JavaScript PNG Resizing Image Library
The JavaScript PNG Resizing Image Library (a.k.a. JPRIL) is easy to use. Just include the library in your document and it will find all the PNG files on your page and compress them for you. You can also call JPRIL directly on a PNG file (for images loaded by JavaScript after the page loads) like so:
JPRIL('myPngElementId')
It’s that easy.
The Output
JPRIL automatically replaces any PNGs in the document with it’s compressed version, garbage collecting the older, larger version. The images look about the same, but how compressed they are is up to you. You can pass in a second argument which is treated as a percentage for compression. Here are two examples:
Download
The code is of course open for anyone to use. Just click here to download it. Compressed and gzipped it’s only 62K.
Update
Yes, this is an April fool’s joke.
Update Update
…someone actually made it: http://ajaxian.com/archives/javascript-jpeg-encoding
Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.

April 1st, 2009 at 9:09 am
Neat, will this be part of jMore?
April 1st, 2009 at 11:17 am
Very nice. I love the name, JPRIL. Good one.
April 2nd, 2009 at 5:56 am
At first I thought it might be useful to let your pages use less memory or something. I was totally trusting that you had a very good reason to need such a thing. You nut. :P
April 4th, 2009 at 3:41 pm
Great, javascript rocks :)
April 5th, 2009 at 8:15 am
:)
It took a few seconds of wondering the point.. following the name.. looking at the date.
No one could accuse Mootools of lacking a sense of humour.
Keep it up!
April 7th, 2009 at 10:37 am
Teh he he