How to Compress Images for the Web Without Losing Quality

Open the network tab on almost any slow website and images will be the largest thing on the page, often more than every script and stylesheet combined. The fix is rarely complicated: most images are uploaded at camera resolution and served at a fraction of that size, with no compression beyond whatever the phone applied. Getting them right is the highest-return performance change most sites can make, and it needs no developer.

This guide covers the decisions in the order you should make them: dimensions first, then format, then compression level, then delivery. The examples use our free Image Compressor, Image Resizer and Image Converter, all of which run in your browser without uploading files to a server.

Step 1: Resize before you compress

Compression reduces bytes per pixel. Resizing reduces the number of pixels. If a 4,000-pixel-wide photo is going to display at 800 pixels, resizing it removes 96% of the data before compression touches it, and the result is sharper than a heavily compressed full-size original scaled down by the browser.

Advertisement

Work out the largest size each image will ever be displayed at, then export at roughly twice that width for high-density screens. Practical targets:

Use	Display width	Export width
Full-width hero	1,200–1,600 px	1,920–2,400 px
Blog post inline image	700–800 px	1,400–1,600 px
Product grid thumbnail	300–400 px	600–800 px
Avatar / icon	48–96 px	96–192 px

For a batch of product photos or a whole media library, the Bulk Image Resizer applies one width to every file at once.

Step 2: Pick the right format

• JPEG — photographs and anything with gradients. Lossy, universally supported, no transparency.
• PNG — screenshots, logos, images needing transparency, flat colour graphics. Lossless, so files are large for photos.
• WebP — both lossy and lossless, supports transparency and animation, typically 25–35% smaller than JPEG at the same visual quality. Supported by every current browser.
• AVIF — newer, often 20–30% smaller again than WebP, but slower to encode and unsupported in some older browsers and email clients.
• SVG — logos, icons and simple illustrations. Resolution-independent and usually tiny. Not a raster format, so it does not apply to photos.

A reasonable default in 2026: WebP for everything raster on the web, with JPEG or PNG kept as the source file. Use the Image Converter to switch formats; conversion and compression are separate operations, and converting a PNG screenshot to lossy WebP will keep the file small only if you also accept mild artefacting around text edges.

Step 3: Lossy vs. lossless compression

Lossless compression finds redundancy in the data and stores it more efficiently. Nothing is discarded; the decoded image is pixel-identical. Gains are modest for photos (5–20%) and large for flat graphics.

Lossy compression discards information the eye is unlikely to notice: subtle colour variation, high-frequency detail. Gains are large (50–80% for a typical photo) and, at sensible settings, invisible on screen.

The “quality” slider on any compressor controls how aggressive lossy compression is. The relationship is not linear: going from quality 100 to 85 removes most of the weight with no visible change, while going from 85 to 60 saves relatively little and starts to show blocking in smooth areas. For JPEG and WebP, 75–85 is the range that suits nearly everything. Screenshots with small text are the exception; keep them at 90+ or use lossless PNG.

Step 4: Set a size budget and hit it

A budget is easier to enforce than a quality number. Targets that keep Largest Contentful Paint comfortably under 2.5 seconds on a mid-range phone:

• Hero image: under 200 KB
• Inline content image: under 100 KB
• Thumbnail: under 30 KB
• Total images per page above the fold: under 500 KB

Drop the file into the Image Compressor, watch the output size, and lower the quality only until you cross the budget. For dozens of files, the Bulk Image Compressor applies the same setting to a whole folder and returns a single download.

Step 5: Deliver them properly

Compression is wasted if the page then requests the image inefficiently. Three settings to check on the page itself:

1. Width and height attributes on every <img>, so the browser reserves space and the layout does not shift when the image arrives.
2. loading="lazy" on images below the fold, and not on the hero image, which should load immediately (add fetchpriority="high" to it instead).
3. srcset with two or three widths so phones download the small version. WordPress does this automatically for uploaded images as long as the original is large enough to generate the intermediate sizes.

A repeatable workflow

1. Export from your editor at the largest size needed (see the table above), as PNG or high-quality JPEG.
2. Resize to the exact export width if the editor overshot.
3. Convert to WebP.
4. Compress at quality 80; check the file is under budget; adjust.
5. Upload with a descriptive filename (blue-ceramic-mug-front.webp, not IMG_2041.webp) and fill in the alt text.

Ten minutes of this on a page’s images routinely halves its load time. It is the rare optimisation that improves speed, search visibility and hosting bandwidth at the same time.

Frequently asked questions

Does compressing an image reduce its quality?

Lossless compression does not. Lossy compression discards detail, but at quality 75–85 the loss is not visible on screen. Compress a copy and compare side by side if you are unsure.

Which is better for a website, PNG or JPEG?

JPEG for photos, PNG for screenshots, logos and anything with transparency. For either, WebP will usually be smaller and is safe to use on the web today.

Is it safe to compress images online?

It depends on the tool. The ToolzDirectory image tools process files inside your browser, so nothing is uploaded. Tools that send files to a server should state their retention policy.

How much can I expect to save?

For an unoptimised photo straight from a phone, resizing plus WebP conversion plus quality-80 compression typically reduces the file by 85–95%.