How to compress images without losing quality: WebP, JPEG and the Image Compressor

Images are the heaviest part of most web pages. A single photo straight from a phone can be 3 to 8 megabytes, and a page that loads a few of them feels slow on mobile data, ranks lower and annoys visitors. The fix is usually simple: make the image smaller before you upload it. The free Image Compressor shrinks JPG, PNG and WebP images right in your browser. Your picture is never uploaded, you choose the quality and size, and you compare the result before you download it. This guide explains what is happening to the picture and how to pick settings that cut file size without anyone noticing the difference.

Two ways to make an image smaller

A file's size depends on two things: how many pixels it has, and how much detail it keeps about each of them.

Resolution (the pixel dimensions). A photo that is 4000 pixels wide has 16 times as many pixels as one that is 1000 pixels wide. If your page shows the picture in a 800-pixel-wide column, the extra pixels are never seen, but they are still downloaded. Reducing the dimensions to what you really need is the biggest saving of all.

Compression (the detail kept per pixel). Image formats store pictures in a compressed form. Lossless compression (used by PNG) makes the file smaller without changing a single pixel. Lossy compression (used by JPEG and WebP) throws away fine detail that the eye is least likely to notice, so the file can shrink to a tenth of its size or less. The quality setting controls how much is thrown away.

The tool handles both: choose a maximum width (original, 3840, 1920, 1280 or 800 pixels) and a quality from 10 to 100, and it redraws the image in your browser and saves it again.

WebP or JPEG

The tool saves as one of two lossy formats:

	WebP	JPEG
Typical size at the same look	Smaller, often 25% to 35% less	Larger
Browser support	All current browsers	Everywhere, including old software
Transparency	Supported	Not supported (transparent areas become white)
Best for	Websites, apps, modern email	Files that must open in older programs, print shops, some social uploads

For web pages, WebP is usually the right choice. Choose JPEG when the file will be opened by older programs or a system that does not accept WebP, such as some forms, printers or marketplaces.

Notice what happens with transparency: if you pick JPEG, the tool fills transparent parts with white, because JPEG cannot store them. For a logo with a see-through background, keep WebP or the original PNG.

What about PNG?

PNG is lossless, so it keeps every pixel exact. That makes it large for photographs, where tiny variations across millions of pixels cannot be compressed away. PNG is the right format for screenshots, logos, diagrams and anything with sharp edges and flat colours, because lossy formats smear sharp edges and make text look blurry.

This is why a PNG photo sometimes gets bigger than the original after processing, or why a photo saved as PNG is huge: use WebP or JPEG for photographs. And if you compress a screenshot with text, compare carefully, because artefacts around the letters show up quickly.

The quality setting

Start around 75. At that value, most photos look the same to the naked eye at a normal viewing size, with files a fraction of the original. Then:

• Move down to 60 to 70 for large background images and thumbnails, where small flaws never show.
• Move up to 80 to 90 for portraits, product photos and any image people will zoom into.
• Stay near 100 only if you will edit the image further. The size grows quickly for almost no visible gain.

Always look at the preview next to the original numbers. The tool shows the original size, the compressed size, the percentage saved and the new dimensions. If the saving says "none", the file was already well compressed, and you should try WebP, a lower quality or a smaller width.

A worked example

Suppose a photo is 4032 × 3024 pixels and 2.4 MB, and it will appear in a blog post column 800 pixels wide. A sensible plan is to:

1. Set the maximum width to 1280 (a little larger than the column, so it stays sharp on high-density screens).
2. Choose WebP, quality 75.
3. Compare the preview, then download.

The picture typically drops from megabytes to a few hundred kilobytes, and nobody can tell the difference on the page. Loading is faster, and the page scores better on speed tests.

Sizes to aim for

There is no magic number, but these are sensible targets for websites:

Use	Width	Size
Thumbnail or avatar	150 to 300 px	under 30 KB
Photo inside an article	800 to 1200 px	80 to 200 KB
Full-width hero image	1600 to 1920 px	150 to 300 KB
Product photo	1000 to 1500 px	100 to 250 KB

A page with many images should stay well below 2 MB in total for a good mobile experience.

Using the tool

1. Open the Image Compressor.
2. Choose an image from your device.
3. Pick the format, the quality and the maximum width.
4. Compare the sizes and the preview, adjust until you are happy, and press Download.

The downloaded file is named after the original with -compressed added, so your original is not touched. Keep the original: lossy compression cannot be undone, and recompressing an already compressed file loses more quality each time. Always compress from the original, never from a copy that has already been compressed.

Privacy

Online compressors normally upload your file to a server. This one does not. Compression happens on your device with your browser's built-in canvas, so family photos, scans of documents and unreleased product pictures stay with you. It also means it works without a connection once the page has loaded.

Practical tips for websites

• Resize first, then compress. Pixels you never show are wasted bytes.
• Match the size the page shows. Serve the image at about the width of its column, up to twice that for sharp screens.
• Use descriptive file names and alt text. sourdough-loaf.webp helps search engines and screen-reader users; the HTML images lesson and the accessibility basics explain alt text.
• Offer several sizes with srcset so phones download small versions. The responsive images lesson and the CSS responsive images lesson show how.
• Lazy-load images below the first screen, but not the main image at the top of the page.
• Set width and height so the page does not jump while images load.
• Avoid text inside images. It cannot be searched, translated or read aloud.

Mistakes to avoid

• Saving a screenshot with text as a low-quality JPEG.
• Compressing the same file again and again.
• Uploading a camera original and letting CSS shrink it.
• Choosing a very low quality for a hero image, which shows as blocky areas in smooth gradients like the sky.
• Forgetting to check how the image looks on a phone.

Related tools

If you want the colours of a photo for a matching design, pull them out with the Image Color Picker. Turn a link into a printable code with the QR Code Generator. If you embed an image in a stylesheet as text, the Hash & Encode Toolkit can convert it to Base64, though that is only sensible for very small images.

Quick answers

Is my image uploaded? No. The compression runs in your browser.

Which format gives the smallest file? WebP is usually the smallest at the same visual quality.

What quality should I choose? Start at 75 and compare the preview.

Why did my PNG get bigger? PNG is lossless, so photographs are far smaller as WebP or JPEG.

Can I get the original back? No. Lossy compression discards detail, so always keep the original file.