ARTICLE
Image Optimization Without Breaking Your Build
A pragmatic image-optimization plan that ships actual LCP wins on real client sites: formats, dimensions, lazy-loading rules, and CDN tradeoffs.
May 23, 20267 min read
Performance & Technical SEOimage optimizationperformanceLCPpage speed
Image optimization is the highest-leverage performance fix
For most client sites, images are 60–80% of the page weight and the dominant Largest Contentful Paint element. Fixing images is usually the single largest performance win available — bigger than JavaScript optimization, bigger than font loading, bigger than render-blocking CSS.
The reason this fix isn't already done on most sites is that the comprehensive solution (the right format, the right size, lazy-loading rules, responsive variants, CDN routing) is non-trivial to implement without breaking something. Half-implemented image optimization causes layout shifts, blank hero areas, and broken downloads of assets that used to work.
This post is the pragmatic plan: what to ship in what order, what each step buys you, and how to ship it without breaking the existing build.
Step 1: Audit before optimizing
The Page Speed Grader reports image-specific issues per page: oversized images, images without dimensions, images delivered in legacy formats. Run it across the top 10 pages.
A typical audit surfaces:
Keep reading
How to Fix Slow Largest Contentful Paint (LCP)
Where slow LCP comes from, how to identify the offending element, and the five fixes that resolve LCP problems on real sites — in priority order.
INP Explained: The Newest Core Web Vital
What INP measures, why it replaced FID, the 200ms threshold every site needs to hit, and the four optimizations that consistently move it.
How to Fix Slow Time to First Byte (TTFB)
Where TTFB latency comes from, how to measure it accurately, and the four fixes that resolve high TTFB on real production sites in priority order.