Compress Images Online — JPEG, PNG & WebP

What Is Image Compression?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Key Features

JPEG vs PNG vs WebP

Compression Examples

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (43 KB, 1200×800)

logo-transparent.png (19 KB at quality 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

How to Compress Images Online

1. 1

   Upload Your Images

   Drag and drop images into the upload area, or click to browse your files. You can select up to 20 JPEG, PNG, or WebP images at once, each up to 10MB.

2. 2

   Adjust Quality

   Use the quality slider to set your desired compression level (0–100). The default is 75, which offers a good balance. Watch the file sizes and compression ratios update in real time.

3. 3

   Download Results

   Click Download on any individual file, or use Download All to save every compressed image. Use the Compare button to visually inspect the quality before downloading.

Use Cases

Website Performance Optimization

Reduce image file sizes before uploading to your website. Smaller images load faster, improving Core Web Vitals scores (especially Largest Contentful Paint), reducing bandwidth costs, and improving SEO rankings.

Email Attachment Size Reduction

Compress images before attaching them to emails to stay within attachment size limits (typically 10–25MB). A batch of 20 photos can often be compressed from 50MB to under 10MB.

Social Media Upload Preparation

Pre-compress images before uploading to social media platforms. While platforms re-compress images automatically, starting with an optimally compressed file gives you more control over the final quality.

App and Game Asset Optimization

Compress UI assets, textures, and sprites for mobile apps, games, and progressive web apps. Smaller assets mean faster downloads, less storage usage, and smoother user experiences.

Document and Presentation Optimization

Reduce the size of images embedded in PDFs, Word documents, and presentations. A 50MB slide deck with high-resolution photos can often be reduced to 10MB without noticeable quality loss.

Technical Details

Canvas API Compression

This tool uses the HTML5 Canvas API's toBlob() method for compression. The image is drawn onto an invisible canvas element, then re-encoded with the specified quality parameter. For JPEG and WebP, the quality parameter (0.0–1.0) controls the lossy compression level. For PNG, the Canvas API ignores the quality parameter entirely — PNG encoding through Canvas is always lossless.

PNG Palette Quantization

Because Canvas toBlob() ignores the quality parameter for PNG, PNG output does not go through Canvas at all. The image is quantized to a color palette instead: the quality slider maps to a palette size — quality 75 gives 192 colors — and the result is written back as a real PNG with its alpha channel intact. Quality 100 maps to a lossless re-encode that changes no pixels. If the quantized file is not smaller than the original, the tool discards it and keeps your original bytes.

Quality Parameter Behavior

The quality slider maps to the Canvas toBlob() quality parameter: 100 = 1.0 (highest quality, largest file), 0 = 0.0 (lowest quality, smallest file). For JPEG, quality 75 (0.75) is generally the sweet spot — below 50, artifacts become noticeable. For WebP, the same quality value produces slightly smaller files than JPEG with comparable visual quality.

Browser Memory and Limits

Each image exists in memory as both the original File object and the compressed Blob, plus two object URLs for preview display. With 20 images at 10MB each, peak memory usage can reach approximately 400MB. Object URLs are revoked when images are cleared or the page is unloaded to prevent memory leaks.

Best Practices

Start at Quality 75 for JPEG/WebP

Quality 75 is the recommended starting point for most use cases. It typically reduces file size by 60–80% with minimal visible quality loss. Only increase quality above 85 for images where fine detail preservation is critical (e.g., medical imaging, print-quality photography).

Use WebP When Possible

WebP produces 25–35% smaller files than JPEG at the same visual quality and supports transparency like PNG. All modern browsers support WebP as of 2024. Convert JPEG and PNG images to WebP for the best compression-to-quality ratio on the web.

Keep Original Files

Always keep your original, uncompressed images as source files. Lossy compression is irreversible — re-compressing an already-compressed image degrades quality further without significant size reduction (known as generation loss).

Check Quality Before Downloading

Use the Compare button to visually inspect compression artifacts before downloading. Pay special attention to areas with text, sharp edges, and subtle gradients — these are where JPEG artifacts are most visible.

Batch Similar Images Together

Images with similar characteristics (same subject type, resolution, color depth) compress best with the same quality setting. Batch your photos separately from your graphics/logos for optimal results.

Frequently Asked Questions