49

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

3
  • 4
    All three of these are already compressed formats. Compressing the existing images further would result in quality loss.
    – Charles
    Apr 9, 2011 at 19:45
  • what do you say about this "smushit.com"
    – xtremist
    Apr 9, 2011 at 20:07
  • @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.
    – user7892745
    May 2, 2017 at 11:34

5 Answers 5

60

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

15
  • 1
    no way to decompress it back?
    – RWendi
    Aug 27, 2013 at 6:34
  • 6
    the image i am trying to compress using JIC is only make the size larger. has this happened to anyone else?
    – Soumya R
    Jun 17, 2016 at 9:06
  • 1
    Instead of compressing, size is getting bigger
    – shreesha
    May 8, 2017 at 15:29
  • 2
    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!
    – vjjj
    May 10, 2017 at 20:17
  • 2
    Yes. The size is getting bigger. What is the use of using this library if it increases the size :( @brunobar79 Nov 27, 2017 at 9:06
18

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

11

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.

0
8

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;
}
0
6

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.

3
  • 1
    by the i need something like smushit.com
    – xtremist
    Apr 9, 2011 at 20:13
  • I don’t think you can replicate Smushit on the client side. Apr 9, 2011 at 20:22
  • 1
    $mush-it => $mu-$hit. Haha, I made myself sad using jQuery.....
    – user7892745
    May 2, 2017 at 11:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.