Reducing Image File Size Properly

An image that is too large for its purpose is usually large for a specific reason, and the fix depends on which. Compressing harder is the last step, not the first.

Check the dimensions first

The most common cause of an enormous file is an image far larger than it will ever be displayed.

A photo straight from a phone is commonly 4000 pixels wide. A blog post displays it at 800. The other 3200 pixels of width are stored, transmitted and then discarded by the browser.

Resize before compressing. Reducing 4000 pixels to 1600 cuts the pixel count by a factor of six, and the file size falls correspondingly with no visible quality loss at the size it is actually shown.

Rules of thumb: full-width web images rarely need more than 1600 to 2000 pixels wide. Content images inside a text column need 800 to 1200. Thumbnails need 400. Anything intended for print is a different calculation entirely.

Then check the format

Format choice can halve the file with no perceptible change.

JPEG for photographs. Lossy, well supported, appropriate for anything with continuous tone and no transparency.

PNG for screenshots, diagrams, logos and anything with flat colour, sharp edges or transparency. Lossless. A photograph saved as PNG will be several times larger than it needs to be — this is a very common mistake.

WebP for the web generally. Typically 25 to 35 per cent smaller than JPEG at equivalent quality, supports transparency and animation, and is supported by every current browser.

AVIF where you can use it. Smaller again than WebP, particularly at low quality settings. Support is now broad but not universal, so a fallback is prudent.

SVG for logos, icons and simple illustrations. Vector, so it scales to any size, and frequently a fraction of the size of a raster equivalent.

The single biggest win available to most people is converting screenshots from PNG to WebP, and photographs from PNG to JPEG or WebP.

Then compress

With dimensions and format right, compression is a final adjustment.

For JPEG, quality around 75 to 85 is the usual sweet spot. Above 90 the file grows quickly for differences almost nobody sees. Below 65 artefacts appear around edges.

For PNG, lossless optimisers strip metadata and re-encode more efficiently, typically saving 10 to 30 per cent with no change to the image at all. Colour-reduction tools go further by cutting the palette, which is usually invisible on screenshots and diagrams.

For WebP and AVIF, quality settings behave similarly to JPEG, and both hold up better at low settings.

Strip metadata

Photographs carry EXIF data: camera model, settings, timestamp and frequently GPS coordinates.

This is a small saving in bytes and a large one in privacy. Publishing a photo taken at home with location data intact publishes your address.

Most compression tools strip metadata by default. Verify rather than assume, particularly if the image came straight from a phone.

Online tools versus local tools

Online compressors are convenient and require uploading your image to someone else's server. Fine for a screenshot of a public web page. Not fine for anything confidential, personal, or covered by a client agreement.

Local tools avoid that entirely. Every operating system has built-in resizing — Preview on macOS, Photos or Paint on Windows. Free desktop applications handle batch conversion and optimisation. Command-line tools do it in bulk and can be scripted.

For anything repeated, a local batch process beats an online tool on both speed and privacy.

Batch processing

If you have many images, do not do them one at a time.

Most image editors have a batch export. Command-line tools convert a whole folder in one command. Static site generators and content management systems frequently generate resized variants automatically, which is the right place to solve the problem if you publish regularly.

Serving the right size, rather than one size

For web use, the better answer is not one compressed image but several sizes, with the browser choosing. The srcset attribute lets you supply variants and the browser picks based on the display.

This means a phone downloads a small image and a large monitor gets a large one, rather than everyone getting the same compromise.

A short workflow

Resize to the largest size it will actually be displayed. Convert to the right format for the content. Compress at a quality setting you have checked visually. Strip metadata. Compare against the original at full size before publishing.

That sequence typically takes a five-megabyte phone photo to under two hundred kilobytes with no visible difference.

Mistakes people make

Compressing harder instead of resizing. A 4000-pixel image displayed at 800 wastes most of its data. Resizing first solves the problem with no quality cost.

Saving photographs as PNG. Lossless compression on continuous-tone images produces files several times larger than necessary.

Uploading confidential images to online compressors. Convenient, and the file goes to someone else's server.

Forgetting metadata. Photos carry GPS coordinates. Publishing a photo taken at home can publish your address.

Re-compressing an already compressed image. Each lossy pass degrades it further, and it is not recoverable.

The short answer

Resize to the largest size it will actually be displayed. Convert to the right format — JPEG or WebP for photos, PNG or WebP for screenshots. Compress at a quality you have checked visually. Strip metadata. In that order.