---
title: "How To Resize and Compress an Image in JavaScript for Upload"
description: "Learn how to downscale an image in JavaScript by reducing its size and quality before uploading it to your server."
url: "https://img.ly/blog/how-to-compress-an-image-before-uploading-it-in-javascript/"
type: "blog"
date: "2022-03-04"
author: "Antonello"
tags: ["How-To","JavaScript","Photo Editing","Web Development","Mobile App Development","Tech","Push2Medium","Tutorial"]
---

> This is the markdown version of [How To Resize and Compress an Image in JavaScript for Upload](https://img.ly/blog/how-to-compress-an-image-before-uploading-it-in-javascript/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

In this article, you will learn to compress an image in JavaScript and then upload it to [Imgur](https://imgur.com/). Similar to our previous guide on resizing images, and the one on drawing on images, you can accomplish everything with the HTML5 [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) element and we will involve any external libraries for this.

Smartphones cameras have become increasingly accurate and enhanced their photo quality for years. Consequently, their file size has grown as well. Since the speed of the average network has not improved at the same pace, it is essential to compress the images before uploading them.

Compressing is about downscaling an image. In other words, you want to reduce either its size or quality or both. By doing so, you can avoid uploading large images, saving the end-user time and money.

## Compressing an Image With `<canvas>`

You can clone the [GitHub repository that supports this article](https://github.com/Tonel/how-to-compress-an-image-in-javascript-imgly) with the following commands:

```
git clone https://github.com/Tonel/how-to-compress-an-image-in-javascript-imgly
```

Then, you can try the demo application by opening the `index.html` file in your browser.

Otherwise, keep following this step-by-step tutorial and learn how to build the demo application.

### 1\. Implementing the Compression Logic

You can compress an image by solely using the HTML [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) element. This is a powerful image manipulation tool that allows you to achieve many results, as we have already explored [in our blog](https://img.ly/blog/tag/javascript.md?utm_source=imgly&utm_medium=blog&utm_campaign=howtos).  
Now, let’s delve into how to compress an image with `canvas`:

```javascript
function compressImage(imgToCompress, resizingFactor, quality) {
  // resizing the image
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToCompress.width;
  const originalHeight = imgToCompress.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.drawImage(
    imgToCompress,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  // reducing the quality of the image
  canvas.toBlob(
    (blob) => {
      if (blob) {
        // showing the compressed image
        resizedImage.src = URL.createObjectURL(resizedImageBlob);
      }
    },
    'image/jpeg',
    quality
  );
}
```

This function is an extension of the `resizeImage()` function defined in [this](https://img.ly/blog/how-to-resize-an-image-with-javascript.md?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) article. So, follow the link to that tutorial to learn more about it.

What is new here are the last few lines, which take care of reducing the quality of the uploaded image based on the `quality` parameter. As you can see, the last part of the `compressImage()`is based on the [`toBlob()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) function. This transforms the image stored in the canvas into a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) object and compresses it based on the last parameter passed to the function. This last parameter represents the quality of the target image file.

Just like `resizingFactor`, `quality` must contain a [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) between 0 and 1.

Also, since the `toBlob()` function returns a `Blob` object, you can store it in a global variable. Then, you can use the `blob` object representing the compressed image file to upload it to your server. Let’s see how.

### 2\. Uploading an Image to Imgur

First, you need an Imgur account. If you already have one, log in [here](https://imgur.com/signin). Otherwise, create a new account for free [here](https://imgur.com/register).

Now, register an application [here](https://imgur.com/signin?redirect=https%3A%2F%2Fapi.imgur.com%2Foauth2%2Faddclient) to have access to the [Imgur API program](https://apidocs.imgur.com/). Fill out the form as follows:

![Registering an application on Imgur](https://blog.img.ly/2022/03/n118lrk.png)

Then, click on “Submit” and you should get access to this page.

![The Client-ID Imgur page](https://blog.img.ly/2022/03/6wGxX79.png)

Store your `Client-ID` in a safe place. You will need it later.  
Now, you have everything required to start uploading images to your Imgur application.

Uploading an image to Imgur in JavaScript is easy and can be achieved with just a bunch of lines of code, as below:

```javascript
// compressedImageBlob represents the compressed image Blob to upload
const formdata = new FormData();
formdata.append('image', compressedImageBlob);

fetch('https://api.imgur.com/3/image/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    Authorization: 'Client-ID YOUR_CLIENT_ID',
  },
  body: formdata,
}).then((response) => {
  if (response?.status === 403) {
    console.error('Unvalid Client-ID!');
  } else if (response?.status === 200) {
    // retrieving the URL of the image
    // just uploaded to Imgur
    response.json().then((jsonResponse) => {
      console.log(`URL: ${jsonResponse.data?.link}`);
    });
  } else {
    console.error(response);
  }
});
```

Replace `YOUR_CLIENT_ID` with the `Client-ID` retrieved before, and you should now be able to use this snippet to upload your images to Imgur.

### 3\. Putting It All Together

Now it is time to see the `compressImage()` function in action through a simple example.

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>Compress and Resize an Image</h1>
    <p>Upload an image and compress it or use the following demo image</p>
    <input id="upload" type="file" accept="image/*" />
    <div>
      <h2>Original Image</h2>
      <img
        style="margin-top: 5px;"
        id="originalImage"
        src="demo.jpg"
        crossorigin="anonymous"
      />
    </div>
    <div style="margin-top: 5px;">
      <span>Resizing: </span>
      <input type="range" min="1" max="100" value="80" id="resizingRange" />
    </div>
    <div style="margin-top: 5px; margin-left: 8px;">
      <span>Quality: </span>
      <input type="range" min="1" max="100" value="80" id="qualityRange" />
    </div>
    <h2>Compressed Image</h2>
    <div><b>Size:</b> <span id="size"></span></div>
    <img id="compressedImage" />
    <div>
      <button id="uploadButton">Upload to Imgur</button>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>
```

```javascript
const fileInput = document.querySelector('#upload');
const originalImage = document.querySelector('#originalImage');

const compressedImage = document.querySelector('#compressedImage');
const resizingElement = document.querySelector('#resizingRange');

const qualityElement = document.querySelector('#qualityRange');
const uploadButton = document.querySelector('#uploadButton');

let compressedImageBlob;

let resizingFactor = 0.8;
let quality = 0.8;

// initializing the compressed image
compressImage(originalImage, resizingFactor, quality);

fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;

  // storing the original image
  originalImage.src = await fileToDataUri(file);

  // compressing the uplodaded image
  originalImage.addEventListener('load', () => {
    compressImage(originalImage, resizingFactor, quality);
  });

  return false;
});

resizingElement.oninput = (e) => {
  resizingFactor = parseInt(e.target.value) / 100;
  compressImage(originalImage, resizingFactor, quality);
};

qualityElement.oninput = (e) => {
  quality = parseInt(e.target.value) / 100;
  compressImage(originalImage, resizingFactor, quality);
};

uploadButton.onclick = () => {
  // uploading the compressed image to
  // Imgur (if present)
  if (compressedImageBlob) {
    const formdata = new FormData();
    formdata.append('image', compressedImageBlob);

    fetch('https://api.imgur.com/3/image/', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        Authorization: 'Client-ID YOUR_CLIENT_ID',
      },
      body: formdata,
    }).then((response) => {
      if (response?.status === 403) {
        alert('Unvalid Client-ID!');
      } else if (response?.status === 200) {
        // retrieving the URL of the image
        // just uploaded to Imgur
        response.json().then((jsonResponse) => {
          alert(`URL: ${jsonResponse.data?.link}`);
        });
        alert('Upload completed succesfully!');
      } else {
        console.error(response);
      }
    });
  } else {
    alert('Rezind and compressed image missing!');
  }
};

function compressImage(imgToCompress, resizingFactor, quality) {
  // showing the compressed image
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToCompress.width;
  const originalHeight = imgToCompress.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.drawImage(
    imgToCompress,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  // reducing the quality of the image
  canvas.toBlob(
    (blob) => {
      if (blob) {
        compressedImageBlob = blob;
        compressedImage.src = URL.createObjectURL(compressedImageBlob);
        document.querySelector('#size').innerHTML = bytesToSize(blob.size);
      }
    },
    'image/jpeg',
    quality
  );
}

function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}

// source: https://stackoverflow.com/a/18650828
function bytesToSize(bytes) {
  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

  if (bytes === 0) {
    return '0 Byte';
  }

  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
```

The `input` element allows users to upload an image. This is then passed to the `compressImage()` function along with the `resizingFactor` and `quality` values retrieved from the respective [range `input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) HTML elements. This function takes care of compressing the image, displaying it, and storing its `Blob` representation to the global `compressedImageBlob` variable. Finally, `compressedImageBlob` is uploaded to Imgur when the “Upload to Imgur” button is clicked.  
Notice that these two snippets are what allow you to implement the live example you can find at the beginning of the article.

## Final Considerations

Compressing an image in Vanilla JavaScript is easy. You can achieve this with no extra libraries and in a dozen of lines of code. At the same time, the resizing part of the process relies on an [image interpolation algorithm](https://entropymine.com/resamplescope/notes/browsers/) that changes according to the browser in use. This can lead to different results based on the end-user’s browser. Also, compressing while preserving quality is always tricky and can easily become a grueling goal to achieve.  
If you want to avoid this stress, consider adopting a commercial and browser-consistent solution like [PhotoEditorSDK](https://img.ly/products/photo-sdk.md). This library provides access to a wide set of tools that allow you to manipulate your images in many ways and with an advanced and easy-to-use UI.

## Resizing an Image with PhotoEditor SDK

First, read [this](https://img.ly/docs/pesdk/web/guides/umd/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) article from [the official documentation](https://img.ly/docs/pesdk/guides/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) to get started with `PhotoEditorSDK` in HTML and JavaScript. Then, you can use the [transform tool](https://img.ly/docs/pesdk/web/features/transform/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) to [resize](https://img.ly/docs/pesdk/web/features/transform/#image-resizing/?utm_source=imgly&utm_medium=blog&utm_campaign=howtos) your image, as shown below:

![resize-compress-javascript](https://blog.img.ly/2022/03/resize-compress-javascript.gif)

Check out this feature on the [PhotoEditorSDK demo page](https://img.ly/products/photo-sdk.md).

## Conclusion

In this article, we learned how to downscale an image in JavaScript before uploading it to your server. In detail, we resized and reduced the quality of an uploaded image before uploading it to Imgur. Everything was achieved by using only the HTML5 `<canvas>` element. This is a powerful tool supported by most browsers that allows you to resize and change the quality of an image with just a few lines of code. On the other hand, this process may not be browser-consistent. That is why we also introduced a commercial and more reliable solution – such as [PhotoEditorSDK](https://img.ly/products/photo-sdk.md).

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on [Twitter](https://twitter.com/imgly) with any questions, comments, or suggestions. To stay in the loop with our latest articles and case studies, subscribe to our [Newsletter](https://img.us13.list-manage.com/subscribe?u=dc9f652839dbb620d14d6d28d&id=04a306e4b2).

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.