How to Compress Images for Websites Without Making Them Look Bad

Heavy images are the most common reason web pages feel slow. The fix is not simply dragging a quality slider to the left. Images look bad when they are compressed in the wrong order or in the wrong format. Follow the three steps below, in this order, and you can usually cut an image to a fraction of its size with no difference anyone will notice.

Step 1: Reduce the pixel dimensions first

This step saves more than any quality setting. A phone photo is about 4000 pixels wide, but a blog column is rarely wider than 800 to 900 pixels. Even on a high-density phone screen, which shows the image at twice the resolution, 1600 to 1800 pixels is plenty. Serving a 4000 pixel image into that space makes the visitor download several times more data than they can see.

File size scales roughly with pixel count. Halve the width and height and you have a quarter of the pixels, so the file drops to about a quarter of its size, before you have touched quality at all. Reasonable target widths:

• Inline image in an article: 800 to 1200 pixels wide.
• Full-width banner or hero image: 1600 to 2000 pixels wide.
• Thumbnail or card image: 400 to 600 pixels wide.

Use the image resizer. Type the width you want and leave the height empty, and the tool calculates it so the proportions stay correct. Choose JPG as the output for photographs so you do not end up with a huge PNG.

Step 2: Choose the right format

For photographs, JPG or WEBP. For screenshots, logos and diagrams with flat colour, PNG or lossless WEBP. Photographs saved as PNG are the classic mistake: they can be five to ten times larger than the same photo as a JPG, with no visible gain. If you are unsure, read our comparison of JPG and PNG. If your visitors use modern browsers, which is nearly everyone, converting JPG files to WEBP with the JPG to WEBP tool often trims another quarter or so off the size.

Step 3: Compress to a sensible quality

Now use the image compressor. Its quality setting runs from 0.1 to 1, and the default of 0.72 is a good starting point for most photographs. Quality settings are not linear: dropping from 1.0 to 0.85 shrinks the file dramatically with almost no visible change, while dropping from 0.5 to 0.3 mostly adds blockiness. In practice:

• 0.8 to 0.9: very safe, for portfolios and photography sites.
• 0.7 to 0.8: the sweet spot for most blog and shop images.
• 0.5 to 0.65: acceptable for backgrounds, thumbnails and images with a lot of texture, where artifacts hide easily.
• Below 0.5: usually looks poor, especially around faces and text.

Compression like this affects JPG and WEBP. A PNG is lossless, so the quality slider does little for it. For a PNG, reduce the dimensions or convert to WEBP instead. If a very large PNG comes back with a changed format, check the downloaded file type before you upload it.

How to judge the result

Do not judge at a glance. Open the original and the compressed version side by side at full size and look at three places: the sky or any smooth gradient, where compression shows as banding or blocks; hair, grass or fabric, where fine texture turns to mush; and any text inside the picture, which turns fuzzy first. If those three look fine at 100 percent, they will look fine on your page. If they do not, raise the quality by 0.05 and try again. You are looking for the lowest setting that still passes your own inspection.

A realistic example

Suppose you have a 4000 by 3000 pixel photograph at 4.5 MB for a blog post. Resize it to 1200 pixels wide, which gives about 1200 by 900 pixels. The file falls to roughly 0.4 MB just from that. Compress at 0.75 and it may land around 150 to 250 KB. Convert to WEBP and it could end up near 120 to 180 KB. The exact numbers depend on the photo, but the pattern is dependable: resizing does most of the work, format and quality finish the job. The visitor receives a file around twenty times smaller than the original and sees the same picture.

Other habits that help

• Set width and height in your HTML so the layout does not shift while images load.
• Lazy-load images below the fold with the loading="lazy" attribute.
• Use descriptive file names and alt text. They help accessibility and search.
• Keep your originals. Compress copies, never the master, because every lossy save removes detail.

Privacy note

Each of these tools runs inside your browser, so the photographs are not uploaded to our servers. That matters for client work, product shots before launch and personal photos. Converted copies also do not carry the camera and location metadata from the original, which is a handy side effect when you publish pictures taken at home.

Summary

Resize to the size the page really displays, choose JPG or WEBP for photographs, then compress to the lowest quality that still looks clean at 100 percent. Doing it in that order is what keeps images small and good-looking.