← Back to blog

Images · October 2026 · 8 min read

How to Compress Images for Your Website

Images are usually the heaviest part of a web page, and an oversized photo is one of the most common reasons a site feels slow, especially on a mobile connection. The fix is rarely complicated. This guide walks through the four steps that matter, in the order that gives the biggest savings.

Why it matters

Smaller images load faster, use less of your visitors' mobile data, and help pages feel responsive. The biggest picture on a page is often what determines how quickly the page appears to load, which is what Google's "Largest Contentful Paint" measurement reflects, and page speed can influence how a site performs in search. Most importantly, visitors simply leave slow pages.

Step 1: Resize to the size it's shown at

This is the biggest saving, and the one most often missed. A phone photo is around 4000 × 3000 pixels, but if your page shows it in an 800-pixel-wide slot, those extra pixels are wasted: the browser downloads all of them and then shrinks the image. Resize the image to roughly the size it's displayed at (and about double that if you want it sharp on high-density screens). The free Resize Image tool sets exact dimensions. Our guide to pixels, KB and DPI explains how these numbers relate.

Step 2: Choose the right format

• Photographs: JPG, or WebP for smaller files.
• Logos, icons and screenshots with text: PNG (or lossless WebP), which keeps edges crisp.
• Where file size matters most: WebP, which is supported by all current browsers, or AVIF, which is smaller still but takes longer to create.

Our guide to JPG, PNG, WebP and AVIF goes into the trade-offs. The Quikbench Image Compressor can output WebP directly; AVIF output is a Pro option.

Step 3: Compress

With the image at the right size, compress it. In the Image Compressor, Best quality/size picks a sensible balance, and the quality slider lets you go smaller or sharper. At the balanced setting, typical phone photos shrink by around 60–80% with little visible change. If you have a specific target, Exact size aims for a limit you choose, such as 100 KB. You can process up to 20 images at once, and everything happens in your browser, so your images aren't uploaded.

Rough targets that work for many sites, as a guide rather than a rule:

Step 4: Check it by eye

Open the compressed image at the size it will appear and look at the areas that show compression first: smooth gradients such as sky, fine text, and faces. If it looks blocky or blurred, raise the quality a little. Always compress from the original file, not from an already-compressed copy, because every pass loses a little more.

The HTML that helps

• Set width and height on each image, so the browser reserves space and the page doesn't jump around as images load.
• Add loading="lazy" to images further down the page, so they only load when a visitor scrolls near them. Don't lazy-load the main image at the top.
• Use srcset to offer smaller versions to smaller screens, if your site or platform supports it.
• Write descriptive alt text, which helps accessibility and search. The AI Alt Text Generator can draft it.

A quick routine

1. Resize to the displayed size.
2. Save as WebP (or JPG for photos if you prefer).
3. Compress to your target, and check by eye.
4. Add dimensions, lazy loading and alt text in your page.

Keep reading

• How to compress a photo to 20KB, 50KB or 100KB
• WebP to JPG converter