48

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

Alper
  • 1
  • 12
  • 39
  • 78
xtremist
  • 909
  • 2
  • 9
  • 18
  • 4
    All three of these are already compressed formats. Compressing the existing images further would result in quality loss. – Charles Apr 09 '11 at 19:45
  • what do you say about this "smushit.com" – xtremist Apr 09 '11 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. –  May 02 '17 at 11:34

5 Answers5

61

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

DarkMukke
  • 2,469
  • 1
  • 23
  • 31
brunobar79
  • 992
  • 1
  • 9
  • 13
  • 1
    no way to decompress it back? – RWendi Aug 27 '13 at 06:34
  • @brunobar79 Can this export the image to a JavaScript Blob, so that we can upload it without the use of PHP? – Elegant.Scripting Nov 19 '15 at 23:10
  • @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. – brunobar79 Nov 25 '15 at 20:07
  • I was under the assumptiong canvasElement.toDataURL doesn't allow the quality of a PNG mimetype to be compressed, only JPEG. Can you confirm? https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL – char May 04 '16 at 01:49
  • 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 '16 at 09:06
  • It happens to me too, png images come back larger – tomermes Aug 20 '16 at 20:33
  • 1
    Instead of compressing, size is getting bigger – shreesha May 08 '17 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 '17 at 20:17
  • when I test your example, on the local I don't get the result, the console output is white : always process start... – visulo Jun 12 '17 at 13:42
  • 2
    Yes. The size is getting bigger. What is the use of using this library if it increases the size :( @brunobar79 – lakshman_dev Nov 27 '17 at 09:06
  • 1
    Use `jpg` as an output format when using JIC and all will be well. – Hassan Baig Jan 29 '18 at 23:23
  • http://makeitsolutions.com/labs/jic This link is displaying access denied error :( – pankaj May 29 '18 at 06:02
  • @pankaj it's fixed now. – brunobar79 Jul 31 '18 at 15:40
  • The link is broken plz fix it – sam Mar 06 '19 at 19:02
  • This library is buggy – Debangshu Paul Mar 08 '22 at 07:31
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

Community
  • 1
  • 1
typeof
  • 5,812
  • 2
  • 15
  • 19
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.

alextanhongpin
  • 607
  • 1
  • 8
  • 11
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;
}
user1791914
  • 616
  • 9
  • 23
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.

David Hellsing
  • 106,495
  • 44
  • 176
  • 212