Select one or more image files in the file input below to test out the code, no worries, nothing is uploaded, everything stays in the browser. addEventListener ( 'change', ( e ) => ) A quick and easy way to save bandwidth and decrease download time is to shorten JavaScript and CSS file lengths. Get the selected files from the file input const input = document. If you’re not sure what number to assign to quality, just type auto. We’ll handle the TODO items in the next section. cloudinary.url().transformation(new Transformation().quality(60)).imageTag('cat.jpg') Code language: CSS (css) In the code above, quality is a compression parameter that specifies the image quality and size for storage. Let’s set up a file input field, we’ll listen for the 'change' to detect when the user has selected one or more files. To prevent other files from being added we can optionally set the file input accept attribute to 'image/*' The multiple attribute enables selection of more than one file. In the example below we’ll accept all kinds of files but will only compress the images. If you’re in a hurry, or find it easier to read the code itself, you can jump to the final code snippet here Getting The Selected Image Files

To make sure users can upload their images and prevent super big images from being uploaded we can compress image data before upload without bothering the user with all kinds of requirements. We’ll compress images and save them back to the file input ready for upload. In this quick tutorial we’ll use JavaScript to compress images selected with a file input element.

Javascript reduce image file size