# Image Optimization for the Web: Formats, Lazy Loading, Responsive Source: https://www.techinterview.org/post/3233475083/image-optimization-web-formats-responsive/ Updated: 2026-07-12 · techinterview.org Images are typically 50–80% of page weight. Optimizing them is the single highest-leverage performance work for most sites. Frontend interviews probe whether you understand modern image formats, responsive image syntax, lazy loading, and CDN-based image transformation. ## Modern image formats The state of the art in 2026: - AVIF has the best compression and slower encode, with support in all major browsers. - WebP is 25–35% smaller than JPEG, encodes fast, and has universal support. - JPEG is still the universal fallback; modern encoders (mozjpeg) beat baseline. - PNG suits images that need transparency or are crisp graphics; otherwise use WebP/AVIF. - SVG suits icons and scalable graphics. ## The picture element Serve different formats to different browsers: ```

``` Browser picks the first format it understands. Falls back to JPEG if neither AVIF nor WebP is supported. ## Responsive images with srcset Serve different sizes to different viewports: ```

``` The browser picks the most appropriate size based on viewport and pixel density. Saves bandwidth on smaller screens. ## Lazy loading Native: `loading="lazy"` on `` defers loading until near viewport. All evergreen browsers support this. No JS needed. Critical: do not lazy-load above-the-fold images. They will load slower than they should. ## Decoding hint `decoding="async"` tells the browser to decode the image off the main thread. Useful for non-critical images. Combine with `loading="lazy"`. ## Aspect ratio reservation Always provide intrinsic `width` and `height` attributes. The browser reserves space, eliminating layout shift when the image loads. Modern alternative: `aspect-ratio` CSS property. Both work; native attributes are simpler. ## CDN-based image transformation Services like Cloudinary, imgix, Cloudflare Images take a single source image and serve format/size/crop variants on demand: ```

``` Benefits: - One uploaded source image; many derivatives generated on demand - Automatic format selection based on Accept header - Smart cropping based on focal points Tradeoff: vendor lock-in. Self-hosted alternatives (imgproxy, Thumbor) require ops work. ## Quality settings Sweet spots: - JPEG at quality 75–80 is barely distinguishable from 100 and ~50% smaller. - WebP at quality 75 is smaller than JPEG-80 with similar visual quality. - AVIF at quality 50–60 compresses aggressively with high visual quality. Tools like Squoosh let you compare visually. Find the cutoff where quality starts to suffer for your imagery. ## Critical-path images The Largest Contentful Paint (LCP) image deserves special treatment: - Preload it: `` - Set `fetchpriority="high"` - Don't lazy-load it - Serve from a CDN edge close to the user ## Background images CSS `background-image` bypasses srcset. Workarounds: - Use `image-set()` in modern CSS for DPR-based switching - Use media queries for viewport-based switching - Or just use an `` with absolute positioning instead ## SVG sprites For icon systems, SVG sprites combine many icons into one HTTP request. Use `` to reference icons. Modern alternative: each icon as a React/Vue component. Tree-shakable; only icons you use ship. ## Performance budget For a typical content site: - Hero image: <100KB - Article images: <50KB each - Total above-the-fold: <500KB - Total page including images: <2MB ## Common mistakes - Serving 4000px JPEGs to 400px viewports - Lazy-loading the hero image (kills LCP) - Forgetting width/height attributes (CLS) - Quality 100 on JPEGs (50% wasted bytes) - Single format support (no AVIF/WebP fallback) ## Frequently Asked Questions ### Should I use AVIF, WebP, or JPEG in 2026? Serve all three via `