For web delivery, compress photographs to JPEG or WebP quality 75–85 and hold file budgets of roughly 200KB for heroes, 150KB for content images, 50KB for thumbnails — but resize dimensions first, because a 4000px photo shown at 1200px is 90% wasted pixels no quality slider can fix.

The two-step that actually works

Compression questions usually focus on quality, but the order of operations matters more than either setting:

1. Resize to ~2× display dimensions. If the image renders at 800px wide on the page, export at 1600px (retina headroom) — not the 4000px the camera produced. Pixels you never display are the single largest source of image bloat.
2. Compress at quality 75–85. In this range JPEG artifacts stay below the perception threshold at normal viewing distance. The compressor exposes quality mode directly, or target-size mode if you need a hard KB ceiling.

File-size budgets by use

Use	Display width	Export at	Format	Budget
Full-width hero	~1400px	2400–2800px	WebP/JPEG 80	≤200KB
In-content photo	~800px	1600px	WebP/JPEG 80	≤150KB
Card / thumbnail	~400px	800px	WebP/JPEG 80	≤50KB
Avatar	~100px	200px	WebP/JPEG 85	≤20KB
Logo / icon	any	exact size	PNG or SVG	≤30KB
Screenshot with text	~800px	1600px	PNG or WebP-lossless	≤150KB

The screenshot row is deliberate: JPEG mangles sharp text edges with ringing artifacts — line art and UI captures belong in PNG (or lossless WebP) even though the file is bigger. The format guide covers the lossy/lossless split in detail.

When the budget fights back

Some images can’t hit the target cleanly — detailed 4000px panoramas asked to fit 100KB, flat-color artwork forced through JPEG. The honest answers:

• Hard KB limits (upload forms, email): let the target-size mode trade quality and dimensions automatically; it reports when the limit is unreachable.
• Quality floor: below quality ~65 the artifacts are visible; at that point a smaller crop or lower resolution is the better trade.
• Per-page total: three 180KB heroes hurt more than one — count the page, not just the image.

WebP earns a mention as the default choice: ~25–35% smaller than JPEG at equal quality, universal browser support. JPEG remains the safe pick for email clients and picky upload forms.

Frequently asked questions

What JPEG quality setting is best for web images?

75–85 is the sweet spot for photographs: visually indistinguishable from quality 100 at normal viewing size, at roughly a third of the file size. Below ~65, blockiness shows up in skies and gradients. Above 90, file size climbs steeply for imperceptible gain. The compressor's quality mode defaults into this range; when a hard KB limit matters more, its target-size mode picks the highest quality that still fits automatically.

How many KB should a web image be?

Working budgets: full-width hero images ≤200KB, in-content photos ≤150KB, thumbnails and avatars ≤50KB, logos/icons ≤30KB (or use SVG). As a page-level rule, keep total image weight under ~1MB per page on a typical site — mobile networks render anything beyond that as waiting.

Is it better to resize or compress an image?

Resize first, always — it's the bigger lever. A 4000px-wide photo displayed at 1200px wastes ~90% of its pixels before compression even starts. Get dimensions to ~2× the display size (for retina screens), then compress. A correctly resized image at quality 80 almost always beats a huge image at quality 40.

How much smaller is WebP than JPEG?

Typically 25–35% smaller at equivalent visual quality, and it supports transparency. All modern browsers read it. Keep JPEG as the fallback for email clients, older apps and upload forms that whitelist formats — otherwise WebP is the better default for web delivery. The format comparison has the full trade-offs.

Does compressing images hurt SEO?

The opposite — uncompressed images hurt SEO. Page weight and Largest Contentful Paint are Core Web Vitals inputs, and oversized images are the most common reason pages fail them. Google doesn't reward visible quality beyond 'looks clean'; it penalizes slow. Aggressive-enough-to-be-invisible compression is the optimal point for both users and rankings.

Why does my compressed image look blurry?

Usually one of two things: the quality went too low (JPEG artifacts in gradients and around edges — raise quality to 75+ or switch to WebP), or the image was upscaled — a 400px image stretched to fill 1200px is soft at any file size. Check the output pixel dimensions against where it's displayed; compression should never change dimensions unless you ask it to.