Compressing Large Images for Websites Without Sacrificing Quality

Large, unoptimized images are one of the most common causes of slow websites. Google found that 53% of mobile users abandon sites that take longer than 3 seconds to load (Google/SOASTA, 2017). Images are often the biggest contributor to that load time. Compressing them is one of the highest-return optimizations you can make.

Why Image Size Matters

High-resolution images may look good in a photo editor, but they create problems on the web:

Slow load times: Every unnecessary byte delays rendering, especially on mobile connections.
SEO impact: Core Web Vitals (LCP in particular) directly affect search rankings, and large images are a primary cause of poor LCP scores.
Bandwidth costs: More data transferred means higher hosting bills and slower delivery to users in bandwidth-constrained regions.

Image compression reduces file size without a noticeable drop in visual quality. The right approach depends on the image type and the format you're targeting.

The Two Types of Image Compression

Lossy Compression

Lossy compression removes data the human eye is unlikely to notice, significantly reducing file size. The quality reduction is real but usually imperceptible at moderate settings. This is the right approach for photos and complex visuals. Formats: JPEG, WebP (lossy mode).

Lossless Compression

Lossless compression reorganizes data to reduce file size without discarding any of it. Every pixel is preserved exactly. This is the right approach for graphics, icons, screenshots, and anything requiring sharp edges or transparency. Formats: PNG, WebP (lossless mode).

Best Practices for Compressing Images

1. Choose the Right Format

Format choice matters more than compression settings:

JPEG for photographs and images with complex color gradients.
PNG for images with transparency, text, or sharp geometric elements.
WebP for web delivery where you control the environment — supports both lossy and lossless, and is typically 25–35% smaller than equivalent JPEG or PNG.

2. Resize Before Compressing

Serving a 4000px-wide photo in a 800px container wastes data regardless of compression. Resize the image to its actual display dimensions first. The Image Resizer handles this in the browser without an upload.

3. Adjust Quality Settings

Compression isn't one-size-fits-all. A quality setting of 80–85% for JPEG typically preserves visual quality while cutting file size substantially. For WebP, similar quality settings yield even smaller files. The re;file labs Image Compressor lets you preview the output before downloading, so you can find the right balance.

Tools

Browser-Based (No Upload)

re;file labs Image Compressor: runs entirely in your browser via WebAssembly. Files stay on your device.
Squoosh (by Google): also browser-based, good for detailed codec-level control.

Libraries and CLI

Sharp: high-performance Node.js image processing library, good for build pipelines.
ImageMagick: command-line tool for batch compression and format conversion.
Squoosh CLI: automates Squoosh's codec options for CI/CD workflows.
@refilelabs/image: Node.js package using the same Rust processing core as the browser tools.

Desktop

ImageOptim (Mac): drag-and-drop optimization for PNG and JPEG.
RIOT (Windows): detailed control over compression levels per format.

The Privacy Angle

Most online compression tools require uploading your image to a server. For personal photos, design work, or anything containing sensitive content, that's worth thinking about. Browser-based tools like the re;file labs Image Compressor and Squoosh process files locally and never transmit them.

Where to Start

If you have a website with large images and haven't touched compression yet, the order of operations is:

Convert to WebP where browser support allows (PNG to WebP or JPEG to WebP).
Resize images to their actual display dimensions.
Run through a compressor with a quality setting around 80–85%.

That sequence alone will cut most image payloads by 50% or more without visible quality loss.