Why Images Are the Biggest Web Performance Problem

On the median website in 2026, images are 50-60% of total page weight. JavaScript and CSS are the small share. The "modern websites are bloated with JS" meme is partly wrong. Websites are bloated with images.

The HTTPArchive numbers

Each year HTTPArchive scans the top million sites and publishes median resource weights. For 2026:

Images are larger than every other resource type combined. And the trend is upward. Average page weight has tripled since 2015.

Why this happens

1. Phone cameras keep getting better

A photo from a 2015 phone was 2-3 MB. A photo from a 2024 phone is 6-8 MB. Designers don't think to downsize before handing files to developers, who don't think to ask.

2. Designers work with sources, developers ship sources

A typical workflow: designer exports hero.jpg from Figma at 100% scale (3200×1800), drops it in the project, developer uploads as-is. Nobody asks "is this the right size?" The CMS doesn't know better.

3. Retina displays normalised oversizing

"Always ship 2x for retina screens" became dogma, leading to 3200px-wide images displaying in 1600px slots forever.

4. CMS auto-thumbnails are not enough

WordPress generates medium, large, etc. variants, but the original full-size source still gets stored, served via srcset, and (often) misused when developers grab the wrong variant for a layout.

5. Hero videos and motion graphics

Animated content has its own bloat trajectory. Autoplay hero videos add 5-10 MB to the typical landing page.

The cost

Real consequences of image bloat:

• LCP > 2.5s: hero image takes too long to download/decode. Visitors think the page is broken.
• High bounce rate on mobile: 3G/4G visitors abandon before the page loads.
• CDN bills: serve a million page views per month with 1.4 MB images → 1.4 TB of egress.
• Carbon footprint: yes, this matters. Every wasted byte uses energy at every hop.

The fix is mundane

Three steps cover 90% of the problem:

1. Resize sources to display width

If your maximum display width is 1600px, no source image should be larger than 1600px (or 3200px for 2x). Anything bigger is wasted bytes.

2. Convert to WebP or AVIF

Default to WebP. Upgrade to AVIF when bandwidth costs justify the encoder time.

Image Compressor handles both. AVIF Converter is the dedicated AVIF tool.

3. Compress aggressively

Quality 80-85 is visually identical to quality 100 for normal viewing. Default in OmegaPix tools.

Together, these steps typically reduce image weight by 60-80%.

Measuring impact

A site whose median image was 250 KB → 80 KB sees:

• LCP improvement: 1-2 seconds faster on mobile.
• Bounce rate: 5-15% lower (highly site-dependent).
• Bandwidth bill: 60-70% lower.
• Search ranking: small but measurable boost from CWV improvement.

Numbers are from public case studies. Your mileage varies based on starting position and audience.

The fix isn't a plugin

Most "image optimization plugins" only help at the margin. The real win comes from changing your team's workflow:

1. Designer: export images at max needed display width, not original.
2. Developer: convert to WebP/AVIF before upload.
3. CMS: auto-detect and serve modern formats based on Accept header.

Steps 1 and 2 are people problems. Step 3 is a CDN feature in 2026 (Cloudflare Images, Bunny Optimizer, etc.).

A counter-intuitive truth

Optimising images is the highest-leverage performance work you can do. It's also the most boring. JavaScript performance is interesting and complex; image optimization is repetitive and unsexy.

The bias against doing it (and toward, e.g., bundle splitting) means most teams over-invest in JS performance and under-invest in images. The result: sites with brilliantly-architected React components serving 8 MB hero photos.

Tools

• Image Compressor: batch compression with multi-format output
• PNG to WebP, AVIF Converter, HEIC to JPG: single-purpose converters

All run client-side via WASM. Your team's photos never upload.

Related

• How Image Compression Improves Core Web Vitals
• Image Optimization Checklist for Web Developers