How to Optimize Images for the Web Without Losing Quality

Images are almost always the heaviest thing on a web page. A single unoptimised photo straight off a phone can weigh more than all your HTML, CSS, and JavaScript combined. That weight has to travel down someone's connection before they see anything — which means images are usually the biggest lever you have over how fast a page feels.

And speed is not just a nicety. Slow-loading images hurt your Core Web Vitals (especially Largest Contentful Paint, which is frequently an image), drag down your search ranking, and quietly push impatient visitors to leave. The good news: you can usually cut an image's size by 70-90% with no visible loss in quality. Here is the workflow.

1. Resize to the real display size

This is the single biggest win, and the one people skip most. There is no point shipping a 4000-pixel-wide image into a slot that is only 400 pixels wide on screen — the browser downloads all four thousand pixels and then throws most of them away.

Resize the image to roughly the largest size it is actually displayed at. If a slot is 400px wide, account for high-density "retina" screens by exporting at about 2x — so 800px — and you are done. Going much beyond that is wasted bytes nobody can see.

2. Pick the right format

Format matters as much as dimensions. As a rule of thumb:

• WebP or AVIF for most images — they compress far smaller than JPG at the same quality and are supported everywhere modern.
• JPG as a reliable fallback for photographs when you need maximum compatibility.
• PNG or SVG for graphics, logos, icons, and anything with sharp edges or transparency.

If you are not sure which to use, our guide to image formats breaks down the trade-offs in plain English.

3. Compress sensibly

Compression is where the magic happens. For photos, a quality setting of around 75-85 is usually indistinguishable from the original to the human eye — at a fraction of the file size. The trick is to compare before and after: nudge the quality down until you can just start to see artifacts, then back off one notch. You will be surprised how far you can go before anyone notices.

4. Strip the metadata

Photos carry hidden EXIF data — camera model, settings, timestamps, and often GPS coordinates. Stripping it shaves off a few extra bytes, but more importantly it protects your privacy: you probably do not want to publish the exact location a photo was taken.

5. Serve responsive sizes

A phone should never download the same large image your desktop does. Use the srcset attribute or the <picture> element to offer the browser several sizes and let it pick the smallest one that fits the screen. One well-set-up <picture> block can serve a tiny image to phones, a medium one to tablets, and the full-size version only to large displays.

6. Lazy-load what is below the fold

Images further down the page do not need to load until the visitor scrolls toward them. Adding loading="lazy" to those <img> tags tells the browser to defer them, so the content people see first loads sooner. Leave your main above-the-fold image loading normally — lazy-loading it would only slow down your Largest Contentful Paint.

Common mistakes to avoid

• Shipping originals straight from a phone camera. Those files are enormous and packed with metadata. Always process them first.
• Scaling down with width and height attributes. Setting a smaller display size in HTML does not shrink the file — the full-size image still downloads. You have to actually resize it.
• Over-compressing. Push quality too low and you get blocky skies and smeared text. Compare against the original and stop while it still looks clean.

The takeaway

Optimising images is not about sacrificing quality — it is about not shipping bytes nobody can see. Resize to the size you actually display, choose a modern format, compress to around 75-85, strip the metadata, and serve the right size to each device. Do that and your pages will load faster, score better, and still look every bit as sharp.