Question

I am working on one of my project where user will upload the image. The uploaded image will be displayed using lightbox.

The problem is that user may upload an image of size say 5mb and so on. Because of this it takes large loading time. So I thought to reduce quality of image keeping the dimension same.

I know that we can use, imagejpeg() function, and pass third parameter which is quality say 90, that also reduces file size.

I need all image file size to be max 1mb, not more than that.

So, I am confused in what value should be pass as quality, so as to have optimum quality.

For eg. if uploaded image file size is 1.2mb, then say I will pass 90 as quality, that may bring down the size to less that 1mb, and also quality will be acceptable. Another case if uploaded file size is say 5mb, than if I pass 90 as quality, then file-size may not be less than 1mb. Here I need to pass less quality value (I guess).

So is there any method that helps me in determining optimum quality parameter that should be passed.

Many thanks for your time.

Answer 1

I spent ages messing with this same sort of thing a while back. First of all PNG and JPG formates i found to be quite awkward in guessing the results. JPG photos generally wont convert well to PNG, but vector jpg images will, vector png generally dont convert well to JPG, but photos will. You will find it very hard to ensure that the images get just under 1mb especially if you are not resizing them as well. If you do not resize them you will also hit more troubles – the quality will become less and less the larger the image is (kind of ironic).

You need a few versions of each image. Let me explain.

1. You want to keep the original, so you can refresh the images based on the original at any time in the future to lets say, increase the quality of the images later on or even get some new dimentions.

2. Using the original image with lightbox would generally be a bad idea. You would be better to resize it to fit inside say 1024 x 1024. That would more than satisfy most, and would usually give a reasonable file size. You could then offer the original to be downloaded if you wish. Using the largest file possible would usually result from unhappy visitors when the image takes ages to load and could even cost them a lot after some time through bandwidth usage (and you for the same reason).

The only way i can think of to do what you are asking is to create some horrible code performance wise that loops through, gradually decreasing the quality and checking the resulting image size. Once it finds the image size that is below 1mb it comes out the loop and uses that quality setting. I would really advise against this though.

P.S. Outside the scope of this answer i have mentioned in the comments the methodology of a solution i used.