Compress images on client side before uploading

Question

Does anyone know of any free script that compresses JPG, GIF and PNG files as much as possible?

Solution 1

You might be able to resize the image with canvas and export it using dataURI. Not sure about compression, though.

Take a look at this: Resizing an image in an HTML5 canvas

Solution 2

I just developed a javascript library called JIC to solve that problem. It allows you to compress jpg and png on the client side 100% with javascript and no external libraries required!

You can try the demo here : http://makeitsolutions.com/labs/jic and get the sources here : https://github.com/brunobar79/J-I-C

Solution 3

If you are looking for a library to carry out client-side image compression, you can check this out:compress.js. This will basically help you compress multiple images purely with JavaScript and convert them to base64 string. You can optionally set the maximum size in MB and also the preferred image quality.

Solution 4

I'm late to the party, but this solution worked for me quite well. Based on this library, you can use a function lik this - setting the image, quality, max-width, and output format (jepg,png):

function compress(source_img_obj, quality, maxWidth, output_format){
    var mime_type = "image/jpeg";
    if(typeof output_format !== "undefined" && output_format=="png"){
        mime_type = "image/png";
    }

    maxWidth = maxWidth || 1000;
    var natW = source_img_obj.naturalWidth;
    var natH = source_img_obj.naturalHeight;
    var ratio = natH / natW;
    if (natW > maxWidth) {
        natW = maxWidth;
        natH = ratio * maxWidth;
    }

    var cvs = document.createElement('canvas');
    cvs.width = natW;
    cvs.height = natH;

    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
    result_image_obj.src = newImageData;
    return result_image_obj;
}

Solution 5

I read about an experiment here: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

The theory is that you can use canvas to resize the images on the client before uploading. The prototype example seems to work only in recent browsers, interesting idea though...

However, I’m not sure about using canvas to compress images, but you can certainly resize them.

View more solutions

Comments

[Charles]

All three of these are already compressed formats. Compressing the existing images further would result in quality loss.

[xtremist]

what do you say about this "smushit.com"

[Admin]

@Charles not necessarily, most people are waaay to laZy to compress their images at all. So lossless compression would probably greatly decrease the size of most images.

[xtremist]

by the i need something like smushit.com

[David Hellsing]

I don’t think you can replicate Smushit on the client side.

[kasia]

no way to decompress it back?

[Elegant.Scripting]

@brunobar79 Can this export the image to a JavaScript Blob, so that we can upload it without the use of PHP?

[brunobar79]

@Elegant.Scripting You're uploading binary data, PHP is not a requirement at all but you will need some server side language to handle file uploads.

[char]

I was under the assumptiong canvasElement.toDataURL doesn't allow the quality of a PNG mimetype to be compressed, only JPEG. Can you confirm? developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

[Soumya R]

the image i am trying to compress using JIC is only make the size larger. has this happened to anyone else?

[tomermes]

It happens to me too, png images come back larger

[Admin]

$mush-it => $mu-$hit. Haha, I made myself sad using jQuery.....

[shreesha]

Instead of compressing, size is getting bigger

[vjjj]

regarding increase in size - jpeg does not have alpha channel ('a' part of 'rgba'), while png has it so every pixel in a jpeg needs 3 pieces of info - rgb, while every pixel in a png needs 4 pieces of info - rgba. That alone makes png larger when a jpeg to png conversion takes place. Further, since png is lossless while jpeg is lossy, jpeg compression allows it to be smaller at the cost of quality wrt png. J-I-C is converting your jpeg to png, therefore the increase in size!

[visulo]

when I test your example, on the local I don't get the result, the console output is white : always process start...

[lakshman_dev]

Yes. The size is getting bigger. What is the use of using this library if it increases the size :( @brunobar79

[Hassan Baig]

Use jpg as an output format when using JIC and all will be well.

[pankaj]

makeitsolutions.com/labs/jic This link is displaying access denied error :(

[brunobar79]

@pankaj it's fixed now.

[sam]

The link is broken plz fix it

[Debangshu Paul]

This library is buggy