How to Compress Images for a Website Without Losing Quality

On a typical web page, images account for more bytes than everything else combined. That makes them the easiest place to win back loading speed. The method below works for any site, whether you use WordPress, Shopify, a site builder or plain HTML.

Step 1: Resize before you compress

This is the step most people skip, and it matters most. A modern phone photo is around 4000 pixels wide. A blog's content column is often 700 to 800 pixels wide. Even allowing for high-density screens, an image 1600 pixels wide is plenty there.

File size grows with the number of pixels, so halving the width and height removes about three quarters of the data before you touch quality at all.

• Content images: 1200 to 1600 px wide
• Full-width banners: up to about 1920 px wide
• Thumbnails and cards: 400 to 800 px wide

Use the Image Resizer, or set a maximum width directly in the Image Compressor.

Step 2: Pick the right format

Use WebP for photographs and most graphics on a website; it is smaller than JPG and PNG and every current browser supports it. Keep PNG for images that must stay pixel-perfect, and use SVG for logos and icons when you have a vector file. The reasoning is explained in JPG vs PNG vs WebP.

Step 3: Set the quality

For lossy formats, quality is a number, usually from 0 to 100. The relationship with file size is not linear: dropping from 100 to 80 often halves the file with no difference you can see, while dropping from 50 to 30 saves little and looks noticeably worse.

• 75 to 85: a safe range for photographs.
• 60 to 75: fine for thumbnails and background images.
• Above 90: rarely worth the extra size on the web.

Images with text, fine lines or flat colours show compression damage sooner than photographs do, so give them a higher setting or keep them lossless.

Step 4: Check the result at real size

Judge the compressed image at the size it will appear on the page, not zoomed in. Look at faces, text and smooth gradients such as skies, where problems appear first. If you see blocky patches or banding, raise the quality a little and export again.

Two things to do on the page itself

• Lazy-load images below the fold. Adding loading="lazy" to an image tag tells the browser not to download it until the visitor scrolls near it. Do not lazy-load the main image at the top of the page.
• Set width and height. Including the image's dimensions in the HTML lets the browser reserve the space, which stops the page jumping as images arrive.

A quick worked example

Take a 4032 × 3024 pixel phone photo of about 3.5 MB. Resized to 1600 pixels wide and saved as WebP at quality 80, the same picture is commonly somewhere around 150 to 300 KB, depending on how much detail it contains. On the page it looks the same, and it loads many times faster on a mobile connection.