Smushify / Guides

How to reduce image size for a website without losing quality

Four steps that take a 4.9 MB phone photo down to between 40 and 200 KB, and how to check nothing visible was lost.

Why image size matters

Images are usually the heaviest part of a web page. A single unprocessed phone photo is 4 to 5 MB, more than many whole pages, and on a mobile connection it can take several seconds to arrive. While it loads, visitors look at an empty space or a jumping layout, and some of them leave.

Search engines notice too. Google's Core Web Vitals measure how quickly the largest element on a page appears, called Largest Contentful Paint, and on most pages that element is an image. Google recommends it appear within 2.5 seconds, and page experience is one of the signals it uses in ranking. Smaller images are the easiest way to get there.

Step 1: resize to the size it is shown at

This is the biggest saving and the one most often skipped. A 12-megapixel phone photo is 4032 by 3024 pixels, but a blog column or product grid might show it 800 pixels wide. Every extra pixel is downloaded and then thrown away by the browser.

Size images for the largest width they actually appear at, then double it for high-density screens such as phones and Retina laptops, which draw two device pixels for every CSS pixel. An image shown 640 pixels wide therefore needs about 1280 pixels; a full-width hero image on a large screen needs about 1920 to 2560. Going beyond twice the displayed width gains nothing anyone can see.

In our test with a 12-megapixel photo, a 4.9 MB JPG, resizing to 1280 pixels wide and saving as JPG at quality 85 brought it to 206 KB without changing format at all. That is 96% smaller before any other step.

Step 2: choose a modern format

JPG and PNG date from the 1990s. WebP and AVIF compress the same picture into far fewer bytes, and every current browser, including Chrome, Edge, Firefox and Safari, displays both. For photographs, WebP is the safe default and AVIF is usually the smallest. For screenshots, logos and illustrations, both still beat PNG by a wide margin, and both keep transparency.

Here is the same photo, resized, in three formats, each at Smushify's recommended quality setting:

Step 3: set the quality, then check it

Lossy formats trade detail for size through a quality setting. There is a wide range where the file shrinks a lot and the picture barely changes, then a point below which artefacts appear: blocky skies, smeared texture, halos around text. For photos, WebP around 75 to 85, AVIF around 45 to 60 and JPG around 80 to 85 are good starting points, and these are the defaults Smushify picks for you.

Always look at the result before you publish it, at the size it will be shown. Smushify's Compare view puts the original and the converted image under a slider, so you can drag across faces, text and gradients and see exactly what changed. If something looks wrong, raise the quality a little and convert again.

If a site or platform has a hard limit, such as 200 KB for a product photo, set a target size instead and let Smushify find the highest quality that fits.

Step 4: strip the metadata

Photos straight from a camera or phone carry metadata: the camera model, the exposure settings, the date, often the GPS location, and sometimes a thumbnail. None of it is visible on the page, it adds bytes to every download, and the location can reveal where a photo was taken. Smushify rebuilds every image from its pixels, so converted files carry none of it.

Screenshots and graphics

Screenshots behave differently from photos. In our test, a 1440 by 900 screenshot saved by the browser as PNG was 537 KB. Optimising the PNG without losing anything brought it to 420 KB, while WebP made it 82 KB and AVIF 48 KB, with text still sharp at the recommended settings. Keep PNG for the cases where every pixel must stay exactly the same.

Finish the job in your HTML

Smaller files are most of the work, but a few attributes finish it. Give every image width and height attributes so the browser can reserve its space and the layout doesn't jump while it loads. Add loading="lazy" to images further down the page so they download only when someone scrolls to them, and leave it off the main image at the top. If you produce several sizes, srcset lets each device download the one it needs.

To do the file side in one go, drop your images into the converter below. It resizes them, converts them to WebP or AVIF, strips their metadata and lets you compare each result with the original, for a whole batch at once and without uploading anything.

Open the image compressor

Try it: Compress images

Open the Compress images converter. It runs in your browser, so nothing is uploaded.

Frequently asked questions

What is a good file size for a website image?

As a rule of thumb, under 200 KB for a large photo and under 100 KB for images inside an article; thumbnails can be 10 to 30 KB. A hero image across the whole screen may justify a little more.

Should I use WebP or AVIF?

AVIF usually gives the smallest files, often half the size of WebP or less for photos, and every current browser displays it. WebP encodes faster and has been supported for longer. Either is a big step up from JPG.

Does compressing images reduce their quality?

Resizing to the displayed size and stripping metadata lose nothing you can see. Lower quality settings do discard detail, which is why it is worth checking the result in the comparison view before you publish.

Are my files uploaded anywhere?

No. Smushify converts everything inside your browser using WebAssembly. Your files are never sent to a server, so it is safe for private photos and documents.

llms.txt: what Smushify does and how to automate it