Responsive images in NextJS - Mini Project: Build & Apply

Responsive images with Next.js

📖 Scenario: You are building a simple Next.js app that shows a product image. You want the image to load quickly and look good on all screen sizes by using responsive images.

🎯 Goal: Create a Next.js component that displays a responsive product image using the built-in next/image component with different sizes for mobile, tablet, and desktop screens.

📋 What You'll Learn

Use the next/image component to display the image

Set the src to '/images/product.jpg'

Add an alt text 'Product Image' for accessibility

Use the sizes attribute to specify image widths for different screen sizes

Set the width and height props to 800 and 600 respectively

💡 Why This Matters

🌍 Real World

Responsive images improve website speed and user experience on phones, tablets, and desktops by loading the right image size.

💼 Career

Knowing how to use Next.js Image component for responsive images is essential for frontend developers working on modern React and Next.js projects.

1

Setup the Next.js Image import and basic component

Import the Image component from next/image and create a functional component called ProductImage that returns an empty fragment <></>.

NextJS

import Image from 'next/image'

export default function ProductImage() {
  return 
  // Your code here
}

Need a hint?

Use import Image from 'next/image' at the top. Then create a function ProductImage that returns an empty React fragment.

2

Add the Image component with src, alt, width, and height

Inside the ProductImage component, add the <Image> component with src='/images/product.jpg', alt='Product Image', width={800}, and height={600}.

NextJS

import Image from 'next/image'

export default function ProductImage() {
  return (
    // Add Image component here with src, alt, width, and height
  )
}

Need a hint?

Use the Image component with the exact props: src='/images/product.jpg', alt='Product Image', width={800}, and height={600}.

3

Add the sizes attribute for responsive image widths

Add the sizes attribute to the <Image> component with the value '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw' to specify image widths for mobile, tablet, and desktop screens.

NextJS

import Image from 'next/image'

export default function ProductImage() {
  return (
    
  )
}

Need a hint?

The sizes attribute helps the browser pick the right image size for different screen widths. Use the exact string given.

4

Wrap the Image in a responsive container with semantic HTML

Wrap the <Image> component inside a <section> element with an aria-label of 'Product image section' to improve accessibility and semantic structure.

NextJS

import Image from 'next/image'

export default function ProductImage() {
  return (
    // Wrap Image in a section with aria-label
  )
}

Need a hint?

Use a <section> tag with aria-label='Product image section' wrapping the <Image> component.