A simple image compression workflow for cleaner pages and faster sharing

Start with the size at which the image will be displayed. Then choose an output format and compare the result at that size before adjusting compression quality. The useful settings depend on whether the image is a photograph, a diagram, or text. Keep the original and check the exported file rather than assuming a particular reduction in size.

Resize first, because pixels cost more than quality

Find out the widest the image will ever be displayed and resize to roughly that, allowing a factor of two for high-density screens. An image that renders inside a text column at around 700 points wide does not need to be 4000 pixels across, and halving the width of an image cuts the pixel count to a quarter before any compression happens at all. This one step usually does more than every other step combined.

Do the resize from the largest original you have rather than from an already-shrunk copy, and resize once. Repeated resizing softens edges each time, and softened edges compress worse, so a file that has been through three rounds of shrinking ends up both blurrier and bigger than one resized directly to the target. Check the resulting pixel width in the file properties instead of trusting the zoom level in your viewer.

Pick the format from what is in the picture

Photographs, meaning continuous tone with no hard edges, belong in a lossy format such as JPEG, or a modern equivalent if the places you post to accept it. Flat graphics with large areas of one colour, logos, diagrams, and any screenshot containing small text belong in PNG, because lossy compression works by discarding fine detail and fine detail is exactly what makes eight-point text legible.

The mistake to watch for is a screenshot saved as a heavily compressed JPEG. The text develops a grey halo, thin lines fringe, and the file is often no smaller than the PNG would have been because sharp edges are the worst case for that kind of compression. If a single image contains both a photo and a block of interface text, consider cropping it into two images rather than compromising on one format for both.

Step the quality down and stop at the first visible loss

Export the same resized image at a few quality settings, starting high and working down in steps rather than jumping to the bottom. View each result at one hundred percent zoom, not fitted to the window, because fitting hides artifacts by shrinking them. Look at the places compression fails first: smooth gradients such as sky or a plain wall, where you will see banding, and the boundary between a dark object and a light background, where you will see blocky fringing.

Keep the last setting before the one where you can see a problem, and write that setting down for the kind of image you just processed. Photos and interface captures land in different places, so after a few sessions you will have two or three defaults and you can stop testing every file. If a size limit forces you below the setting that looked clean, go back and reduce the dimensions further instead of compressing harder. Fewer good pixels beat more damaged ones.

Check the text at the width people will actually read it

Before you publish, look at the compressed image on a phone-width screen, or narrow the browser window until it is about that wide. An image that is legible at desktop width often becomes unreadable when the same image is scaled into a narrow column, and no amount of compression tuning fixes that, because the problem is scale rather than quality. If the text is too small at that width, crop tighter around the part that matters, or split the image into two crops.

Then archive the full-resolution source somewhere separate from the published copy, named so you can find it again. You will need to remake the image at some point with a different crop or for a different placement, and remaking it from a compressed export means starting from damaged material.

Before you commit

• Resize before compressing
• Preview text-heavy images at mobile width
• Keep a high-quality source image archived

Resize, choose the format from the content, step the quality down until you can see the first loss, then check the result at reading width. Once you have your two or three saved settings the whole routine takes under a minute per image, and the difference on a page with a dozen pictures is the difference between a page that loads immediately and one people abandon.