How to Compress Images for Your Website

Why images matter for a website

On many pages, images are the largest share of the bytes that a visitor has to download. A single unoptimized photo straight from a camera can be several megabytes, more than the rest of the page combined. Large images slow down the first view of a page, use up mobile data and can push a page over the thresholds that search engines and visitors consider acceptable.

The good news is that images are also the easiest place to save. Unlike code, they can be made much smaller without changing how the page works, and the work is mostly mechanical. A routine of four steps, described below, handles most sites.

Step 1: Resize to the size you need

Start with the pixel dimensions. If a picture is displayed in a column that is 800 pixels wide, a 4000-pixel original is wasting most of its data. Scaling a photo from 4000 to 1600 pixels wide reduces the number of pixels to 16 percent of the original, because both width and height shrink. Choose a size that covers the largest display size of the image, with some extra for high-density screens.

For a typical content column, an image width of 1200 to 1600 pixels is often enough. For a full-width hero image, 1920 pixels is a common upper limit, and rarely is more needed. The maximum size option of the compressor does this scaling: it only reduces images that are larger than the value, never enlarges smaller ones, and keeps the proportions.

Step 2: Choose the format

For photographs, use WebP if your audience uses modern browsers, or JPEG as a safe alternative. For screenshots, logos and graphics with sharp edges or transparency, use PNG or lossless WebP. Avoid PNG for photographs, which is a common cause of very heavy pages. Lossy WebP is, according to Google, 25 to 34 percent smaller than comparable JPEG at the same quality score.

If you change the format, remember that transparency needs a format that supports it. JPEG has none, and the compressor fills transparent areas with white when it converts to JPEG, so use WebP or keep PNG for images that have transparent backgrounds.

Step 3: Set the quality

For photos, a quality of 70 to 85 is the usual range. Start at 75, look at the result at the display size, and adjust. Lower values are fine for thumbnails and background images; higher values suit photography portfolios and product images where detail sells. The article on JPEG quality explains how to find your value in a few steps.

Apply the same settings to a batch of similar images for a consistent look and file size. Add all your images at once, set the quality, format and maximum size, and download the results as a ZIP. Each change reprocesses the whole list, so you can compare before and after sizes straight away.

Step 4: Serve the right size to each device

A single image file cannot be ideal for both a phone and a large monitor. The HTML attributes srcset and sizes let you offer several widths of the same image, and the browser downloads the one that fits the screen. The picture element goes further and allows different formats, for example a WebP with a JPEG as a fallback.

To use this, compress each image at two or three sizes, such as 640, 1280 and 1920 pixels, and list them in srcset. The compressor can produce each of these with the maximum size option. The article on responsive images describes the markup in more detail.

Load images at the right time

Compression reduces the size; loading strategy decides when the bytes are fetched. The loading="lazy" attribute tells the browser to postpone images that are below the visible area until the visitor scrolls near them, which saves data and speeds up the first view. Do not use it for the main image at the top of the page: the largest visible image should load as early as possible, and the fetchpriority="high" attribute can help the browser treat it as important.

Also set width and height attributes on images, so that the browser can reserve the right space before the file arrives and the page does not jump while it loads. This protects the layout stability metric, which is part of the Core Web Vitals.

Check the result

After compressing, look at the images at the size at which they will appear, on a phone and on a desktop. Check the total size of the page in the browser's developer tools, in the Network panel, and compare it with the numbers before. Aim for individual photos that are in the range of tens to a few hundred kilobytes, not megabytes, depending on how large they appear.

Keep your originals in a separate folder, so that you can recompress at a new size or quality later. And repeat the routine for every new image you add: compressing before upload is much easier than fixing a whole library later.

If your site runs on a content management system, check whether it already creates smaller copies of uploaded images. Many do, but they usually start from whatever you upload, so a smaller, well-compressed source still gives better results and uses less storage on your server.