Next.js Image Optimization — Series #3

Next.js Image Optimization — Series #3

Nextjs #3 — Image Optimization

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

A quick read about this blog

What will you learn?

  1. How to use the image component in Next.js (Local, Remote images)
  2. Image Sizing
  3. Image Styling

1. How to use the image component in Next.js (Local, Remote images)

The Next.js Image component, next/image, is an extension of the HTML <img> element.

Some of the optimizations built into the Image component

To add the image component in the application import the next/image like below

import Image from 'next/image'

Now we can define the image src either from local or from remote like below

Local Images

To use a local image, import your .jpg, .png, or .webp files like below

import profilePic from '../public/me.png'
Warning

The import must be static so it can be analyzed at build time.Next.js will automatically determine the width and height of your image based on the imported file.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
return (
<>
<h1>Profile Picture</h1>
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
<p>Profile Picture Page</p>
</>
)
}

Remote Images

To use a remote image, the src property should be a URL string, which can be relative or absolute. Next.js does not have access to remote files during the build process, you’ll need to provide the width, height and optional blurDataURL props manually

import Image from 'next/image'

export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
Setting Priority for Images

2. Image Sizing

One of the ways that images most commonly hurt performance is through layout shift, where the image pushes other elements around on the page as it loads in. This performance problem is so annoying to users that it has its own Core Web Vital, called Cumulative Layout Shift. The way to avoid image-based layout shifts is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.

next/image is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and must be sized in one of three ways:

If none of the suggested methods works for sizing your images, the next/image component is designed to work well on a page alongside standard <img> elements.

3. Image Styling

Styling the Image component is not that different from styling a normal <img> element, but there are a few guidelines to keep in mind.

  • Pick the correct layout mode
  • Target the image with className, not based on DOM structure
  • When using layout=’fill’, the parent element must have position: relative
  • When using layout=’responsive’, the parent element must have display: block
Image Optimization cloud providers

Congratulations!

Level Up Coding

Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective


Next.js Image Optimization — Series #3 was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Nidhin kumar

Next.js Image Optimization — Series #3

Nextjs #3 — Image Optimization

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

A quick read about this blog

What will you learn?

  1. How to use the image component in Next.js (Local, Remote images)
  2. Image Sizing
  3. Image Styling

1. How to use the image component in Next.js (Local, Remote images)

The Next.js Image component, next/image, is an extension of the HTML <img> element.

Some of the optimizations built into the Image component

To add the image component in the application import the next/image like below

import Image from 'next/image'

Now we can define the image src either from local or from remote like below

Local Images

To use a local image, import your .jpg, .png, or .webp files like below

import profilePic from '../public/me.png'
Warning

The import must be static so it can be analyzed at build time.Next.js will automatically determine the width and height of your image based on the imported file.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
return (
<>
<h1>Profile Picture</h1>
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
<p>Profile Picture Page</p>
</>
)
}

Remote Images

To use a remote image, the src property should be a URL string, which can be relative or absolute. Next.js does not have access to remote files during the build process, you'll need to provide the width, height and optional blurDataURL props manually

import Image from 'next/image'

export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}
Setting Priority for Images

2. Image Sizing

One of the ways that images most commonly hurt performance is through layout shift, where the image pushes other elements around on the page as it loads in. This performance problem is so annoying to users that it has its own Core Web Vital, called Cumulative Layout Shift. The way to avoid image-based layout shifts is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.

next/image is designed to guarantee good performance results, it cannot be used in a way that will contribute to layout shift, and must be sized in one of three ways:

If none of the suggested methods works for sizing your images, the next/image component is designed to work well on a page alongside standard <img> elements.

3. Image Styling

Styling the Image component is not that different from styling a normal <img> element, but there are a few guidelines to keep in mind.

  • Pick the correct layout mode
  • Target the image with className, not based on DOM structure
  • When using layout=’fill’, the parent element must have position: relative
  • When using layout=’responsive’, the parent element must have display: block
Image Optimization cloud providers

Congratulations!

Level Up Coding

Thanks for being a part of our community! More content in the Level Up Coding publication.
Follow: Twitter, LinkedIn, Newsletter
Level Up is transforming tech recruiting ➡️ Join our talent collective


Next.js Image Optimization — Series #3 was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Nidhin kumar


Print Share Comment Cite Upload Translate Updates
APA

Nidhin kumar | Sciencx (2022-06-26T12:33:46+00:00) Next.js Image Optimization — Series #3. Retrieved from https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/

MLA
" » Next.js Image Optimization — Series #3." Nidhin kumar | Sciencx - Sunday June 26, 2022, https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/
HARVARD
Nidhin kumar | Sciencx Sunday June 26, 2022 » Next.js Image Optimization — Series #3., viewed ,<https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/>
VANCOUVER
Nidhin kumar | Sciencx - » Next.js Image Optimization — Series #3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/
CHICAGO
" » Next.js Image Optimization — Series #3." Nidhin kumar | Sciencx - Accessed . https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/
IEEE
" » Next.js Image Optimization — Series #3." Nidhin kumar | Sciencx [Online]. Available: https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/. [Accessed: ]
rf:citation
» Next.js Image Optimization — Series #3 | Nidhin kumar | Sciencx | https://www.scien.cx/2022/06/26/next-js-image-optimization-series-3/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.