Compress an image to under 100KB

Why 100KB is the sweet spot for web images

Largest Contentful Paint — the Core Web Vitals metric that fails most often — is usually decided by the largest image above the fold. Getting that one image under 100KB is frequently the single fastest way to fix a failing LCP score, and it needs no code changes at all.

At 100KB you get:

• Sub-second load for that image on a normal 4G connection
• No quality loss visible at the sizes people actually view web pages at
• Room for an image around 1200–1400px wide, which covers most desktop content columns

Above roughly 200KB you are paying load time for quality nobody can see. Below 50KB you start paying visible quality for load time nobody notices. 100KB sits in the middle, and that is why it has become the default advice.

What 100KB looks like

Measured on a real 4K phone photograph (3840 × 2160, 1.52 MB), 100KB landed at 1445 × 813 pixels at quality 56 — a full-width content image on most sites, with nothing wrong with it. Below that resolution you would be choosing quality you cannot see over pixels you can.

Where 100KB does show its limits is in two specific places, and it is worth knowing them so you can spot them:

• Fine repeating texture — fabric weave, dense foliage, individual strands of hair. These are the first things a JPEG encoder gives up on.
• Smooth gradients — clear skies and studio backdrops, where subtle banding can appear as visible steps rather than a smooth transition.

Neither is noticeable unless you are comparing against the original side by side, which no visitor to your site will ever be doing.

Getting more out of your 100KB

• Match dimensions to display size. Serving a 3000px image into an 800px slot wastes most of the file and helps nobody — the browser throws those pixels away after downloading them. Resize to the rendered width first with the image resizer.
• Use WebP for web delivery. Typically 25–35% smaller at matching quality, and browser support is now effectively universal. Pick it in the format dropdown above.
• Compress once, from the original. Re-compressing an already-compressed JPEG compounds the damage every time, because each pass encodes the previous pass's artefacts as if they were real detail.
• Give different images different budgets. A flat graphic or a screenshot hits 100KB effortlessly. A dense landscape photograph needs every kilobyte. Treating them identically wastes one and starves the other.

If 100KB is not the right target

Going the other way is sometimes right. If the image is decorative and below the fold, 50KB is plenty and halves the cost. If it is a hero image on a photography or portfolio site where detail is the whole point, give it 200KB — at typical screen sizes that is effectively indistinguishable from the original.