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.

Practice

1. What is the main benefit of using responsive images in a Next.js app?

easy

A. They load the right image size for different screen widths, improving speed.

B. They automatically add captions to images.

C. They convert images to black and white on small screens.

D. They disable images on mobile devices to save data.

Solution

1. Step 1: Understand responsive images purpose

   Responsive images adjust to screen size to load faster and look better.

2. Step 2: Identify Next.js Image component benefit

   Next.js Image component helps load the right image size automatically.

3. Final Answer:

   They load the right image size for different screen widths, improving speed. -> Option A

4. Quick Check:

   Responsive images = load right size fast [OK]

Hint: Responsive images adapt size to screen for speed [OK]

Common Mistakes:

• Thinking responsive images add captions automatically
• Believing images turn black and white on small screens
• Assuming images are disabled on mobile devices

2. Which is the correct way to import and use the Next.js Image component for responsive images?

easy

A. import Image from 'next/image';

B. import { Image } from 'react';

C. import Img from 'next/image';

D. import Image from 'next/image';

Solution

1. Step 1: Check import syntax

   Next.js Image is imported as default from 'next/image'. So, import Image from 'next/image' is correct.

2. Step 2: Check usage with required props

   Image requires src, width, height, and alt for accessibility and layout.

3. Final Answer:

   import Image from 'next/image'; <Image src='/pic.jpg' width={500} height={300} alt='pic' /> -> Option A

4. Quick Check:

   Correct import + width/height + alt = import Image from 'next/image'; [OK]

Hint: Next.js Image needs import, src, width, height, alt [OK]

Common Mistakes:

• Importing Image from 'react' instead of 'next/image'
• Omitting width and height props
• Using wrong component name like Img

3. What will be the behavior of this Next.js Image component?

import Image from 'next/image';
export default function Photo() {
  return (
    <Image
      src='/photo.jpg'
      alt='A photo'
      sizes='(max-width: 600px) 100vw, 50vw'
      width={800}
      height={600}
    />
  );
}

medium

A. Loads image only on screens wider than 600px.

B. Always loads image at 800x600 pixels regardless of screen size.

C. Throws an error because sizes prop is invalid.

D. Loads 100% viewport width image on screens 600px or smaller, else 50% viewport width.

Solution

1. Step 1: Understand sizes prop usage

   The sizes prop defines image display width based on screen width media queries.

2. Step 2: Interpret sizes value

   For screens max 600px wide, image uses 100vw (full viewport width). Otherwise, 50vw (half viewport width).

3. Final Answer:

   Loads 100% viewport width image on screens 600px or smaller, else 50% viewport width. -> Option D

4. Quick Check:

   Sizes prop controls image width by screen size [OK]

Hint: Sizes prop sets image width per screen size [OK]

Common Mistakes:

• Thinking sizes sets image pixel dimensions directly
• Assuming sizes prop causes error
• Believing image loads only on wide screens

4. Identify the error in this Next.js Image usage:

import Image from 'next/image';
export default function Banner() {
  return (
    <Image
      src='/banner.png'
      alt='Banner'
      width='100%'
      height='300'
    />
  );
}

medium

A. alt text is missing.

B. src path must be an external URL.

C. width should be a number, not a string with '%'.

D. height cannot be set with a number.

Solution

1. Step 1: Check width prop type

   Next.js Image expects width as a number (pixels), not a string with '%'.

2. Step 2: Verify other props

   alt is present, src can be local path, height as number is valid.

3. Final Answer:

   width should be a number, not a string with '%'. -> Option C

4. Quick Check:

   Width must be numeric pixels [OK]

Hint: Width and height props must be numbers, not strings [OK]

Common Mistakes:

• Using percentage strings for width or height
• Thinking alt text is optional
• Believing src must be external URL

5. You want to optimize images for a blog with different screen sizes. Which approach correctly uses Next.js Image to load responsive images with accessibility and performance in mind?

hard

A.

B.

C.

D.

Solution

1. Step 1: Check alt text for accessibility

   includes meaningful alt text 'Blog post', improving accessibility.

2. Step 2: Verify sizes and priority usage

   Sizes prop correctly sets image width for small and larger screens. Priority loads important images faster.

3. Step 3: Identify issues in other options

   A lacks alt text and reverses sizes logic, B has empty alt (bad for accessibility), D uses invalid string props for width/height.

4. Final Answer:

   <Image src='/post.jpg' alt='Blog post' width={1200} height={800} sizes='(max-width: 768px) 100vw, 50vw' priority /> -> Option B

5. Quick Check:

   Alt + sizes + priority = best practice [OK]

Hint: Use alt text, sizes, and priority for best responsive images [OK]

Common Mistakes:

• Leaving alt text empty
• Using invalid width/height values
• Incorrect sizes media query order