Image Compression for the Web: A Practical Guide

Images are usually the heaviest part of a web page. A single uncompressed hero photo can outweigh the rest of the page’s HTML, CSS, and JavaScript combined. Compressing images is therefore one of the highest-leverage performance optimizations you can make — it cuts bandwidth, speeds up page load, and improves your Core Web Vitals. This guide explains how image compression works and the practical settings that deliver the best size-to-quality trade-off.

Lossless vs lossy compression

Image compression comes in two flavors.

Lossless compression preserves every pixel exactly. When you decode a losslessly compressed image, you get back the identical bitmap you started with. PNG uses lossless compression (specifically DEFLATE). The size reduction comes from run-length and dictionary encoding of the pixel data, with no information discarded. Lossless compression achieves modest reductions — typically 10–50% — because it cannot throw anything away.

Lossy compression discards information that the human eye is unlikely to notice. JPEG and lossy WebP use this approach: they transform the image into a frequency domain, quantize the high-frequency detail (which the eye is less sensitive to), and discard the least perceptible data. The result is dramatically smaller files — often 70–90% smaller than the uncompressed original — at the cost of irreversible quality loss and, at aggressive settings, visible artifacts.

The key insight: for photographs, lossy compression is almost always the right choice, because the quality loss is invisible at moderate settings and the size savings are enormous. For graphics with sharp edges, text, or few colors (logos, screenshots, diagrams), lossless PNG preserves the crispness that lossy compression would blur.

The formats

• JPEG — the classic lossy format for photographs. Universally supported. No alpha channel (no transparency). Good quality at quality 0.7–0.8.
• PNG — lossless, supports transparency. Larger files, ideal for logos, icons, and screenshots.
• WebP — Google’s modern format, supports both lossy and lossless modes plus transparency. Lossy WebP is typically 25–35% smaller than JPEG at equivalent quality. Supported by all modern browsers.
• AVIF — even newer, with better compression than WebP, but slower to encode and not yet universal.

For new projects, serve WebP where available (with a JPEG or PNG fallback) for the best size-to-quality ratio.

How browser-based compression works

The Image Compressor compresses images entirely in your browser using the HTML Canvas API. The image is drawn onto a canvas, optionally resized to smaller dimensions, and re-exported with the chosen quality. Because the Canvas API exposes the raw pixels, the same compression logic that runs on a server can run locally — which means your images never leave your device. This is especially valuable for personal or confidential photos.

Practical settings

Photographs

• Format: JPEG or lossy WebP.
• Quality: 0.65–0.80 for most uses. At 0.70 the file is typically 60–80% smaller than the original with no visible difference on a screen.
• Dimensions: Resize to the largest size you will actually display. A 4000-pixel-wide photo displayed at 800 pixels is wasting 25× the data. For blog images, 1200–1600 pixels wide is plenty.
• Result: A 5 MB phone photo routinely compresses to 150–300 KB with no perceptible quality loss.

Graphics, logos, screenshots

• Format: PNG (lossless) to preserve sharp edges and text. JPEG would introduce ringing artifacts around text.
• Dimensions: Serve at the display size; do not rely on the browser to downscale.
• Further reduction: If the graphic has few colors, an optimized PNG or WebP lossless can shrink it further.

Thumbnails and icons

• Format: WebP lossy or PNG depending on content.
• Consider inlining: For tiny icons (under a few kilobytes), embed the image as a Base64 data URI to save an HTTP request. The Image to Base64 tool produces the data URI for you. Reserve this for small images — Base64 inflates the file by about 33% and cannot be cached independently.

The performance payoff

Image compression pays off in three places:

1. Page load time. Smaller images download faster, especially on mobile networks. Google’s PageSpeed Insights flags oversized images as one of the most common performance issues.
2. Bandwidth cost. For a site serving millions of page views, halving image size halves the image bandwidth bill.
3. Core Web Vitals. Largest Contentful Paint (LCP) is often determined by the hero image. Compressing and resizing that image is the single most effective LCP optimization.

A simple workflow

1. Resize first to the largest display dimensions you need. Resizing a 4000px photo to 1200px cuts the data by ~90% before any compression.
2. Compress with a quality around 0.70 for photographs, or use PNG for graphics.
3. Compare the original and compressed sizes — if the compressed file is barely smaller, the original was already compressed and you may need a lower quality or smaller dimensions.
4. Serve modern formats (WebP) where possible, with a fallback.
5. Test on a real device — quality that looks fine on a high-DPI desktop may look different on a phone.

You can run the entire compression step in your browser with the Image Compressor. It handles JPEG, PNG, and WebP, lets you tune quality and dimensions, and shows the before-and-after sizes so you can find the sweet spot — all without uploading a single pixel to a server.