How to Compress Images in the Browser Using JavaScript

Image compression is one of those small features that can make a website feel much faster.

If users upload large photos from a phone, the original image can easily be 3MB, 5MB or even 10MB. For many apps, blogs, forms and dashboards, that is bigger than needed.

The good news is that basic image compression can be done directly in the browser using JavaScript, canvas and canvas.toBlob().

In this article, we will look at a simple browser-based image compression workflow.

Why compress images in the browser?

Browser-based image compression is useful because it can reduce file size before the file is uploaded.

That can help with:

faster uploads
lower bandwidth usage
better mobile experience
smaller profile photos
online form image limits
website image optimization
image previews before upload

For many simple image tasks, the browser can resize and compress the image without needing to send the original large file to a server first.

Basic browser image compression flow

A common browser image compression flow looks like this:

User selects an image file.
JavaScript loads the image using createImageBitmap().
The image is drawn on a canvas.
The canvas exports a smaller image using canvas.toBlob().
The output file is downloaded or uploaded.

Example: compress JPG in the browser

Here is a simple JPG compression function:

export async function compressJpg(file, options = {}) {
  const { quality = 0.82, maxWidth = 1600, maxHeight = 1600 } = options;

  if (!file || !file.type.startsWith("image/")) {
    throw new Error("Please provide a valid image file.");
  }

  const bitmap = await createImageBitmap(file);

  const scale = Math.min(1, maxWidth / bitmap.width, maxHeight / bitmap.height);

  const width = Math.round(bitmap.width * scale);
  const height = Math.round(bitmap.height * scale);

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("Canvas is not supported in this browser.");
  }

  ctx.drawImage(bitmap, 0, 0, width, height);

  const blob = await new Promise((resolve, reject) => {
    canvas.toBlob(
      (outputBlob) => {
        if (!outputBlob) {
          reject(new Error("JPG compression failed."));
          return;
        }

        resolve(outputBlob);
      },
      "image/jpeg",
      quality
    );
  });

  return new File(
    [blob],
    file.name.replace(/\.(png|webp|avif|heic|jpeg|jpg)$/i, ".jpg"),
    { type: "image/jpeg" }
  );
}

What does this code do?

The function does a few important things:

checks that the selected file is an image
loads the image in the browser
resizes it if it is too large
draws it on a canvas
exports it as a compressed JPG
returns a new compressed File

The quality value controls how much compression is applied.

For JPG, a quality value between 0.75 and 0.85 is often a good starting point.

Resize before compression

A very large image should usually be resized before compression.

For example, a phone image may be 4000px wide. If the final use is a web page, profile photo or online form, that may be unnecessary.

Resizing to something like 1200px or 1600px wide can reduce file size a lot before quality compression is even applied.

Target KB compression

Sometimes users need an image under a specific file size, such as:

under 50KB
under 100KB
under 200KB
under 500KB

This is common for online forms, job applications, exam portals, government websites and profile photo uploads.

Target KB compression usually needs repeated attempts:

export the image at a starting quality
check the output file size
reduce quality if the image is still too large
repeat until the file is near the target size

Here is a simple example:

export async function compressToTargetKb(file, options = {}) {
  const {
    targetKb = 100,
    maxWidth = 1600,
    maxHeight = 1600,
    minQuality = 0.35,
    initialQuality = 0.9,
    qualityStep = 0.07,
  } = options;

  if (!file || !file.type.startsWith("image/")) {
    throw new Error("Please provide a valid image file.");
  }

  const targetBytes = targetKb * 1024;
  const bitmap = await createImageBitmap(file);

  const scale = Math.min(1, maxWidth / bitmap.width, maxHeight / bitmap.height);

  const width = Math.round(bitmap.width * scale);
  const height = Math.round(bitmap.height * scale);

  const canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("Canvas is not supported in this browser.");
  }

  ctx.drawImage(bitmap, 0, 0, width, height);

  let quality = initialQuality;
  let bestBlob = null;

  while (quality >= minQuality) {
    const blob = await new Promise((resolve, reject) => {
      canvas.toBlob(
        (outputBlob) => {
          if (!outputBlob) {
            reject(new Error("Compression failed."));
            return;
          }

          resolve(outputBlob);
        },
        "image/jpeg",
        quality
      );
    });

    bestBlob = blob;

    if (blob.size <= targetBytes) {
      break;
    }

    quality -= qualityStep;
  }

  return new File(
    [bestBlob],
    file.name.replace(/\.(png|webp|avif|heic|jpeg|jpg)$/i, ".jpg"),
    { type: "image/jpeg" }
  );
}

JPG vs PNG vs WebP

Different formats behave differently.

JPG

JPG is usually best for photos, portraits, product images and camera images.

It can compress very well, but too much compression can make the image look blurry or blocky.

PNG

PNG is useful for screenshots, icons, logos, transparent graphics and sharp text.

PNG files can be larger than JPG because PNG keeps sharp edges and transparency.

WebP

WebP is useful for modern websites because it can often create smaller files than JPG or PNG while keeping good quality.

Privacy note

Browser-based image compression can be privacy-friendly because the browser can process the image locally for many simple tasks.

This is useful for personal photos, document images, ID photos, profile photos and online form uploads.

Developers should still clearly explain how their tool works and avoid collecting unnecessary files or user data.

Open-source examples

I created a small GitHub repository with browser image compression examples:

https://github.com/comkenia-llc/browser-image-compression-tools

It includes examples for:

JPG compression
PNG compression
target KB compression
image resizing
JPG to WebP conversion

Live browser-based tools

You can also try the live tools here:

Compress Image Online: https://imagescompression.com/compress-image
Compress JPG Online: https://imagescompression.com/compress-jpg
Compress PNG Online: https://imagescompression.com/compress-png
Compress Image Under 50KB: https://imagescompression.com/compress-image-to-50kb
Compress Image to 100KB: https://imagescompression.com/compress-image-to-100kb
Compress Image to 200KB: https://imagescompression.com/compress-image-to-200kb
Compress Image for Online Form: https://imagescompression.com/compress-image-for-online-form
Resize Image: https://imagescompression.com/resize-image

Final thoughts

Browser-based image compression is a practical way to improve user experience.

For many apps, the best workflow is simple:

resize large images
compress them in the browser
show a preview
upload or download the smaller result

It is especially useful for mobile users, online forms, dashboards, profile photos and website image optimization.

推荐订阅源

DEV Community