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: best compression, slower encode, all major browsers support
- WebP: 25–35% smaller than JPEG, fast encode, universal support
- JPEG: still the universal fallback; modern encoders (mozjpeg) better than baseline
- PNG: for images that need transparency or are crisp graphics; otherwise use WebP/AVIF
- SVG: for icons and scalable graphics
The picture element
Serve different formats to different browsers:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="..." />
</picture>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:
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(min-width: 768px) 50vw, 100vw"
alt="..."
/>The browser picks the most appropriate size based on viewport and pixel density. Saves bandwidth on smaller screens.
Lazy loading
Native: loading="lazy" on <img> 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:
<img src="https://cdn.example.com/hero.jpg?w=800&fmt=webp&q=80" />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: quality 75–80; barely visible difference from 100, ~50% smaller
- WebP: quality 75; smaller than JPEG-80 with similar visual
- AVIF: quality 50–60; aggressive compression 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:
<link rel="preload" as="image" href="hero.avif" type="image/avif"> - 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
<img>with absolute positioning instead
SVG sprites
For icon systems, SVG sprites combine many icons into one HTTP request. Use <svg><use href="#icon-name" /></svg> 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 <picture>. AVIF first (best compression), WebP fallback, JPEG fallback for very old clients.
What is fetchpriority?
Hints to the browser to prioritize loading this resource ahead of others. Use “high” for above-the-fold critical images, “low” for off-screen.
Should I avoid third-party CDNs for SEO reasons?
Modern third-party CDNs are SEO-neutral. Image search may prefer same-origin in some cases; in practice, fast loading wins more than origin matters.