How to compress images for a website without ruining them

Images are usually the heaviest thing on a web page, and page weight is the difference between a site that feels instant and one that visitors abandon before it paints. The good news is that most images can lose 80% of their file size without any visible change at all. Here is the recipe.

Step 1: resize before you compress

This is the step people skip, and it saves more than everything else combined. File size scales with pixel count, which scales with the square of the width — so halving a 4000-pixel image to 2000 pixels removes three quarters of the data before the encoder even runs.

Find the widest the image is ever displayed at, double it for high-density screens, and resize to that. For a typical blog with a 700-pixel content column, 1400 pixels is plenty. Uploading a 4000-pixel camera file into that column wastes roughly 97% of the bytes it costs.

Step 2: pick the right format

Format choice frequently matters more than the quality slider:

• WebP for anything on a web page. Roughly 25–35% smaller than JPEG at matching quality, and supported everywhere that matters.
• JPEG when the file is leaving your control — an older print service, a legacy CMS, a client on outdated software.
• PNG only for logos, icons, screenshots and graphics with flat colour or transparency. A photograph saved as PNG is routinely five to ten times larger than it needs to be.

Step 3: set quality to 80 and check the hard parts

Quality 80 is the sweet spot for photographs — typically a 60–80% reduction with no visible difference. After compressing, open the result at 100% and look at the places compression fails first: gradients in a clear sky, the boundary between hair and background, and dark shadow areas. If those are clean, try 70. If you see banding or a mottled texture, go back up.

Images containing text, screenshots or sharp diagrams degrade far faster than photographs. Lettering picks up a visible halo well before a landscape shows any damage. Keep those above 90, or use PNG.

Targets worth aiming at

Step 4: the two HTML attributes people forget

Compression is only half the job. Add loading="lazy" to every image below the fold so the browser defers them until the visitor scrolls near. And always set explicit width and height attributes — that lets the browser reserve the space before the image arrives, which prevents the page from jumping as it loads. Layout shift is scored separately in Core Web Vitals, and it is entirely avoidable.

Resize first, choose WebP, compress at 80, add lazy loading and dimensions. Four steps, and a 5 MB photo becomes a 90 KB one nobody can tell apart.

Do it now

The image compressor does steps one to three in a single pass — set a maximum width, pick WebP, drag your batch in. It runs in your browser, so a folder of thirty photos takes seconds rather than an upload queue.