Image optimization for web — formats, sizing, and lazy loading

Website loads slowly due to unoptimized images. Large file sizes, wrong formats, missing lazy loading.

Checklist: (1) Format: WebP (30% smaller than JPEG) or AVIF (50% smaller). Use picture element with fallback. (2) Sizing: never serve larger than displayed. Use srcset for responsive. (3) Lazy loading: loading='lazy' on below-fold images. Don't lazy-load hero/LCP image. (4) Always set width/height. (5) Use image CDN for on-the-fly optimization. (6) Next.js: use next/image.

Images are 50%+ of page weight. Serving a 4000px image to a 400px container wastes 90%+ bandwidth. Modern formats provide same quality at much smaller sizes.