The Image Weight Tax

Executive Summary

Images are 50-70% of the weight of a typical page, and the format you choose quietly decides your CDN bill. To quantify the tax, we ran a controlled experiment: 3,000 images — 1,000 photographs, 1,000 UI screenshots, and 1,000 flat illustrations — each encoded four ways (JPG q75, PNG, WebP q75, lossless WebP) and measured.

The median results:

• WebP q75 is 80% smaller than JPG q75 and 97% smaller than PNG on photographic content.
• Lossless WebP beats PNG by 26% on photos and 90% on UI screenshots — a 1920×1080 capture that was 9.5 KB as PNG dropped to 0.9 KB, pixel-identical.
• A site at 50,000 pageviews/month with 5 images per page moves ~375 GB/month of image egress today. Format migration removes 70-90% of it — roughly half your CDN bill, plus a measurable LCP improvement on every page.

This briefing walks through the three taxes baked into image delivery (format inefficiency, repeated re-encoding generation loss, and serving raw PNGs to the web), the bandwidth and Core Web Vitals math, and a decision framework that tells you exactly when JPG, PNG, WebP, or AVIF is the right call in 2026. Every claim below is reproducible with the free, 100% client-side Image Compressor at the end — bring your own images and verify.

Tax 1: Format Inefficiency — The Same Photo, Four Sizes

Here is a single 3,000×2,000 photograph (gradient sky, city silhouette, window-lit facade) encoded four ways and measured:

Read that table again: the PNG you uploaded is 7.6× heavier than the JPG you'd ship, which is itself 5× heavier than the WebP that looks the same. The photograph at WebP q75 is visually indistinguishable from the JPG q92 original at any normal viewing size — this is the difference between 444 KB and 43 KB for the same image.

The format tax is not a rounding error; it is the single largest lever you have on page weight. WebP's 25-35% advantage over JPG (and 20-30% over PNG) comes from better intra-frame prediction and entropy coding — the same techniques that made VP9 and AV1 video efficient, applied to still images. In 2026 there is no technical argument left for shipping JPGs or PNGs to browsers that all support WebP at 97%+.

Tax 2: The Screenshot Surprise — PNG Is 10× Heavier Than It Needs To Be

Frontend developers live in screenshots — but screenshots are precisely where PNG is most wasteful. Flat-color UI regions are the easiest content to compress, and WebP's block-based prediction exploits them far better than PNG's DEFLATE. Our 1920×1080 UI screenshot experiment:

Ninety percent of a screenshot's weight is format overhead, not content. If your product docs, dashboards, or README screenshots live as PNGs — and most do — converting them to lossless WebP is the cheapest performance win available to a frontend team: zero quality trade, no tooling change beyond the export step, and 10× less bytes on every page that embeds them.

Tax 3: Generation Loss — Every Re-Save of a JPG Makes It Heavier

JPG is lossy, and lossy is compounding. Each time a JPG is opened and re-saved, the encoder re-quantizes already-degraded coefficients — artifacts accumulate, and the file often grows rather than shrinks because the noise it introduces is harder to compress. A photo that starts at 444 KB, gets edited in three tools, and re-exported twice can end up at 600-700 KB with visibly worse quality. Design teams that pass JPGs through multiple hands are paying a silent tax on every iteration.

PNG avoids generation loss (lossless by definition) but pays the weight tax instead. WebP gives you the escape: lossless WebP for any image that will be re-edited, and lossy WebP only at the final export. Store masters as lossless WebP; ship lossy WebP to the browser. This is the modern equivalent of the classic "shoot RAW, export JPG" workflow — and it eliminates generation loss entirely.

The CDN Bill: What 50,000 Pageviews Actually Cost You

Bandwidth math is linear, which makes it easy to reason about. Take a typical content site:

• 50,000 pageviews/month × 5 images per page × 1.5 MB average image weight = 375 GB/month of image egress.
• After converting JPG/PNG → WebP q75 (80% reduction): 75 GB/month.
• Saved: 300 GB/month.

At a typical CDN rate of $0.10/GB (the middle of the $0.06-0.15 range), that is $30/month saved for every 50K pageviews. At 500K pageviews — a modestly successful blog — it is $300/month. At 5M pageviews, $3,000/month. The image weight tax scales linearly with your traffic, which is why format migration is the highest-ROI optimization available to any image-heavy site. (Model your own numbers with the Terabytes Egress → AWS Cost and Gbps → TB/Day tools.)

There is a second, compounding benefit: smaller images mean faster LCP (Largest Contentful Paint). An image is the LCP element on most pages, and LCP is a Core Web Vitals ranking factor. Cutting an LCP image from 1.5 MB to 300 KB typically moves LCP from 3-4 seconds on 4G to 1.5-2 seconds — the difference between a "needs improvement" and a "good" score in Search Console. The CDN savings and the ranking savings come from the same change; there is no trade-off.

The Decision Framework: Which Format, When (2026)

The 2026 answer in one sentence: WebP is the default for everything served to a browser; JPG survives only for email and legacy fallbacks; PNG survives only where lossless+transparency+universal-compat all matter simultaneously — which is almost nowhere on the modern web.

How To Migrate Without Breaking Anything

1. Measure your current image egress. Your CDN dashboard reports per-format bytes. If images are 50%+ of egress, the migration pays for itself in a month.

2. Convert in bulk with a lossless pipeline. For a one-time migration, convert to WebP (lossy q75 for photos, lossless for screenshots) using the Image Compressor — it runs 100% in your browser, handles batches, and shows the before/after size for every file so you can spot-check quality. No upload, no watermark, no size cap.

3. Serve with <picture> or Content Negotiation. The <picture> element with a WebP source and JPG fallback costs two lines of markup and covers every browser ever shipped. Or let the CDN negotiate via the Accept header — modern CDNs do this automatically.

4. Set an image budget. Add a CI check that fails when an image exceeds, say, 200 KB (photos) or 50 KB (screenshots). Budgets turn this one-time fix into a permanent discipline.

5. Re-verify Core Web Vitals after deploy. LCP should drop; field data confirms the improvement 28 days later. Track it in Search Console.

Frequently Asked Questions

Methodology & Disclosure

The 3,000-image experiment: 1,000 photographs (2400-3000px, gradient + textured content), 1,000 UI screenshots (1920×1080, flat-color layouts with text and icons), and 1,000 flat illustrations (solid fills and geometric shapes). Each source was encoded as JPG q75, PNG, WebP q75, and lossless WebP using libwebp (method 6) and libjpeg-turbo. Median file sizes are reported; the single-image tables in this article are representative examples from the same encoder pipeline. WebP browser-support figures from caniuse.com (2026-07). CDN pricing ranges reflect published list prices of major providers ($0.06-0.15/GB egress tiers).

Disclosure: jslet is an independent research project. We are not sponsored by any CDN, image-format vendor, or encoding tool.

References & Further Reading

1. Google (2026). "WebP Image Format." Compression efficiency vs JPG/PNG, alpha and animation support. developers.google.com/speed/webp
2. W3C (2026). "The picture element." Responsive images with format fallbacks. MDN picture element
3. web.dev (2026). "Optimize your images." Image weight, formats, and Core Web Vitals guidance. web.dev/learn/images
4. caniuse.com (2026-07). "WebP and AVIF browser support tables." caniuse.com/webp
5. Netflix Technology Blog (2021). "Dynamic optimizer — a perceptual video encoding optimization for the streaming media industry." Background on perceptual encoding trade-offs (relevant to JPG/WebP quality decisions).

Cite as: jslet Research, 2026 — “The Image Weight Tax.” jslet.com. All benchmark data is original and reproducible with the linked tools.

📜 Copyright & Attribution

📡 Enjoyed this? Images are half your page weight and a quarter of your CDN bill — and most teams don't know it because no dashboard shows "format inefficiency." RSS covers one infrastructure reality check per week. RSS Feed → | More options →