Image Compression

Compress images to a target quality level before upload.

(function() {
 var logEl = document.getElementById('log');
 function log(m) { var d = document.createElement('div'); d.className='pkg-log-entry'; d.textContent=m; logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight; }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 accept: 'image/*',
 imageCompress: { quality: 0.6, outputType: 'image/jpeg' },
 onImageProcessed: function(processed, original) {
 var saved = Math.round((1 - processed.size/original.size) * 100);
 log(original.name + ': saved ' + saved + '% (' + Math.round(original.size/1024) + 'KB -> ' + Math.round(processed.size/1024) + 'KB)');
 }
 });
})();

Re-encoding before the upload

imageCompress defaults to null. Configured, images are re-encoded in the browser at the quality you set, so a phone photo that was 6 MB arrives as a few hundred kilobytes. Nothing about the server has to change — it simply receives a smaller file.

Where the saving actually comes from

Most of it is resolution rather than quality. A 4000 px photo displayed in a 600 px box is carrying pixels nobody will ever see; bounding the dimensions saves far more than shaving the JPEG quality, and it is much less visible. Compress only when the original is not the thing you need to keep — for archival or print, upload the file as it is.