Image component and optimization in NextJS - Mini Project: Build & Apply

Image Component and Optimization in Next.js

📖 Scenario: You are building a simple Next.js webpage to display a profile picture. You want to use Next.js's built-in Image component to optimize loading and improve performance.

🎯 Goal: Create a Next.js component that shows a profile image using the Image component with proper width, height, and alt text for accessibility. Then add a configuration variable to control the image size, apply it, and finally add a layout property for responsive behavior.

📋 What You'll Learn

Use Next.js Image component from next/image

Set image src to /profile.jpg

Add alt text as Profile picture

Use a configuration variable imageSize to set width and height

Add layout="responsive" property to the Image component

💡 Why This Matters

🌍 Real World

Optimizing images is important for fast-loading websites and better user experience, especially on mobile devices.

💼 Career

Many web developer roles require knowledge of Next.js image optimization to build performant React applications.

1

Setup basic Next.js Image component

Import the Image component from next/image and create a functional component called ProfileImage that returns an Image with src="/profile.jpg", width={200}, height={200}, and alt="Profile picture".

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  // Your code here
}

Hint

Remember to import Image from next/image and use it inside your component with the exact props.

2

Add image size configuration variable

Inside the ProfileImage component, create a constant called imageSize and set it to 150. Then update the width and height props of the Image component to use imageSize.

NextJS

import Image from 'next/image'

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

Hint

Create a constant imageSize and use it for both width and height props.

3

Add responsive layout to Image component

Add the layout="responsive" property to the Image component inside ProfileImage to make the image scale responsively.

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  const imageSize = 150
  // Your code here
  return 
}

Hint

Add layout="responsive" inside the Image component tag.

4

Complete the ProfileImage component with optimization

Ensure the ProfileImage component uses the Image component with src="/profile.jpg", alt="Profile picture", width and height set to imageSize, and layout="responsive". This completes the optimized image setup.

NextJS

import Image from 'next/image'

export default function ProfileImage() {
  const imageSize = 150
  // Finalize the component here
  return 
}

Hint

Check that all required props and the configuration variable are correctly used in the Image component.

Practice

1. What is the main benefit of using the Next.js Image component instead of a regular <img> tag?

easy

A. It disables image loading to save bandwidth.

B. It allows you to write images in plain text format.

C. It automatically optimizes images for faster loading and better display.

D. It converts images to video format for animation.

Solution

1. Step 1: Understand the purpose of Next.js Image component

   The Next.js Image component is designed to improve image loading speed and quality automatically.

2. Step 2: Compare with regular <img> tag

   Regular <img> tags do not optimize images or handle responsive loading by default.

3. Final Answer:

   It automatically optimizes images for faster loading and better display. -> Option C

4. Quick Check:

   Image optimization [OK]

Hint: Next.js Image optimizes images automatically [OK]

Common Mistakes:

• Thinking it disables image loading
• Believing it converts images to video
• Confusing it with text formatting

2. Which of the following is the correct way to import and use the Next.js Image component in a React component?

easy

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

B. import { Image } from 'react';<Image src='/pic.jpg' alt='Pic' />

C. import Img from 'next/image';<Img src='/pic.jpg' alt='Pic' width='300' height='200' />

D. import Image from 'next/image';<Image source='/pic.jpg' alt='Pic' width={300} height={200} />

Solution

1. Step 1: Check import statement

   The Next.js Image component is imported as default from 'next/image' using import Image from 'next/image';.

2. Step 2: Verify usage syntax

   The component requires src, alt, width, and height props with correct casing and types.

3. Final Answer:

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

4. Quick Check:

   Correct import and props [OK]

Hint: Use default import from 'next/image' with width and height [OK]

Common Mistakes:

• Using curly braces in import for Image
• Using 'source' instead of 'src' prop
• Passing width and height as strings instead of numbers

3. What will happen if you use the Next.js Image component without specifying width and height props?

medium

A. The image will load normally without any warnings.

B. Next.js will throw a build-time error requiring width and height.

C. The image will be automatically sized to full screen.

D. The image will display but Next.js will warn about missing dimensions.

Solution

1. Step 1: Understand required props for Image

   Next.js Image component requires width and height for proper optimization and layout stability.

2. Step 2: Behavior without width and height

   If width and height are missing, the image still renders but Next.js shows a warning in the console about missing dimensions.

3. Final Answer:

   The image will display but Next.js will warn about missing dimensions. -> Option D

4. Quick Check:

   Missing width/height causes warning, not error [OK]

Hint: Always provide width and height to avoid warnings [OK]

Common Mistakes:

• Assuming build-time error instead of warning
• Thinking image won't display at all
• Believing image auto-sizes to full screen

4. You wrote this code but the image does not appear and you see an error in the console:

import Image from 'next/image';

export default function Photo() {
  return <Image src='photo.png' alt='Photo' width={400} height={300} />;
}

What is the most likely cause?

medium

A. The src path is relative but missing a leading slash.

B. You forgot to import React in the file.

C. The alt attribute is missing.

D. Width and height must be strings, not numbers.

Solution

1. Step 1: Check the src path format

   Next.js expects the src path to be absolute or start with a slash for public folder images.

2. Step 2: Identify the error cause

   Using 'photo.png' without a leading slash means Next.js cannot find the image, causing it not to appear.

3. Final Answer:

   The src path is relative but missing a leading slash. -> Option A

4. Quick Check:

   Image src path must start with '/' [OK]

Hint: Use leading slash for public folder images in src [OK]

Common Mistakes:

• Thinking React import is required in Next.js 13+
• Assuming alt attribute is mandatory to display image
• Passing width/height as strings instead of numbers

5. You want to show a large hero image that loads quickly on page load and uses a blurred placeholder while loading. Which Next.js Image props should you use together to achieve this?

hard

A. lazy and blurDataURL

B. priority and placeholder='blur'

C. loading='eager' and placeholder='empty'

D. priority and loading='lazy'

Solution

1. Step 1: Identify props for fast loading

   The priority prop tells Next.js to load the image eagerly for faster display on page load.

2. Step 2: Identify props for blurred placeholder

   The placeholder='blur' prop shows a blurred version of the image while the full image loads.

3. Final Answer:

   priority and placeholder='blur' -> Option B

4. Quick Check:

   Fast load + blur placeholder [OK]

Hint: Use priority and placeholder='blur' for hero images [OK]

Common Mistakes:

• Using lazy loading for hero images slows load
• Confusing blurDataURL with placeholder prop
• Setting placeholder='empty' disables blur effect