How to Reduce Image File Size for Web (Without Losing Quality)

!web image optimization

The Only Three Numbers That Matter

When I first started building PDFBucket, I realized most image optimization advice drowns in format wars and encoder debates. In my testing across thousands of images, I've found you only really need to know three numbers:

1. Quality setting: 80 for photos (JPEG/WebP), lossless for logos/screenshots (PNG)
2. Maximum dimension: Serve images no wider than your layout — if your content column is 800px wide, resize to 800px before compressing
3. Target file size: Under 200 KB for inline images, under 400 KB for full-width hero images

Everything else is optimization at the margins.

Why File Size Still Matters in 2026

Average global mobile connection speeds have improved significantly since 2020, but median page weight has grown faster. Lighthouse data from HTTP Archive shows that images remain the single largest contributor to page weight.

When I ran speed tests on unoptimized product pages over a standard 4G connection, a 4 MB page took 8-12 seconds to fully render. After I properly compressed the images, it loaded in under 2 seconds. That difference translates directly into bounce rate, conversion rate, and search ranking.

Choosing the Right Format

JPEG remains my go-to for photographs and complex imagery. Lossy compression works exceptionally well on continuous tones. In my testing at quality 80, most people cannot distinguish JPEG from a lossless original even at 200% zoom. (If you're curious about the technical details, see my complete guide on how image compression works).

WebP is JPEG's superior replacement. I recommend it for photographs and anywhere JPEG was previously used. To understand why it's better, check out my comparison of WebP vs JPEG vs PNG vs AVIF.

PNG is what I use for anything with text, hard edges, transparency, or flat colors. Logos, screenshots, UI mockups, icons.

The Dimension Problem (Most People Skip This)

I see this mistake constantly: uploading 4000×3000 camera originals for a 300×300 thumbnail layout. The browser ends up downloading 12 million pixels to display 90,000.

Always resize before compressing. When I built the Image Resizer, I made sure it processes the resize before applying compression so you don't encode data that's going to be thrown away anyway.

Step-by-Step: Compress Images for a Website

1. Open the Image Compressor in your browser
2. Upload your image(s) — drag multiple files for batch processing
3. For photos: leave quality at 80%, choose WebP as output format
4. For logos/diagrams: choose PNG, quality is automatic (lossless)
5. Click Download — no account, no server upload

In my personal workflow, I typically see a blog's hero image go from 2.4 MB down to 180 KB.