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

This entry was posted on Wednesday, April 1st, 2009 at 7:57 am and is filed under Optimization. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.