Logo
Tooooolbox
100% private
All articles

How to Compress Images for Your Website Without Losing Quality

June 21, 2026 · 7 min read

On most websites, images account for more than half of the total page weight. A single photo straight from a phone can be 4–8 MB — enough to make a page crawl on mobile and push visitors away before it even loads. Google also factors loading speed into rankings, so bloated images quietly cost you both visitors and SEO. Here's how to fix that without your site looking worse.

Step 1: Resize before you compress

This is the step most people skip, and it's the biggest win. A modern camera produces images 4000–6000 pixels wide, but a full-width image on a website is rarely shown wider than about 2000 pixels — and a thumbnail needs far less. Serving a 6000px image into a 600px slot wastes enormous bandwidth.

Decide how big the image actually appears on the page, then resize to roughly that width (a little extra for high-resolution screens is fine). Resizing alone can cut file size by 80% or more before you compress a single byte.

Step 2: Choose the right format

For photographs, use WebP or AVIF — both are dramatically lighter than JPEG at the same visible quality, and every modern browser supports WebP. For logos, icons and graphics with flat colour or transparency, use PNG, or lossless WebP to save space. Avoid PNG for full photos: it's lossless and far too heavy for that job.

If you need maximum compatibility with very old software, JPEG remains the universal fallback for photos.

Step 3: Compress to the sweet spot

Compression quality is a slider, not a switch. For most web photos, 70–80% quality is invisible to the eye but cuts size dramatically. Below about 60% you start to see blockiness in skies and gradients. The trick is to compare before and after at the target size and stop the moment quality starts to suffer.

Our compressor shows you the output size in real time and includes a before/after slider, so you can find that sweet spot for each image instead of guessing.

Step 4: Aim for sensible file sizes

As a rule of thumb: hero and full-width images under ~200 KB, in-article images under ~100 KB, thumbnails under ~30 KB. These aren't hard limits, but if an image is far above them, it almost certainly needs resizing or stronger compression.

If you have a specific budget — say every product photo must be under 100 KB — use a target-size tool that compresses to exactly that limit rather than eyeballing the slider.

Step 5: Don't forget the small wins

Add descriptive alt text to every image — it helps accessibility and SEO. Lazy-load images below the fold so the browser only fetches them when needed. And strip EXIF metadata from photos you publish: it adds weight and can leak location data you'd rather not share.

You don't need expensive software for any of this. Drop your images into our compressor, set the width and quality, and download optimised versions in seconds. Everything runs locally in your browser, so even sensitive images never get uploaded anywhere.

Compress images for web

Keep reading