How to Compress Images for the Web: A Complete Guide

Images are often the largest files on a web page. According to HTTP Archive data, images account for roughly half of the average page weight. Compressing images before serving them can dramatically reduce load times, lower bandwidth costs and improve Core Web Vitals scores. The good news is that modern compression techniques can shrink file sizes by 50-80% with little or no visible quality loss.

Why Image Compression Matters

Every kilobyte a browser downloads adds to the total page load time. Large, uncompressed images hurt performance in several measurable ways. They increase Largest Contentful Paint (LCP), which is a Core Web Vital that Google uses as a ranking signal. They consume more mobile data, which matters for users on metered connections. They also slow down Time to Interactive because the browser spends resources decoding oversized images.

Compressing images is one of the highest-impact optimizations you can make. A single hero image exported from a design tool at full quality might be 2 MB. After compression, that same image can often be reduced to 200-400 KB with no perceptible difference to the human eye.

Lossy vs Lossless Compression

Image compression falls into two categories: lossy and lossless. Understanding the difference is essential for choosing the right approach for each image.

Lossy Compression

Lossy compression permanently removes some image data to achieve smaller file sizes. The algorithm analyzes the image and discards information that the human eye is least likely to notice, such as subtle color variations in complex regions. JPEG and WebP (lossy mode) both use lossy compression. The trade-off is that you cannot recover the original quality once data is removed. However, at moderate quality settings (70-85%), the visual difference is negligible for most photographs and complex images.

Lossless Compression

Lossless compression reduces file size without discarding any data. The original image can be perfectly reconstructed from the compressed version. PNG and WebP (lossless mode) support lossless compression. This approach works by finding and eliminating redundancy in the data, similar to how ZIP compression works. Lossless compression produces larger files than lossy, but it preserves every pixel exactly. It is ideal for screenshots, diagrams, logos and any image where sharp edges and exact colors matter.

Image Formats Compared

Choosing the right format is the first step in image optimization. Each format has strengths that make it suitable for different types of content.

JPEG

JPEG is the most widely used format for photographs and complex images with smooth gradients. It uses lossy compression based on the Discrete Cosine Transform (DCT), which works well on photographs because the human eye is less sensitive to high-frequency color changes. JPEG supports a quality slider from 0 to 100. A quality of 80 typically reduces file size by 60-70% compared to quality 100, with minimal visible artifacts. JPEG does not support transparency.

PNG

PNG uses lossless compression and supports full alpha transparency. It is the best choice for screenshots, UI elements, logos, icons and any image with text or sharp edges. PNG files tend to be larger than JPEGs for photographs, but much smaller for images with large areas of solid color. PNG-8 (256 colors) produces significantly smaller files than PNG-24 (16 million colors) when the image has a limited color palette.

WebP

WebP is a modern format developed by Google that supports both lossy and lossless compression, plus alpha transparency. WebP typically produces files 25-35% smaller than JPEG at equivalent quality and 25% smaller than PNG for lossless images. All modern browsers support WebP. It is the recommended format for most web images today unless you need to support very old browsers.

Quality Settings: Finding the Sweet Spot

For lossy formats, the quality setting has the biggest impact on file size. The relationship between quality and file size is not linear. Dropping from quality 100 to 85 might reduce file size by 50%, while dropping from 85 to 70 might only save another 20%. Here are practical guidelines:

• Quality 85-90: Best for hero images, product photos and any image where visual fidelity is important. File size is roughly 40-50% smaller than uncompressed.
• Quality 75-85: The sweet spot for most web images. Produces excellent results for thumbnails, blog images and general content. File size is 50-70% smaller.
• Quality 60-75: Acceptable for background images, decorative elements and images that are displayed at small sizes. Artifacts may be visible on close inspection.
• Below 60: Noticeable quality degradation. Only suitable for very small thumbnails or situations where file size is the top priority.

Client-Side Compression with the Canvas API

You can compress images directly in the browser using the HTML5 Canvas API. This approach processes the image entirely on the client without uploading it to any server. The technique involves drawing the image onto a canvas element and then exporting it at a lower quality or in a more efficient format.

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const img = new Image();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      canvas.toBlob(
        (blob) => resolve(blob),
        'image/jpeg',
        quality
      );
    };

    img.src = URL.createObjectURL(file);
  });
}

The toBlob() method accepts a MIME type and a quality parameter between 0 and 1. Passing image/webp as the type produces a WebP file if the browser supports it. You can also resize images by setting the canvas dimensions smaller than the original, which further reduces file size.

Resizing: The Overlooked Optimization

Compression is only half the equation. Serving images at the correct dimensions is equally important. A 4000x3000 pixel photograph displayed in a 800x600 container wastes bandwidth on pixels the user never sees. Before compressing, resize the image to match its display size (accounting for 2x retina screens). A 1600x1200 image for an 800x600 display slot provides sharp retina quality while being 75% smaller in pixel count than the 4000x3000 original.

Best Practices for Web Performance

• Use WebP as your default format. Fall back to JPEG or PNG only for browsers that do not support WebP (now extremely rare).
• Set quality to 75-85 for lossy images. This range offers the best balance between visual quality and file size for most use cases.
• Resize before compressing. Never serve a 4000px image when the display size is 800px. Resize to 2x the display size for retina support.
• Use PNG only when you need transparency or pixel-perfect rendering. For photographs, JPEG or WebP will always produce smaller files.
• Lazy load images below the fold. Use the loading="lazy" attribute to defer loading images that are not immediately visible.
• Specify width and height attributes. This prevents Cumulative Layout Shift (CLS) by reserving space before the image loads.
• Use responsive images with srcset. Serve different sizes for different screen widths to avoid sending large images to mobile devices.
• Strip metadata. EXIF data from cameras can add 10-50 KB to each file. Remove it during compression unless you need it.

Quick Reference