How to compress images for a faster website

Your website looks great on your laptop, but it feels slow on a phone. Very often the culprit is an image: a photo straight from a camera, thousands of pixels wide, shown in a space a few hundred pixels across. The visitor's phone downloads all of it anyway.

Images are one of the easiest things to fix on a slow site. You don't need to be a developer. You need to crop, resize, compress and pick the right format, roughly in that order. This guide walks through each step.

Why image size affects page speed

Google measures loading speed with a metric called Largest Contentful Paint (LCP). It records how long the largest image, text block or video in the visible part of the page takes to appear. Google's guidance is to aim for an LCP of 2.5 seconds or less, and image elements are among the things it measures (web.dev).

If your page opens with a big hero photo or product shot, that image may well be the largest thing on screen. A smaller file arrives sooner, so a lighter image can directly improve how fast your page feels. Google lists its free PageSpeed Insights among the tools that measure LCP, so you can test a page before and after.

Step 1: crop away what you don't need

Every pixel you remove is a pixel nobody has to download. Before anything else, crop out empty sky, desk edges or anything that doesn't help the picture.

Crop Image lets you crop freely or to a fixed ratio: square, 16:9, 4:3, 3:2 or 9:16. Ratios help when your site's design expects images of one shape, such as square product photos or wide banners. The part you keep is cut out at full resolution, and you can rotate or flip while you crop.

Step 2: resize to the size it's shown

This step can make the biggest difference, because file size grows with the number of pixels. Halve the width and height, and the image has a quarter of the pixels.

Find out how wide the image actually appears on your page. Then make the file about twice that width, so it stays sharp on high-resolution phone and laptop screens. MDN, Mozilla's web reference, explains how high-resolution screens can use two or more device pixels for every pixel in your layout (MDN).

Resize Image does this in a few seconds. Type the width in pixels and leave the height empty, and the height is worked out so nothing gets squashed. You can also scale by a percentage, or resize a whole batch at once. Each image stays in its own format.

Step 3: compress with the right quality

Compression makes a file smaller without changing its width and height. For photos, this mostly means choosing a quality level.

Compress Image works on JPG, PNG, WebP and AVIF files, and keeps each one in its own format. Slide the quality toward smaller files or better quality. For most photos, around 70 to 80% is a good place to start. Then look at the result at full size, especially faces, text and fine edges. If it looks fine, try a little lower.

A few things Pagestro does for you:

• It never makes a file bigger. If an image was already compressed and can't shrink, you get the original back.
• PNGs keep transparency. PNG compression works by reducing the number of colors, so logos and cut-outs stay see-through.
• Location data is removed from compressed copies. A compressed copy is saved without EXIF data such as GPS location, and photos taken sideways are turned upright first. If you get the original back because it couldn't shrink, that file still carries its EXIF data.
• Your photos stay on your device. Compression runs in your browser, so nothing is uploaded.

There isn't a "make it under 200 KB" setting. If a file is still too big, lower the quality a step at a time, or go back and resize it smaller.

Step 4: choose a modern format

The format you save in matters as much as the quality setting.

• WebP is the safe modern choice. Google says lossy WebP images are 25 to 34% smaller than comparable JPEGs, and lossless WebP images are 26% smaller than PNGs (Google for Developers).
• AVIF compresses even better, but MDN recommends offering a fallback in a more widely supported format when you use it (MDN).
• JPG is still fine for photos when you can't use WebP.
• PNG is for graphics that need sharp edges or transparency, not for photos. A photo saved as PNG is often much heavier than the same photo as JPG or WebP.

Convert Image turns JPG or PNG into WebP, keeps transparency, and can cap the width at 1920, 1280 or 800 pixels in the same step. It can also save AVIF in browsers with an AV1 encoder, such as Chrome and Edge. For a fuller comparison of formats, read JPG vs PNG vs WebP vs AVIF. If you've saved images from the web and they won't open in your editor, our guide on converting HEIC, WebP and AVIF can help.

Logos and icons are often better as SVG files, which stay sharp at any size. Our SVG optimization guide shows how to keep them small.

Step 5: load images the smart way

Once the files are small, a few settings make them load better. Your website builder may handle some of these for you. If you or your developer edit the HTML, here's what to set.

• Set the width and height. Google's web.dev recommends giving every image width and height attributes, so the browser can reserve space and the page doesn't jump around as images load (web.dev).
• Lazy-load images further down the page. Setting loading="lazy" tells the browser to wait until an image is close to view before downloading it.
• Don't lazy-load the main image. The same web.dev guide warns against lazy-loading images likely to be visible when the page opens, especially the LCP image.
• Serve smaller files to smaller screens. The srcset attribute lets the browser pick the best size from several versions of an image, as MDN's responsive images guide explains.

A quick checklist

• Crop out what doesn't help the picture
• Resize to about twice the width it's shown at
• Compress, starting around 70 to 80% quality, and check by eye
• Use WebP where you can
• Set width and height, and lazy-load only images below the first screen
• Test the page again in PageSpeed Insights

Frequently asked questions

What quality setting should I use?

Start around 70 to 80% for photos, then check the result at full size. Lower it step by step until you can see a difference, then go back one step.

Should I use WebP or AVIF?

WebP is supported by all major browsers and is a safe default. AVIF can be smaller, but offer a fallback format alongside it.

Why didn't my image get smaller?

It was probably compressed already. When a new version would be bigger, Pagestro gives you the original instead. Try resizing it to fewer pixels.

Can I compress an image to an exact size?

There's no target-size setting. Lower the quality a step at a time, or make the image smaller in pixels with Resize Image.

Does compressing remove location data?

Yes, from every file that gets smaller. Pagestro saves the compressed copy without EXIF data, including GPS location. If a file can't shrink and you get the original back, its EXIF data is unchanged.