SVG vs PNG vs WebP: Pick the Wrong Format and Your Users Pay

Choosing the right image format isn't about aesthetics - it's about bytes. The wrong choice costs your users real bandwidth. Here's a practical decision framework:

SVG

• Best for: logos, icons, illustrations, charts
• File size: tiny (text-based)
• Scaling: infinite (it's math, not pixels)
• Don't use for: photos (file size explodes - a single photo as SVG = megabytes)

PNG

• Best for: screenshots, UI mockups, images needing transparency
• Compression: lossless (every pixel preserved)
• Trade-off: larger than lossy formats. A PNG screenshot at 2400px wide is often 500KB+ while the JPG equivalent is 80KB.

WebP

• Best for: photos on the web, hero images, anything currently JPG or PNG
• Compression: lossy (like JPG) or lossless (like PNG) - your choice
• Real-world: 25-35% smaller than equivalent JPG at same quality. Google's format, supported everywhere now (97% browser coverage).

JPEG

Still the universal fallback. Use when you need guaranteed compatibility (email attachments, legacy CMS).

My personal defaults

• Screenshots for docs → PNG (need pixel-perfect)
• Hero images, blog photos → WebP at quality 80
• User uploads, email → JPEG at quality 85

A quick benchmark from my own site: switching hero images from PNG to WebP saved 1.2MB on first load. That's 0.3s on 3G.

If you need to batch-convert existing images, U-Ultra/Unity's format converter handles SVG↔PNG, HEIC→WebP, and RAW→JPG without installing anything. For local CLI work, I use imgbatch convert *.png --to webp.

What's your go-to format stack?