What is image optimization for web performance?
Answer
Image optimization is often the highest-impact performance improvement. Key techniques: Modern formats: use WebP (30% smaller than JPEG/PNG) or AVIF (50% smaller than JPEG) instead of JPEG/PNG. Use <picture> for format fallback: <source type="image/avif" srcset="img.avif"><source type="image/webp" srcset="img.webp"><img src="img.jpg">. Responsive images: use srcset and sizes to serve appropriately-sized images per device: srcset="img-400.jpg 400w, img-800.jpg 800w". Compression: use tools like Squoosh, imagemin, Sharp for lossy/lossless compression. Lazy loading: <img loading="lazy"> — defer loading off-screen images. Do NOT lazy-load the LCP image. Dimensions: always specify width and height to prevent CLS. CDN: serve images from a CDN close to users. Decoding: decoding="async" for off-screen images. Images typically account for 50–75% of page weight — optimizing them often provides the greatest performance gain.