Does anyone know of any free script that compresses JPG, GIF and PNG files as much as possible?
-
4All three of these are already compressed formats. Compressing the existing images further would result in quality loss.– CharlesApr 9, 2011 at 19:45
-
what do you say about this "smushit.com"– xtremistApr 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.– user7892745May 2, 2017 at 11:34
5 Answers
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
-
1
-
6the image i am trying to compress using JIC is only make the size larger. has this happened to anyone else?– Soumya RJun 17, 2016 at 9:06
-
1
-
2regarding 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!– vjjjMay 10, 2017 at 20:17
-
2Yes. 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
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
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.
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;
}
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.
-
1
-
-
1$mush-it => $mu-$hit. Haha, I made myself sad using jQuery.....– user7892745May 2, 2017 at 11:37