Image Compressor

Reference

How does image compression work?

This tool uses the browser's built-in Canvas API to re-encode images at a lower quality setting. The image is drawn onto an HTML Canvas element, then exported using canvas.toBlob() with the selected format and quality level. This is lossy compression — redundant visual data is discarded using algorithms like Discrete Cosine Transform (DCT) for JPEG and predictive coding for WebP. The result is a significantly smaller file with minimal perceptible quality loss.

JPEG vs WebP vs PNG — which format to choose

JPEG: Best for photographs and images with complex color gradients. Supports quality adjustment from 1–100%. No transparency support. The most widely compatible format — works everywhere. WebP: Developed by Google, WebP achieves 25–35% smaller file sizes than JPEG at equivalent visual quality. Supports transparency (alpha channel) and animation. Supported by all modern browsers since 2020. The recommended format for web use. PNG: Lossless compression — no quality loss at any setting. Best for screenshots, graphics with sharp edges, text overlays, logos, and images that require transparency. Quality slider has no effect on PNG output since the format is inherently lossless.

Why optimize images for the web?

Images account for roughly 50% of total page weight on the average website according to the HTTP Archive. Unoptimized images are the number one cause of slow Largest Contentful Paint (LCP) — a Core Web Vital that directly affects Google search rankings. Compressing a hero image from 2 MB to 200 KB can cut load time by several seconds on mobile connections. Google recommends keeping total page weight under 1.6 MB for good mobile performance — proper image compression is often the single biggest win to achieve this target.

Use cases for image compression

Web performance — reduce image sizes to meet Core Web Vitals thresholds and improve Lighthouse scores. Email attachments — compress images below typical 25 MB attachment limits (Gmail, Outlook). Social media — optimize images for upload size limits: Twitter (5 MB), Instagram (30 MB), LinkedIn (10 MB). E-commerce — compress product photos without visible quality loss to improve page speed and conversion rates. Documentation — shrink screenshots for README files, wikis, and Confluence pages to keep repositories and pages lightweight.

Choosing the right quality setting

For JPEG, a quality of 75–85% offers the best balance between file size and visual fidelity — controlled studies show most users cannot distinguish quality above 85%. Below 60%, compression artifacts (blocky areas, color banding) become noticeable, especially in gradients and skin tones. WebP at quality 80 typically matches JPEG at quality 90 while being 30% smaller. For PNG, the quality slider has no effect — PNG is always lossless. Use PNG only when you need pixel-perfect reproduction (screenshots with text, logos, icons) or alpha transparency.

Privacy

All image processing runs 100% in your browser using the Canvas API. No images are uploaded to any server — your files never leave your device.