Responsive images in NextJS - Performance & Optimization

Performance: Responsive images

HIGH IMPACT

Responsive images affect page load speed by delivering appropriately sized images for different screen sizes, reducing data usage and improving Largest Contentful Paint (LCP).

Serving images that fit the user's screen size

NextJS

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/photo.jpg"
      alt="Photo"
      sizes="(max-width: 600px) 480px, 800px"
      width={800}
      height={533}
      priority
    />
  );
}

Uses the sizes attribute to load smaller images on small screens, reducing data and speeding up LCP.

📈 Performance GainReduces image size by up to 60% on mobile, improving LCP and saving bandwidth.

Serving images that fit the user's screen size

NextJS

import Image from 'next/image';

export default function Page() {
  return <Image src="/photo.jpg" width={1200} height={800} alt="Photo" />;
}

Always loading a large 1200px wide image even on small screens wastes bandwidth and delays rendering.

📉 Performance CostBlocks rendering longer on mobile devices; increases LCP by loading unnecessarily large images.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Fixed large image	1 image node	1 reflow	High paint cost due to large decode	[X] Bad
Responsive image with sizes	1 image node	1 reflow	Lower paint cost with smaller decode	[OK] Good

Rendering Pipeline

Responsive images reduce the amount of data the browser downloads and decodes, speeding up Style Calculation, Layout, and Paint stages.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Paint stages due to large image decoding and rendering

Core Web Vital Affected

LCP

Responsive images affect page load speed by delivering appropriately sized images for different screen sizes, reducing data usage and improving Largest Contentful Paint (LCP).

Optimization Tips

1Always provide multiple image sizes using srcset or Next.js Image component.

2Use the sizes attribute to guide the browser on which image size to load.

3Avoid loading large images on small screens to improve load speed and reduce data.

Performance Quiz - 3 Questions

What is the main performance benefit of using responsive images?

A Using only one image size for simplicity

B Always loading the largest image to ensure quality

C Loading smaller images on smaller screens to reduce data and speed up loading

D Loading images after all text content

DevTools: Network

How to check: Open DevTools > Network tab, filter by Images, reload page, and check image file sizes and dimensions loaded for different screen widths.

What to look for: Look for smaller image files loading on smaller screen widths indicating responsive images are working.