Image Optimization for the Web: Formats, Lazy Loading, Responsive

Updated July 12, 2026 · 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:

<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 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: <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.