"How many KB should my images be?" has no single answer — a full-width hero and a 40 px avatar have completely different jobs. What works is a *budget per role*.

Byte Budgets by Image Role

  • Hero / full-width banner (1600–2000 px wide): under 200 KB. This is usually the largest element on screen and the biggest factor in your Largest Contentful Paint (LCP) score.
  • Content photos in articles (800–1200 px): 60–120 KB. At quality ~75 JPEG or WebP this is comfortably achievable.
  • Product listing / card thumbnails (300–600 px): 20–50 KB. Grids show many at once; the budget is per tile.
  • Logos and icons: under 20 KB — and ideally SVG, which stays crisp at every size.
  • A whole page: aim for total image weight under ~1 MB on landing pages. If one photo eats half of that, the rest must shrink.

Why Budgets Beat "As Small As Possible"

Google's Core Web Vitals measure user experience directly: heavy images inflate LCP, and pages that feel slow rank and convert worse — especially on mobile connections, which are the majority of traffic almost everywhere. But over-compressing costs you too: a blocky, artifact-ridden product photo loses more sales than it saves in bandwidth. A budget names the point where you stop.

Hitting a Budget in Practice

  1. Resize to display dimensions first. Serving a 4000 px photo into an 800 px slot wastes 25× the pixels. This step alone usually gets you most of the way.
  2. Pick the modern format. WebP is 25–35% smaller than JPEG at the same visual quality; use JPEG only when compatibility with old software matters.
  3. Compress to the number. Instead of nudging a quality slider and re-checking, use a compressor with a *target size* mode: set 200 KB (or 100 KB, or 50 KB) and let it binary-search the quality that fits. ImageHow's Compress Image does this per file, even across a whole batch.
  4. Verify on the worst page. Open your image-heaviest page in the browser dev tools' Network tab and sort by size — the offenders are instantly obvious.

Treat these budgets like a speed limit rather than a law of physics: exceed them knowingly for a photography portfolio, but know that every extra 100 KB is paid for by every visitor, on every visit.