The Ultimate Guide to Image Optimization for Web
July 13, 2026
Here's a number that surprised me: images make up more than half the weight of the average web page. I've seen a single hero image bigger than the entire HTML, CSS, and JavaScript of the site around it. If you want your site to load fast — and Google definitely wants that — optimizing images is the easiest win you'll ever get.
This guide covers everything I've learned about image optimization: picking the right format, compression tricks that actually work, responsive images, and how all of this ties into Core Web Vitals. Whether you're a developer, a designer, or just someone running a blog, these strategies will make your images load faster. For the full format showdown, check out our HEIC vs JPEG vs WebP vs AVIF guide.
Frequently Asked Questions
WebP is currently the best, offering 30% smaller files than JPEG with equivalent quality and 98% browser support. AVIF provides 50% smaller files than JPEG with 92% browser support. Use the picture element to serve modern formats with JPEG/PNG fallback.
Image optimization directly impacts LCP (Largest Contentful Paint). Unoptimized images are the most common cause of poor LCP scores. Proper optimization with appropriate dimensions, modern formats, and lazy loading can reduce LCP by 30-50%.
There is no single ideal size — it depends on the display context. A hero image might need 1920-2560px wide for large screens. Thumbnails need only 150-300px. Serve appropriately sized images using srcset and sizes attributes. Aim for images under 100-200 KB for most content images, under 500 KB for hero images.
Use JPEG for photographs and complex images with many colors. Use PNG for graphics with sharp edges, text, logos, icons, and images needing transparency. For best performance, consider converting both to WebP or AVIF with appropriate fallbacks.
Lazy loading delays loading off-screen images until the user scrolls near them. It improves initial page load time and reduces bandwidth usage. Native lazy loading with loading="lazy" is supported in all modern browsers.