Guide

How to Compress Images for a Website (Without Losing Quality)

Updated October 17, 20264 min read

To optimize images for a website, do three things in order: resize each image to roughly the largest size it will actually be displayed (about twice that for sharp results on high-density screens), convert photos to WebP or a well-compressed JPG, and compress to a quality around 70–80%. For most content images that gets you under 200 KB with no visible loss, which is one of the biggest speed improvements you can make to a page.

Try Image Compressor free

Reduce image file size while controlling quality.

Runs in your browser. No upload, no sign-up.

Open Image Compressor

Why image size matters so much

Images are usually the heaviest part of a web page — often more than all the HTML, CSS and JavaScript combined. Oversized images slow down how quickly the page appears, use up visitors’ mobile data and drag down Core Web Vitals, the page-experience metrics Google uses. The main one affected is Largest Contentful Paint (LCP): on many pages the largest element is a hero image, and Google recommends LCP under 2.5 seconds.

The good news is that image optimization is mostly mechanical. A photo straight from a phone is typically 3–6 MB and 4000 pixels wide. Displayed in a 800-pixel-wide blog column, the same photo can look identical at 100–150 KB — a reduction of more than 95%.

Step 1: Resize to the size you actually display

This step saves the most bytes and is the one most often skipped. Browsers will happily shrink a 4000-pixel image to fit an 800-pixel box, but the visitor still downloads all 4000 pixels.

Find the widest the image will ever appear on your layout — for example, an 800 px content column or a 1440 px full-width banner.
Multiply by 2 for crisp results on phones and high-density (“Retina”) screens. Going beyond 2× rarely gives a visible benefit.
Resize with the Image Resizer, keeping the aspect ratio locked so nothing is stretched.

Sensible starting widths (2× for high-density screens)
Image use	Displayed width	Export width
Full-width hero or banner	1,200–1,440 px	1,920–2,560 px
Blog or article image	700–800 px	1,400–1,600 px
Product image on a grid	300–400 px	600–800 px
Thumbnail or avatar	64–150 px	128–300 px

Using a CMS?

WordPress, Shopify and most site builders create several smaller copies of each upload automatically and serve the right one. You should still avoid uploading 6 MB originals — resize to around 2,000–2,500 px wide first, so the CMS starts from a sensible file.

Step 2: Choose the right format

Photos: WebP is the best default for the web — typically 25–34% smaller than JPG at similar quality — and is supported by all modern browsers. A well-compressed JPG is fine if your platform doesn’t accept WebP.
Logos, icons and illustrations: SVG if you have the vector file; otherwise PNG or lossless WebP.
Screenshots: PNG keeps text sharp; lossless WebP does the same at a smaller size.
Images with transparency: WebP supports transparency and is far lighter than PNG for photographic cut-outs.

Convert between formats with the Image Converter. For a fuller comparison, see our guide to JPG vs PNG vs WebP.

Step 3: Compress to sensible targets

Open the Image Compressor and add your resized image. It runs locally, so even unreleased product photos stay on your device.
Start with quality around 75% and watch the estimated file size.
Look closely at areas with fine detail — hair, text, sky gradients. If you see blocky artefacts or banding, nudge the quality back up.
Download when you’ve found the lowest quality that still looks right.

Rough file-size targets (not hard rules)
Image use	Aim for
Hero or banner	Under 200–300 KB
Content image	Under 100–200 KB
Product grid image	Under 50–100 KB
Thumbnail	Under 20 KB

PNG photos barely compress

PNG is lossless, so lowering “quality” does little for a PNG photo. If a photographic image is a PNG, convert it to WebP or JPG first — that alone can cut the size by 80% or more.

Step 4: Serve images efficiently

A few lines of HTML make sure visitors only download what they need:

Lazy-load images below the fold with loading="lazy", so they download only when the visitor scrolls near them.
Don’t lazy-load the main hero image. It’s usually your LCP element; let it load immediately, and consider fetchpriority="high" on it.
Always set `width` and `height` (or a CSS aspect-ratio). The browser can then reserve space and the page won’t jump as images load, which protects your Cumulative Layout Shift (CLS) score.
Offer multiple sizes with `srcset` so phones download a smaller version than desktops. Most frameworks and CMSs do this for you.
Write useful alt text. It doesn’t affect speed, but it helps accessibility and image search.

Image optimization checklist

No image is wider than about twice its displayed width.
Photos are WebP or compressed JPG; PNG is used only for graphics and screenshots.
Content images are mostly under 200 KB.
Below-the-fold images are lazy-loaded; the hero image isn’t.
Every image has width and height (or aspect-ratio) set, plus meaningful alt text.
You’ve re-tested the page with Lighthouse or PageSpeed Insights after the changes.

Frequently asked questions

What is a good image size for a website?

Size images to about twice their displayed width — roughly 1,400–1,600 px for an article image or 1,920–2,560 px for a full-width banner — and aim for under 200 KB for most content images.

Does compressing images reduce quality?

Lossy compression removes some detail, but at a quality around 70–80% the difference is usually invisible on screen. Always compare the result at 100% zoom before publishing.

Should I use WebP or AVIF?

WebP is the safe, well-supported default. AVIF can produce even smaller files and is supported by current major browsers, but encoding is slower and tooling is less universal. Many sites serve AVIF with a WebP or JPG fallback.

Tools used in this guide

Image CompressorReduce image file size while controlling quality.Image ResizerResize images by dimensions or percentage.Image ConverterConvert images between JPG, PNG and WebP.