The Complete Image Optimization Pipeline

Your designer hands you a 4000x3000 PNG straight from Photoshop. It's 8 MB. Your webpage needs it at 800px wide, under 100 KB, and ideally in WebP format.

That gap between "what you have" and "what the web needs" is where most developers waste time. Let's fix that with a proper pipeline.

Step 1: Resize to Target Dimensions

The single biggest file size reduction comes from resizing. A 4000px-wide image displayed at 800px is wasting 96% of its pixels. That's not an exaggeration — that's math.

For retina displays, go 2x your display size. So if the image renders at 400px on screen, resize to 800px. Not 4000px. Not the original.

Typical savings: 4000x3000 (8 MB) → 800x600 (400 KB). That's a 95% reduction just from resizing.

Step 2: Compress Without Visible Quality Loss

After resizing, compress. For photographs, JPEG quality between 75-85% is the sweet spot — visually identical to the original, significantly smaller file.

The trick is finding the threshold where compression artifacts become visible. For most photos, that's around 70%. Stay above it and nobody can tell the difference without zooming in.

Typical savings: 400 KB → 120 KB at 80% quality. Your users' eyes won't notice. Their load times will.

Step 3: Convert to Modern Formats

JPEG and PNG have been around forever. WebP gives you 25-35% smaller files with the same quality. AVIF pushes that even further.

The practical approach:

• Photos: Convert to WebP (broad support) or AVIF (best compression)
• Screenshots/graphics: WebP or PNG depending on transparency needs
• Icons/logos: Keep as SVG when possible

Use <picture> elements to serve WebP with JPEG fallback. Browser support for WebP is above 97% now, but fallbacks cost nothing.

Step 4: Optimize Your SVGs

SVG files from design tools carry a lot of baggage — editor metadata, unnecessary decimal precision, redundant groups, invisible elements. A typical Illustrator SVG has 30-50% cruft.

Run them through an SVG optimizer and watch the file sizes drop. A 15 KB icon becomes 5 KB. Multiply that by 20 icons on your page and you've saved 200 KB of markup.

Step 5: Base64 for Tiny Assets

For very small images (under 2 KB) — think icons, bullets, tiny decorative elements — converting to Base64 and embedding inline eliminates an HTTP request entirely.

One less request > one slightly larger HTML file. But only for small images. A 50 KB Base64 string in your CSS is worse than a separate request.

The rule of thumb: under 2 KB? Base64. Over 2 KB? Separate file.

Real Numbers: A Case Study

Starting point: 12 product images on a category page.

| Stage | Total Size | Savings | |-------|-----------|---------| | Original PNGs | 45 MB | — | | After resize (800px) | 2.1 MB | 95.3% | | After compression (80%) | 680 KB | 98.5% | | After WebP conversion | 450 KB | 99.0% |

That's 45 MB down to 450 KB. Same visual quality. The page loads in 1.2 seconds instead of 12.

The Pipeline in Practice

For a batch of images, the workflow becomes mechanical:

1. Resize all images to target dimensions
2. Compress with appropriate quality settings
3. Convert to WebP/AVIF
4. Optimize any SVG assets
5. Base64 encode tiny icons

Once you've done it three times, it takes five minutes for a whole page's worth of images.

Don't Forget: Lazy Loading

Optimization doesn't stop at file size. Add loading="lazy" to images below the fold. The browser won't even download them until the user scrolls near them. Free performance.

---

Image optimization isn't glamorous. Nobody writes blog posts about how excited they are to compress JPEGs. But it's the single highest-impact performance improvement most sites can make. Smaller images mean faster pages, happier users, and lower bandwidth costs. Run every image through the pipeline before it hits production.