Compress Images Before Uploading for Performance | JavaScript


This is episode 2 in a series on tips for building better user experience for your users with poor connectivity. In this episode, learn how to resize your images on …


Xem Thêm Bài Viết Về Mobile Khác:



  1. it is great, but how can I convert srcEncoded to a format such as we can get from (document.querySelector("#upload").files[0]). because when I POST to API backend using axios, it will be reject.

  2. This one was helpful. Dispite some misleading things such as :
    – All intermediate usages of DOM HTMLImageElement are not necessary (and actually adding confusion, should have been using new Image() objects for clarity)
    – line 29 of your code is wrong and I don't know why you don't get an error (the first parameter of .toDataURL() call is incorrect, should be directly the target type instead of the Image itself)
    But at the end of the day, the procedure is nicely describing how to resize an image with canvas and I wouldn't have achieved what I wanted without your help. So thank you.

  3. Love your videos. Towards the end, I got this error in my console.
    app.js:15 Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.
    at process
    at HTMLButtonElement.onclick

  4. This is a great technique for shrinking the size of the images before upload. The best part is the work is done in the client's browser and not by the server, which makes this solution scalable.

    I recently had to resize a bunch of images (on the server) and also ended up with a hybrid png/webp approach. So It would display the webp version if the browser supported it and fallback to the png version for older browsers.

    Source where I convert images to both png and webp:

    How I render the webp with png fallback:


Please enter your comment!
Please enter your name here