How to compress images for a website without losing quality

When a page opens, the browser has to download every image before it can show it. On many websites images are the heaviest part of the page, and the largest element visible on the first screen is often an image too. Google measures how quickly that element appears as Largest Contentful Paint (LCP), one of the Core Web Vitals. Lighter images mean faster pages, less mobile data for visitors and a better experience on phones.

The good news is that most of an image's weight can be removed without any visible loss. Here's how.

1. Match the image size to its display size

This step has the biggest impact. Photos from a phone camera are usually 4000 pixels wide or more, while on a website they might be shown at 800 pixels. The browser still downloads all 4000 pixels, then shrinks the image itself.

To find the right size:

1. Open your page, right-click the image and choose Inspect. Note the width it's displayed at, for example 800 pixels.
2. Double it for high-resolution (Retina) screens: 1600 pixels.
3. Resize the image to that width, not larger.

Taking a 4000-pixel image down to 1600 pixels alone cuts the number of pixels by more than six times.

2. Choose the right format

WebP and AVIF are modern formats that produce much smaller files than JPG and PNG at the same quality. According to Google, WebP is on average 25 to 34 percent smaller than JPEG. The full comparison is in our guide WebP vs AVIF.

3. Set the quality level

Lossy compression throws away detail the eye barely notices to get a much smaller file. Lossless compression throws nothing away, but the file stays larger. For photos on a website, lossy is almost always the right choice.

On a quality scale of 1 to 100, around 70 to 80 is usually the sweet spot: much smaller, with differences that are hard to spot. Above 90, file size climbs steeply for improvements you'll barely see. Always check the result with your own eyes, especially for images with text or smooth gradients.

4. Send different sizes to different screens

A visitor on a phone doesn't need a 1600-pixel image. With the srcset and sizes attributes, the browser picks the best version itself:

<img src="banner-800.jpg"
     srcset="banner-480.jpg 480w, banner-800.jpg 800w, banner-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1600" height="600" alt="Year-end sale">

srcset tells the browser which versions exist and how wide they are. sizes tells it how wide the image will be shown. The browser then downloads just one version: the smallest that still looks sharp.

5. Always set width and height

Without width and height attributes, the browser doesn't know an image's size until it has loaded, so the text below jumps when the image appears. Google measures that jumping as Cumulative Layout Shift (CLS). Write the image's real size, and CSS such as max-width: 100%; height: auto; keeps it responsive.

6. Lazy-load images, except the main one

Images far down the page don't need to load when the page first opens. Add loading="lazy" and the browser waits until the visitor scrolls near them:

<img src="gallery-1.jpg" width="800" height="600" alt="…" loading="lazy">

Don't lazy-load the main image on the first screen, such as a banner or the main product photo. That one should load as early as possible. For it, you can add fetchpriority="high".

7. Automate it with an image CDN

Steps 1 to 4 can be done by hand in an image editor, but they have to be repeated for every image and every size. That's where an image CDN helps: you upload one original, then request size, format and quality through the link.

With Simpanan, the srcset example above becomes this, without preparing three files:

<img src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/you/banner.jpg"
     srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/you/banner.jpg 480w,
             https://cdn.simpananawan.com/tr:w-800,f-auto/u/you/banner.jpg 800w,
             https://cdn.simpananawan.com/tr:w-1600,f-auto/u/you/banner.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1600" height="600" alt="Year-end sale">

f-auto sends AVIF or WebP to suit each visitor's browser, and the default quality of 80 already sits in the sweet spot from step 3. Every option is in the docs.

How to check the result

• PageSpeed Insights (pagespeed.web.dev): enter your page's address and look for suggestions such as "Properly size images" and "Serve images in next-gen formats".
• Your browser's DevTools: press F12, open the Network tab, filter by Img and reload. The Size column shows how much each image really weighs.

Summary

• Resize images to their display size, doubled for Retina screens.
• Use AVIF or WebP for photos, SVG for logos and icons.
• Quality around 70 to 80 for photos.
• Use srcset and sizes for different screens.
• Set width and height on every image.
• Lazy-load images further down, never the main image.
• Automate it all with an image CDN so you never repeat it by hand.

Common questions