How to Compress Images Without Losing Quality

Why image size matters

Smaller images load faster, use less mobile data and take up less storage. Page speed is also part of the experience Google measures, so lighter images can help your website as well as your visitors.

It helps away from websites too. Smaller files fit email attachment limits, upload quickly to online forms, and take up less room in cloud storage.

Lossy and lossless compression

There are two kinds of compression. Lossy compression, used by JPG and most WebP images, removes detail your eyes are unlikely to notice. Files get much smaller, but the removed detail can't be brought back. Lossless compression, used by PNG, stores the same picture more efficiently, so nothing is lost, but savings are smaller.

So "without losing quality" really means without any loss you can see. For a photo on a website, that is what counts.

Choose the right format

Each format has its own strengths:

• JPG: best for photos, and supported everywhere.
• PNG: best for logos, screenshots and images with a transparent background. Files are often larger.
• WebP: a modern format that is usually smaller than JPG and PNG, and it works in all current browsers.

Which format for which job?

Here is a quick guide for common uses:

• Photos on a website: WebP, or JPG if you need it to open anywhere.
• Logos and icons with transparency: PNG or WebP.
• Screenshots with text: PNG or high-quality WebP, since sharp text shows damage quickly.
• Photos for email or forms: JPG, because everyone can open it.

Find the right quality setting

For JPG and WebP, a quality of 70 to 80 is a good starting point. The file gets much smaller, and most people can't spot the change at normal viewing size. Going much lower can show blurry patches around edges and text.

Compare the result with the original before you use it. If it looks the same, try going a little lower.

The best setting depends on the picture. A smooth sky shows banding sooner, while a busy scene like leaves or gravel can hide heavier compression. Check any faces, text and fine edges, because that is where problems show first.

Resize before you compress

A photo from a phone can be 4,000 pixels wide, while a website may only show it at 1,200. Reducing the width often saves more than the quality setting does. Set a maximum width close to the size the image will be displayed at.

The maths is simple. A 4,000 by 3,000 photo has 12 million pixels. At 1,200 by 900 it has about 1 million, so you have removed around 91% of the pixels before compression even starts, and nobody viewing it on a web page would know.

Sharp screens show more pixels than their stated size, so if an image appears 800 pixels wide on your page, a width of about 1,600 will keep it crisp on those screens. For most website photos, a width of 1,200 to 2,000 pixels is plenty.

Good target file sizes

There are no official limits, but these are useful rough targets for a website:

• Large banner image: under 200 KB.
• Photo inside an article: under 100 KB.
• Product or gallery thumbnail: under 50 KB.
• Logo or small icon: under 20 KB, or use an SVG.

Things to watch for

Changing format can have side effects. JPG has no transparency, so a transparent PNG saved as JPG gets a solid background. Flash fills it with white. If your logo sits on a colored area, keep it as PNG or WebP.

A PNG can't be made smaller with a quality setting here, since PNG keeps full quality. To shrink one, reduce its width, or convert it to WebP. If compressing would make a file bigger, Flash keeps your original, which can happen with images that are already well compressed.

Compressing in the browser also removes hidden photo data, such as camera details and location. That is useful before you share a photo publicly, but keep the original if you need that information.

Keep your originals

Compression removes some image data for good, so keep the original file safe in case you need to print it or edit it later. Compress a copy for the web, and avoid compressing the same image again and again, because each lossy save takes a little more detail away.

For print, use the original rather than a web copy. A picture that looks perfect on a screen can look soft on paper, because print needs many more pixels.

A simple routine for your website

Follow the same steps for every image, and your pages will stay fast:

• Keep the original in a safe folder.
• Set the maximum width to about twice the size it appears on the page.
• Choose WebP or JPG for photos, at a quality of 75.
• Compare the result with the original.
• Give the file a clear name, such as blue-ceramic-mug.webp, before you upload it.