Image Compressor

Oversized images are one of the most common causes of slow page loads. A 4 MB hero image that could have been a 400 KB WebP is costing you Core Web Vitals points, bandwidth on every visit, and conversions from users on slow connections. Drop your image here, choose a quality level, and download the compressed result — all without sending a single byte to a server.

How Browser-Based Image Compression Works

Modern browsers expose the Canvas API, which lets JavaScript draw image data onto an off-screen canvas and re-encode it at a target quality level. The key steps are:

1. The source image is decoded into raw pixel data and painted onto a canvas at its original dimensions.
2. canvas.toBlob() re-encodes those pixels using the selected codec (JPEG, WebP, or PNG) and the specified quality value.
3. The resulting Blob is handed back to JavaScript as an in-memory file — never transmitted anywhere.

Because the re-encoding happens entirely within the browser’s native image codec (the same one used to decode images in <img> tags), the output is byte-compatible with any image viewer or web server.

JPEG vs WebP vs PNG: When to Use Each Format

Rule of thumb: Use WebP for any image delivered over the web. Use JPEG when you need universal compatibility (email, legacy systems). Use PNG only when lossless quality or transparency is required — PNG files are typically 2–5× larger than equivalent JPEG or WebP.

Quality Settings Guide

The quality slider controls the trade-off between file size and visual fidelity:

• Quality 80–90 (recommended default): Virtually indistinguishable from the original at normal viewing sizes. Reduces file size by 40–60% compared to a camera-original JPEG. Use this for web images.
• Quality 60–79 (balanced): Noticeable only when zoomed in or viewed side-by-side with the original. Saves 60–75%. Good for thumbnails and preview images.
• Quality 40–59 (aggressive): Visible compression artifacts on edges and smooth gradients. Saves 75–85%. Acceptable for very small thumbnails or low-bandwidth contexts.
• Quality below 40 (heavy compression): Significant artifacts. Saves 85–95%. Only appropriate when file size constraints are extreme.

For most web use cases, quality 75–85 provides the best balance. The exact savings depend on image content — high-frequency detail (foliage, textures) compresses less efficiently than smooth gradients or flat colors.

Compressing Images with the Canvas API in JavaScript

function compressImage(file, outputFormat = 'image/webp', quality = 0.8) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const objectUrl = URL.createObjectURL(file);

    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);

      canvas.toBlob(
        (blob) => {
          URL.revokeObjectURL(objectUrl);
          if (blob) resolve(blob);
          else reject(new Error('Compression failed'));
        },
        outputFormat,
        quality  // 0.0 – 1.0; ignored for image/png
      );
    };

    img.onerror = () => reject(new Error('Failed to load image'));
    img.src = objectUrl;
  });
}

// Usage
const file = document.querySelector('input[type="file"]').files[0];
const compressed = await compressImage(file, 'image/webp', 0.8);
console.log(`${file.size} → ${compressed.size} bytes`);

Note that quality is a value between 0.0 and 1.0, not a percentage — pass 0.8 for 80% quality. The parameter is ignored for image/png because PNG is always lossless.

Frequently Asked Questions

Is lossy compression reversible? No. Once you compress a JPEG or WebP at quality 80, the discarded detail is gone. Always keep your original file. Re-compressing an already-compressed image at a lower quality degrades it further each time — this is called generation loss.

Can PNG be compressed with this tool? Yes, but PNG compression is lossless — the canvas re-encodes the PNG using deflate compression, which may produce a slightly different file size than the original (sometimes larger, sometimes smaller). For significant size reduction of a PNG, convert it to WebP instead.

What is the maximum file size? There is no enforced limit — the constraint is browser memory. Images larger than 50 MB or dimensions larger than 8000×8000 may cause memory pressure on low-end devices. For very large files, consider resizing first.

Does this tool upload my images? No. Everything runs in your browser using the Canvas API. Your images never leave your device and are not sent to any server.

Why is the WebP output sometimes larger than the JPEG input? This can happen when the source JPEG was already highly compressed (quality below 50) and the WebP encoder produces a larger file at your chosen quality setting. Try lowering the quality slider, or accept that the input was already well-optimized.