Why image weight matters

Average web pages now ship more megabytes of images than the entire page HTML, CSS, and JavaScript combined. Every byte of that image weight delays first paint, increases data use on mobile, and raises bounce rates. Because image weight is usually the easiest metric to improve on any site, optimizing photos and graphics is the highest-leverage performance task most developers will do all year.

Pick the right format first

Format choice decides most of your file size before a single quality slider is touched. Use the bracket that matches the image type:

  • WebP is the balanced default for photos and mixed graphics. It regularly beats JPEG by 25–35% at equal quality and is supported everywhere.
  • AVIF goes further than WebP for high-entropy photos, often another 20–30% smaller, at the cost of slightly slower encoding. Use it for hero images where you control the deployment pipeline.
  • PNG is for screenshots, logos, and line art with sharp edges and transparency. Exporting a photo as PNG is usually the heaviest mistake a page can make.
  • SVG should replace every small icon and logo you currently ship as PNG. It scales to any screen at a fraction of the size.

The right order: crop, resize, then compress

Optimizing in the wrong order wastes effort. Follow this sequence:

  1. Crop the dead space and distractions first. A tighter composition also means fewer pixels to carry through the later steps.
  2. Resize to the largest display width the image will ever render at. Serving a 4000px photo into a 800px slot is the single biggest relative waste on the web.
  3. Compress last, using the quality slider to remove the fine detail humans rarely notice at actual display size.

How far should you compress?

Start at a JPEG/WebP quality of 70–80. At that range most photos lose less than a few percent of visible sharpness while dropping to a fraction of their original bytes. Test each image at the size it will actually be displayed; artifacts you cannot see at that size do not matter. For very large photos, sample a small region at full zoom to confirm text and faces still read cleanly.

Automate it

Manual optimization is fine for hero pages, but it never survives a content pipeline. Add automatic compression at build time: HTML and CSS assets via a bundler plugin, and every uploaded image through a resize-and-encode step before it reaches the CDN. Keep the original file in storage and always serve an optimized derivative.

Realistic expectations

A well-optimized article page should carry roughly 200–500KB of images total; a hero-heavy landing page under 1MB is achievable. If your page currently loads several megabytes of imagery, the steps above will typically cut it to a tenth of the original weight while looking the same to visitors.

Quick checklist

  • Export photos as WebP (or AVIF for heroes) and graphics as SVG or PNG.
  • Never ship an image wider than its display slot.
  • Crop first, resize second, compress last.
  • Pick quality by testing at real display size, not at 100% zoom.
  • Automate compression in the build so no image skips the pipeline.