Client-Side v/s Server-Side image compression

Question

I am working on something where users can upload pictures(size of image is not limited). Now I have two options either compressing the image using PHP(Server side) or compressing the image on client's machine using JavaScript and then uploading it to the server. I wanted to ask which approach out of the two would be better to implement? Compression on server might lead to heavy load on the server so I thought of client side compression however if I upload an image of bigger size (lets assume 12MB or so) then browser freezes up for a while due to the script.

There is as such no code just a theoretical question. Currently I am using J-I-C for client side compression

Any other good library for client side image compression? and which approach would be better? Any help would be much appreciated.

Answer 1

As @Xorifelse said, the question might be "too broad", but here are some ideas.

Cons

• user input must not be trusted; by doing compression on the client-side, you will have to do some sanity check on the server side anyway
• image compression (or optimization) involve complex operations, there is less choice in JavaScript than in other languages
• since the operations are complex, you are putting the stress on your clients; if you don't control their configuration (hardware, browser and vers), a situation you can have almost only in an intranet, you will probably degrade (or fail) the browsing experience of some of your users
• for all those reasons, client-side bugs are harder to track and fix and can quickly cost you more in development than adding resources to your servers

Pros

• you offload some computation from your servers
• you help people with a small bandwidth but powerful computers and recent browser to upload large images

Image compression tools

JPEG only

• http://www.graphicsmagick.org/
• http://www.vips.ecs.soton.ac.uk/
• https://blarg.co.uk/blog/comparison-of-jpeg-lossless-compression-tools (jpegoptim vs jpegtran vs jpegrescan vs mozjpeg)

BGP

• http://bellard.org/bpg/

My suggestion

• if you need to spare your server, you can make the images optimization in batch, asynchronously at some time of the day when your server is not heavily loaded
• if you have a lot of input, it can be cheaper to send the optimization to another server (ie: an on-demand virtual-machine at Amazon, DigitalOcean, Linode, etc., so you pay only when you need) than to upgrade your "main" server