How to Reduce Image File Size for Web and Email

A 4 MB photo from your phone camera is the right size for printing. It is the wrong size for a website, a product listing, an email attachment, or a shared folder where storage bills money. Oversized images are one of the most common and most fixable performance problems across the web — yet many people either do not know where to start, or reach for a full image editor when a simpler tool would take thirty seconds.

This guide covers the three independent levers that control image file size, when to pull each one, and common mistakes that make things worse instead of better.

Why image size matters

Page speed and Core Web Vitals

Images are typically the heaviest assets on a web page. Google's Largest Contentful Paint (LCP) metric measures how long it takes the main image on a page to appear. A slow LCP score directly affects your position in search results — Google has confirmed that Core Web Vitals are a ranking signal. Compressing images is often the single highest-impact change you can make to improve LCP.

As a rough benchmark: a web page that loads in under 2.5 seconds on a mobile connection needs all its images to be as small as they can be without looking degraded. A single uncompressed 4 MB hero image can push a fast page into slow territory.

Email delivery limits

Gmail caps email attachments at 25 MB total. Many corporate mail servers impose much lower limits — 10 MB or even 5 MB is common. A batch of uncompressed photos from a phone can easily exceed these limits. Even when emails do deliver, large attachments frustrate recipients on mobile data connections.

Storage and bandwidth costs

If you manage a website hosted on a cloud platform, you are paying for storage and bandwidth. A site that serves 10,000 images per day at 2 MB each costs ten times more in bandwidth than the same site serving the same images at 200 KB each. Image optimisation has a measurable return on investment.

The three levers: format, compression, and dimensions

People often conflate these three techniques, which leads to confusion about why a particular approach worked or failed. Each one works differently and applies in different situations.

Lever 1: Format choice

The format you choose is the most impactful decision, because it determines the efficiency of everything else. The same image content stored as PNG, JPG, and WebP can have file sizes that differ by an order of magnitude.

• Use WebP for web images. WebP produces files 25–35% smaller than JPG at equivalent quality, and up to 80% smaller than PNG. It supports transparency and is supported by all modern browsers. If you are publishing images on a website, WebP should be your default in 2026.
• Use JPG for photographs in non-web contexts. Email attachments, print files, sharing via messaging apps — JPG has near-universal compatibility and is the practical choice when you are not sure what will open the file.
• Use PNG only when you specifically need lossless quality or transparency — and even then, consider WebP instead if the destination is a website or app.

Lever 2: Compression quality

Within a given format, the quality setting controls how aggressively the encoder discards information to produce a smaller file. For JPG and WebP in lossy mode, quality settings from 75 to 85 are the practical sweet spot — they produce files that look identical to the original in normal viewing conditions while cutting file sizes by 50–70% compared to a maximum-quality export.

The commonly recommended settings:

• 90–100%: Near-lossless. For images you will edit again, archiving, or professional print preparation. File sizes are large.
• 80–90%: High quality, barely distinguishable from the original. Good for hero images, product photography, anything displayed large.
• 70–80%: The standard "good enough for web" range. Thumbnails, blog post images, email-embedded photos. Most people cannot see the difference.
• Below 70%: Noticeable quality loss. Only appropriate for thumbnails, previews, or intentionally degraded aesthetic choices.

Lever 3: Dimensions (pixel size)

Compression quality reduces file size while keeping the pixel count the same. Resizing reduces the pixel count, which forces a smaller file regardless of format or quality setting.

If you are displaying an image at 400px wide on a website, serving a 3000px-wide image is wasteful — the browser downloads all those extra pixels and then scales the image down anyway. Serving the image at 800px (2× for retina displays) makes the file roughly 14× smaller with no perceptible difference to the viewer.

The key rule: resize to match the largest dimension at which the image will be displayed (account for retina/HiDPI by using 2× the CSS display size), then compress. Resizing and compressing together produces the best results.

The most common mistake: re-saving JPGs

JPG uses lossy compression. Every time you open a JPG, make even a minor edit, and save it again as a JPG, a new round of compression is applied on top of the previous round. After four or five re-saves, the quality degradation becomes visible — blocky artefacts appear around edges and in smooth gradient areas.

The fix: keep a master copy in a lossless format (PNG or the original RAW/TIFF). When you need to edit an image, work from the master and export a fresh JPG at the end. Never use JPG as a working format.

If you have already lost the master and only have a degraded JPG, there is no way to recover the lost quality. Converting to PNG will preserve the current degraded state without further loss, but it will not repair the artefacts.

A practical workflow for web images

1. Start from the highest resolution version of the image you have.
2. Resize to the maximum display size — typically 1200–1920px wide for full-width images, 600–800px for thumbnails.
3. Convert to WebP (or compress JPG if you need broad compatibility).
4. Set quality to 80–85% for photographs, 85–90% for graphics and text.
5. Check the output looks acceptable at the target display size before publishing.

Quick checklist: reducing image size for email

• Resize to no more than 1600px on the longest edge
• Save as JPG at 80–85% quality
• Target under 500 KB per image, under 5 MB total per email
• For inline images in HTML email, 600px wide is the standard column width
• Strip EXIF metadata (location, camera data) if privacy matters — most compression tools do this automatically