How to Compress Images for the Web Without Visible Quality Loss

Images are usually the heaviest part of a web page. A single photo straight from a modern phone can weigh 4–8 MB, more than the entire HTML, CSS and JavaScript of a typical site combined. The good news: with the right format, dimensions and quality setting, you can usually cut image weight by 80–90% with no difference anyone will notice.

Why image weight matters

• Speed: on a mid-range phone over a mobile connection, every megabyte adds noticeable delay. Visitors leave slow pages.
• SEO: Google's Core Web Vitals include Largest Contentful Paint (LCP), which on most pages is a hero image. Google recommends an LCP under 2.5 seconds.
• Cost: smaller files mean lower bandwidth bills and lower data usage for visitors on metered plans.
• Email and uploads: many forms and email providers reject attachments over a size limit.

Step 1: resize to the size it's displayed

This is the biggest win, and it's often skipped. A 4000 × 3000 pixel photo displayed in an 800-pixel-wide column wastes roughly 96% of its pixels. Work out the largest size the image will appear on screen, then double it for high-density (Retina) displays:

On a real site, serve several sizes with the HTML srcset attribute so phones download the small version and large monitors the big one.

Step 2: pick the right format

JPEG: photographs

JPEG uses lossy compression tuned for natural images with smooth gradients. It is universally supported and is still a fine choice for photos. It handles sharp edges and text poorly, producing visible "ringing" artifacts, and it has no transparency.

PNG: graphics, screenshots, transparency

PNG is lossless: every pixel is preserved exactly. That makes it ideal for logos, diagrams, UI screenshots and anything with text or transparency. For photos it's a poor fit, often five to ten times larger than an equivalent JPEG.

WebP: the modern default

WebP supports both lossy and lossless modes plus transparency, and typically produces files 25–35% smaller than JPEG at the same visual quality. Every current browser supports it, so for most websites WebP is the best general-purpose choice today. (AVIF compresses even better but encodes more slowly and has less tooling support.)

Simple rule: photos → WebP or JPEG. Graphics with text, sharp lines or transparency → PNG or lossless WebP. Icons and logos → SVG if you have a vector version.

Step 3: choose a quality setting

Lossy formats let you trade quality for size, and the relationship is far from linear. Going from quality 100 to 85 often halves the file with no visible change, while going from 60 to 40 saves little and introduces obvious blockiness. Good starting points:

• 75–85 for most website photos.
• 85–92 for photography portfolios or product shots where detail matters.
• 60–70 for small thumbnails or background images that sit behind text.

Always compare the result at 100% zoom, paying attention to skin tones, skies and fine textures, which show compression artifacts first.

Step 4: strip what you don't need

Camera photos carry EXIF metadata: camera model, settings and often GPS coordinates of where the photo was taken. That's extra bytes and a real privacy risk if you publish photos taken at home. Re-encoding an image through a canvas, as browser-based compressors do, discards this metadata automatically.

A worked example

A typical phone photo going through these steps:

1. Original: 4032 × 3024 JPEG, 5.1 MB.
2. Resized to 1600 × 1200: about 900 KB.
3. Re-encoded as JPEG at quality 80: about 280 KB.
4. Or as WebP at quality 80: about 190 KB.

That's a 96% reduction, and on a laptop screen the final image is indistinguishable from the original. Exact numbers vary with the photo's content: busy scenes with lots of detail compress less than simple ones.

Checklist before you publish

• Is the image no larger than about twice its displayed width?
• Is it in the right format for its content?
• Did you check the quality at 100% zoom?
• Does it have descriptive alt text for accessibility and search engines?
• Are below-the-fold images marked loading="lazy"?
• Have you set width and height attributes to prevent layout shift?

Our Image Compressor handles resizing, format conversion and quality in one step. It works entirely in your browser, so your photos are never uploaded to a server.