🗜️ Image Compressor

Complete Guide: Image Compressor

Image compression is one of the highest-leverage optimizations you can apply to a website. Images typically account for 50–70% of a page's total byte weight, and reducing that weight directly improves load times, Core Web Vitals scores, and user experience — especially on mobile connections. This guide explains the formats, algorithms, and trade-offs involved in effective image compression.

Lossy vs Lossless Compression

Lossy compression permanently discards some image data to achieve smaller file sizes. The original cannot be perfectly reconstructed from a lossy-compressed file. JPEG is the classic lossy format — it is excellent for photographs where the human eye cannot easily detect the discarded detail. Lossless compression removes redundancy without discarding any data, allowing perfect reconstruction. PNG uses lossless compression and is ideal for screenshots, logos, and graphics with flat colors or text.

Format Comparison

• JPEG: Best for photographs. Quality setting of 80–85% typically provides an excellent visual result at 60–80% file size reduction from the raw image.
• PNG: Best for graphics, screenshots, and images requiring transparency. Lossless, so file sizes can be large for complex imagery.
• WebP: Google's format supports both lossy and lossless modes. WebP lossy files are typically 25–35% smaller than equivalent JPEG files at the same perceptual quality. Supported in all modern browsers.
• AVIF: Based on the AV1 video codec. Achieves 50% smaller files than JPEG at equivalent quality. Excellent browser support as of 2024, though encoding is slower.

The Quality Slider: Finding the Sweet Spot

When compressing JPEG or WebP in lossy mode, the quality parameter (typically 0–100) controls the trade-off between file size and visual fidelity. The 80% quality setting is widely regarded as the sweet spot for most photographic content — file sizes are dramatically reduced while compression artifacts remain imperceptible to most viewers. Dropping below 60% produces visible blocking and ringing artifacts around sharp edges.

Browser-Side Compression with the Canvas API

Modern browsers can compress images entirely client-side using the Canvas API. The technique draws the image onto a canvas element and then exports it using canvas.toBlob() or canvas.toDataURL() with a specified MIME type and quality parameter:

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) => handleCompressedBlob(blob),
  'image/webp',
  0.80  // quality: 0.0 - 1.0
);

Metadata Stripping (EXIF)

JPEG files often contain EXIF metadata including camera model, GPS coordinates, creation date, and lens information. This metadata can add 10–30 KB to a file and is almost never needed for web display. The Canvas API export process automatically strips EXIF data, which is one of its hidden benefits beyond compression. Be aware of privacy implications when publishing photos with GPS coordinates still embedded.

Progressive JPEG

A progressive JPEG loads in multiple passes — first at low resolution, then refining detail with each subsequent pass. This gives users a blurry preview almost immediately, improving perceived load time. Non-progressive (baseline) JPEGs load top-to-bottom. Progressive encoding adds slight complexity but is generally recommended for large images above 10 KB.

Core Web Vitals: LCP Impact

The Largest Contentful Paint (LCP) metric measures how quickly the largest visible element in the viewport loads. For most pages, this is a hero image. Google's Core Web Vitals threshold for a "good" LCP is under 2.5 seconds. Compressing your hero image aggressively, converting it to WebP or AVIF, and serving it with appropriate width and height attributes to prevent layout shift are the most impactful steps you can take to improve LCP.

For encoding images as inline data URIs, see Image to Base64. To convert vector graphics before compressing, use the SVG to PNG converter first.