What Are Key Image Optimization Techniques for the Web?
Learn key web image optimization techniques — formats, responsive srcset, lazy loading, and layout-shift prevention.
Expected Interview Answer
Web image optimization combines choosing efficient formats (WebP/AVIF), serving correctly sized responsive images via srcset, lazy-loading offscreen images, and compressing without visible quality loss — together these cut bytes transferred and improve Largest Contentful Paint without sacrificing visual fidelity.
Modern formats like AVIF and WebP compress far better than JPEG or PNG at equivalent visual quality, so serving them (with a fallback via the <picture> element) is often the single biggest win. Responsive images using srcset and sizes let the browser pick the smallest image that satisfies the actual rendered dimensions and device pixel ratio, instead of shipping one oversized image to every device. Lazy loading (loading="lazy" or an IntersectionObserver) defers offscreen images until they approach the viewport, cutting initial page weight, while the above-the-fold hero image should instead be eagerly loaded or even preloaded since it usually drives Largest Contentful Paint. Compression tools and CDNs can further strip unnecessary metadata and apply quality-tuned encoding, and specifying width/height (or aspect-ratio) attributes prevents layout shift while the image loads. None of these techniques matter in isolation — the real gains come from combining format, sizing, loading strategy, and compression together.
- Modern formats (AVIF/WebP) cut file size significantly at equal visual quality
- Responsive srcset/sizes avoids shipping oversized images to small viewports
- Lazy loading offscreen images reduces initial page weight and bandwidth use
- Explicit width/height prevents layout shift, improving Cumulative Layout Shift
AI Mentor Explanation
Image optimization is like a broadcaster choosing the right video feed resolution for each viewer’s connection instead of blasting the same 4K feed to everyone. A viewer on a phone gets a compact, efficiently encoded stream sized for their screen, while a stadium big-screen gets the full-resolution feed. Replays that are not currently visible are not buffered until a viewer actually scrolls to them. That match-the-format-and-size-to-the-viewer discipline is exactly what responsive images and modern formats do on the web.
Step-by-Step Explanation
Step 1
Choose an efficient format
Encode images as AVIF or WebP with a <picture> fallback, replacing legacy JPEG/PNG where supported.
Step 2
Serve responsive sizes
Provide srcset and sizes so the browser fetches the smallest image satisfying the actual rendered dimensions.
Step 3
Defer offscreen images
Apply loading="lazy" (or IntersectionObserver) to below-the-fold images, but eagerly load the LCP hero image.
Step 4
Reserve layout space
Set explicit width/height or aspect-ratio so the browser reserves space and avoids layout shift while the image loads.
What Interviewer Expects
- Knowledge of modern formats (WebP/AVIF) and their compression advantage over JPEG/PNG
- Understanding of responsive images via srcset/sizes, not just format choice
- Awareness that lazy loading should NOT apply to the LCP hero image
- Mention of width/height or aspect-ratio to prevent Cumulative Layout Shift
Common Mistakes
- Lazy-loading the above-the-fold hero image, which delays Largest Contentful Paint
- Shipping one oversized image to all devices instead of using srcset
- Forgetting width/height attributes, causing layout shift as images load
- Assuming format change alone is enough, ignoring sizing and loading strategy
Best Answer (HR Friendly)
“Image optimization means making images load faster without looking worse — using modern compressed formats, serving the right size image for each screen instead of one huge file for everyone, and only loading images once they’re about to come into view, except for the main image at the top which loads right away.”
Code Example
<picture>
<source type="image/avif" srcset="/img/hero-480.avif 480w, /img/hero-960.avif 960w" sizes="(max-width: 600px) 100vw, 960px">
<source type="image/webp" srcset="/img/hero-480.webp 480w, /img/hero-960.webp 960w" sizes="(max-width: 600px) 100vw, 960px">
<img
src="/img/hero-960.jpg"
width="960" height="540"
alt="Product hero shot"
loading="eager"
fetchpriority="high"
>
</picture>
<!-- Below-the-fold gallery image: lazy-loaded -->
<img src="/img/gallery-1.webp" width="400" height="300" alt="Gallery item" loading="lazy">Follow-up Questions
- Why should the LCP hero image never be lazy-loaded?
- How do you decide which srcset breakpoints to generate?
- How does a CDN image service automate format negotiation via the Accept header?
- What is Cumulative Layout Shift and how do image dimensions affect it?
MCQ Practice
1. Why do AVIF and WebP typically outperform JPEG for web images?
Modern codecs use more efficient compression, producing smaller files at similar perceived quality.
2. What is the risk of lazy-loading the main hero image above the fold?
Lazy loading defers the fetch, which can push back LCP if applied to the primary above-the-fold image.
3. What do width and height attributes on an <img> primarily prevent?
Explicit dimensions let the browser reserve layout space before the image loads, avoiding content jumping.
Flash Cards
Two modern efficient image formats? — WebP and AVIF, typically smaller than JPEG/PNG at similar quality.
What does srcset/sizes enable? — Serving the smallest image that satisfies the actual rendered size and pixel density.
Should the LCP hero image be lazy-loaded? — No — it should load eagerly (or be preloaded) since it drives LCP.
What prevents layout shift from images? — Explicit width/height or aspect-ratio reserving space before load.