Take the 2-minute tour ×

When offering photo file uploading, usually the user will have badly compressed and huge (10+ megapixels) JPEG files from their cameras or phones. On the server side, these files will get re-compressed to something like 800x600px and JPEG quality 7 or 8.

Is it (already) possible to do that re-compression on the client side? So that I would only need to transmit some 100kB (800x600px) and not 3 MB or more. Something like:

(1) With javascript's new FileSystem API ( http://slides.html5rocks.com/#filewriter ) it would be possible to read the photo file's data into client side JS.

(2) Then it would be necessary to re-encode the JPEG data, which is possible, but I counld not find any library for that (yet). Anybody knows such a library?

(3) Last step would be to POST the re-compressed JPEG data to the server side for storage and get a URL to the stored photo file back from the server for inclusion into the client's HTML.

I am looking for some jQuery plugin, other JS library or example web page that does this.

share|improve this question
The Is it possible to optimize/shrink images before uploading? question at StackOverflow presents several possible solutions. –  danlefree Apr 13 '12 at 3:47
add comment

3 Answers

Plupload supports html5 resizing of images and then uploading them, it also has fallbacks for unsupported browsers (IE cough cough) in Flash, Silverlight (and antiquated stuff like Google Gears and BrowserPlus).

share|improve this answer
add comment

You can load the image onto a canvas element, resize it and then retrieve back the image to upload it.

share|improve this answer
For how to do this, see stackoverflow.com/questions/923885/… –  Ilmari Karonen Apr 14 '12 at 20:12
add comment

Check out this demo: http://makeitsolutions.com/labs/jic

It's a javascript library created by me that solves that problem.

It allows you to compress jpg and png on the client side 100% with javascript and no external libraries required!

share|improve this answer
add comment

Your Answer


