How to Optimize Images for the Web (Without Losing Quality)

To optimize an image for the web without any visible quality loss, you do three things: resize it to the real width it appears at on the page (you rarely need more than 1600px wide), save it as WebP, and compress it to around 80% quality. In practice, a 4 MB photo straight from your phone drops to 150–250 KB — more than 15× smaller — with no difference the eye can catch. Order matters: resize first, then compress.

Why speed matters (and why images are the main culprit)

On most sites we see, images are by far the heaviest thing to load — heavier than all the text, code and fonts combined. A page with 6–8 unoptimized phone photos can weigh 15–25 MB. On a phone with a weak signal, that means several seconds of a blank screen, and the visitor leaves before seeing anything.

Google measures this through Core Web Vitals — especially LCP (how long the largest image at the top of the page takes to appear). We won't promise you any "number 1 spot on Google," but a fast site is a genuine ranking signal and, more importantly, keeps people on the page. Speed isn't cosmetic; it's the first thing a client feels.

Step 1: Resize to the real width

The most common mistake: putting a 4000×3000px photo in a spot where it actually shows at 600px wide. The browser shrinks it on display, but still downloads the full file. Pointless.

Simple width rules:

For modern (retina) screens it's fine to export at double the display size — a photo shown at 600px, you export at 1200px. That's it, no more.

Step 2: Choose the WebP format

WebP is the standard format in 2026: it's supported by every major browser (over 94% of users, per compatibility data reported by Tinify) and produces files 25–35% smaller than a JPEG at the same visual quality. For photos and most images on a business site, WebP is the correct, simple choice.

There's also AVIF, a newer format that compresses even better (files 20–40% smaller than WebP). It's excellent for large images, but it encodes much more slowly and is harder to handle by hand. Our recommendation: stick with WebP if you edit your photos manually. AVIF makes sense when the site generates the formats automatically.

A handy rule: JPEG/WebP for photos, PNG/SVG for logos, icons and graphics with text. SVG is vector — it stays sharp at any size and weighs a few KB.

Step 3: Compress (where the magic is)

"Lossy" compression throws away detail the eye doesn't notice. At 80% quality, the difference from the original is practically invisible, but the file shrinks dramatically. Below 60% you start to see ugly artifacts, especially on clear sky or skin.

Free tools we use and recommend:

• Squoosh.app (Google) — open it in the browser, slide the quality and see the difference live. Free, no account.
• TinyPNG / TinyJPG — drag the photos in, download them compressed. Fast for small batches.
• ImageOptim (Mac) — install it and drag photos onto it.

Quick checklist before uploading

• [ ] Width no more than ~2× the display size
• [ ] WebP format (or JPEG if a fallback is needed)
• [ ] Quality ~80%, checked visually
• [ ] Each file under ~250 KB (ideally under 150 KB)
• [ ] Descriptive file name: `haircut-cluj.webp`, not `IMG_4821.jpg`
• [ ] Alt text filled in — good for accessibility and for local SEO

Honest trade-offs

Manual optimization takes time. For 10 photos it's a 15-minute job; for a shop with 300 products, it isn't. There you need either an automatic pipeline (the site generates the WebP on upload) or lazy loading (images lower down load only as you scroll). Many modern platforms do this out of the box — but not all, and rarely configured well.

There's another real compromise: if you overdo compression to save a few KB, you ruin the image. A fast site with ugly photos doesn't sell. Balance — not the extreme — is the goal.

At MPO Web Studio (a team in Cluj-Napoca, working 100% remote across Romania) we deliver sites with the images already optimized and the formats generated automatically, so the page is fast without you touching every photo. If you want to see what your site would look like done properly, we'll make you a free demo — message us on WhatsApp at wa.me/40750257140 and we'll get started.