How to compress images for a website

On a typical page, images outweigh the HTML, CSS and scripts put together. A single photo copied straight from a phone can be 3 to 6 MB, while the rest of the page is a few hundred kilobytes. Fixing images is the cheapest performance win available, and it feeds straight into Largest Contentful Paint, the Core Web Vitals metric that measures how quickly the main content appears.

This guide is the full workflow: decide the size each image is shown at, pick the right format, compress, check the result and serve it properly. It works for a hand-coded site, a shop or a blog on any content system.

Know your budget before you start

It helps to have numbers in mind. These are practical targets, not hard rules:

• Hero or full-width banner: around 150 to 300 KB.
• Content image inside an article: 50 to 150 KB.
• Product card or thumbnail in a grid: 20 to 60 KB.
• Logo or icon: a few kilobytes, ideally SVG.

A page with one hero and ten content images that hits these numbers weighs about 1 to 2 MB in images. The same page built from untouched phone photos easily passes 30 MB.

Step 1. Resize to the size you actually display

Pixel count drives file size more than any quality setting. A 4000×3000 photo has 12 million pixels; at 1600×1200 it has under 2 million. That is an 85% reduction before compression even starts.

Find the largest width the image is ever shown at, then allow for high-density screens:

• Full-width hero: 1600 to 2000 px wide covers most laptops and retina screens.
• Article column of 700 to 800 px: export at 1200 to 1600 px so it stays sharp on 2× displays.
• Card in a three-column grid: 600 to 800 px.

In Resize image enter a width and clear the height field to keep proportions, or enter the same number in both fields with the lock on to cap the long side of a mixed batch of portrait and landscape shots. Be aware that images already smaller than the box are enlarged to fit it, so do not run small icons through a large-box batch.

Resizing keeps the input format. JPG and WebP are re-encoded at high quality (0.92), PNG stays lossless. Location and camera metadata are dropped in the process, which you want for published photos anyway.

Step 2. Pick the right format

Choose by content, not by habit:

• Photos and anything with gradients → WebP. At the same visual quality it is typically 25 to 35% smaller than JPG, and every current browser displays it.
• Photos where you cannot use WebP → JPG at quality 75 to 85. Some email templates, old content systems and marketplace feeds still expect JPG.
• Screenshots, logos, diagrams, flat graphics → PNG, then reduce its palette. These images have few colours and sharp edges, where JPG produces visible smudges.
• Graphics with transparency that are large or photographic → WebP. It keeps the alpha channel and is far smaller than PNG for cut-out product shots.
• Icons and simple illustrations → SVG whenever you have the vector original. Nothing raster beats it for size and sharpness.

The most common mistake is a photo saved as PNG. A PNG photo is often five to ten times larger than a good JPG with no visible benefit.

Step 3. Compress

Photos to WebP

JPG to WebP starts at quality 85, which suits most content images. Go to 70 to 75 for thumbnails and background images under text, and 90 for heroes with fine detail or text in the picture. It also accepts PNG input and keeps transparency.

For screenshots and graphics with transparency, PNG to WebP starts at quality 90, which keeps thin lines and small text crisp.

WebP encoding uses your browser's own encoder. Safari cannot encode WebP, so for this step use Chrome, Edge or Firefox; the page shows an error instead of saving a mislabelled file.

Flat graphics as PNG

Compress PNG reduces the image to a palette of 256, 128 or 64 colours and keeps transparency. Screenshots and logos usually lose 50 to 70% of their weight at 256 colours with no visible change. Start at 256, try 128 for interface screenshots, and keep 64 for charts and simple icons. It does not dither, so smooth gradients can show bands; if they do, step back up or switch that image to WebP.

Staying with JPG

Compress JPG starts at 80. For website content, 75 to 80 is the usual sweet spot. If a file is already well optimised and re-encoding would make it bigger, the tool returns the original untouched.

Step 4. Check before you publish

Compression settings are a trade-off, so look at the result where JPEG and WebP fail first: smooth sky or wall gradients, sharp high-contrast edges, and saturated red areas. Compare images puts the original and the compressed version under one slider so differences are easy to spot.

Then check the numbers. Each file row shows the size before and after; anything still well above the budget usually means the dimensions are too large, not the quality too high.

Step 5. Serve it correctly

Compression is half the job. The markup decides how the browser loads what you made:

• Always set width and height on <img>. The browser reserves the space before the file arrives, which prevents layout shift, another Core Web Vitals metric.
• Lazy-load below the fold with loading="lazy". Never lazy-load the hero: it is usually the Largest Contentful Paint element, and delaying it makes the score worse. Give it fetchpriority="high" instead.
• Use srcset and sizes when one image appears at very different widths on phone and desktop. Export two or three widths, for example 800, 1200 and 1600 px, and let the browser choose.
• Use <picture> with a JPG fallback only if you must support very old browsers. For most sites a plain WebP is enough.
• Cache long. Give image files a long cache lifetime and change the file name when the image changes.

Many content systems generate resized copies on upload. That helps, but they resize from whatever you upload, so a 6 MB original still means slow uploads and bloated storage. Upload images that are already close to the largest size you need.

Built-in options on your computer and phone

For a handful of images you may not need anything else:

• macOS Preview: Tools → Adjust Size to change dimensions, then File → Export with the quality slider for JPG. Quick for one or two files.
• Windows Photos: the Resize image option offers preset sizes and a quality setting. Paint can resize too, but saves JPG without letting you pick quality.
• iPhone and Android: the built-in editors crop but do not let you set pixel dimensions or compression, so phone photos for a website are best processed on the way to the site.

The browser tools above earn their place when you have a batch: drop a whole folder, download the results as one ZIP, and nothing is uploaded.

Troubleshooting

• The WebP is bigger than the JPG. The source JPG was already heavily compressed, or quality is set at 95 to 100. Lower quality to 80 or keep the JPG.
• The PNG barely shrank. It was already indexed or optimised. The tool reports that the original was kept.
• Transparent areas turned white. The image went through Compress JPG, and JPG has no transparency. Use PNG to WebP or Compress PNG for cut-outs.
• Text in screenshots looks soft. Use PNG or WebP at 90+, never JPG.
• Images look blurry on retina screens. You resized to the CSS width; export at about twice that.

Checklist

1. Measure the largest display width of each image.
2. Resize to about twice that width at most.
3. Photos to WebP at 80 to 85, flat graphics to palette PNG.
4. Compare the result on gradients and edges.
5. Check each file against the size budget.
6. Add width, height, lazy loading below the fold and high priority for the hero.