The Magical Land of Next.js Images 🦄
Next.js Image Component is magical 🦄 in a lot of ways. There are so many properties to it and if you don't know them or use incorrectly, the magic is gone and we are left with a regular Browser <img/> tag.
This is why, we are going to look at the different use cases for the Image component and how to optimize your images for different use cases. This lesson is quite dense but going through it will help you choose the right properties for your images.
Let's dive in!
What is a Image Component?
For starters, the Image component extends the <img/> tag and adds more performance optimizations. This way we still follow browser semantics and can use the <img/> tag properties.
To summarize, here are the main features of the Image component:
Image Component Features
- Extends img tag and adds more performance optimizations
- Prevents Layout Shift automatically when images are loading
- Sizes prop allows you to specify the size of the image based on screen size using modern formats like webp and avif
- We get faster page loads as images are only loaded when they enter the viewport
- We have asset flexibility as next.js resizes images on demand even if they are stored on a CDN
I'm going to say something very out of the ordinary but hear me out.
To understand the Image component better, you need to understand what Aspect Ratio is. Yes, Aspect Ratio is the most important thing to understand when working with images.
What is a Aspect Ratio?
- Aspect Ratio is the width and height of an image.
- For example, an image with a width of 100 and a height of 200 has an aspect ratio of 100 / 200 = 0.5
- Another example, an image with a width of 100 and a height of 100 has an aspect ratio of 100 / 100 = 1
- Another example, an image with a width of 200 and a height of 100 has an aspect ratio of 200 / 100 = 2
- When the aspect ratio is 16/9, it means the width is 16 and the height is 9 which is typically used for landscape images like videos. 16/9 refers to the size of a laptop screen.
Let's look at it in the video lesson.
Working with Local Images with Known Dimensions
Local images are images that are stored in your project's public directory. We know what the width and height of the image is. Let's take a look at how we can use the Image component to optimize it along with the aspect ratio.
Let's correct the aspect ratio of the image.
<Image
src="/images/photo.jpg"
alt="Local image example"
width={400}
height={300}
className="object-cover group-hover:scale-110 transition-all duration-700"
/>
When should I use this method?
Use this approach when you have images stored in your project's public directory and you know their dimensions. This is ideal for static assets that are part of your project, such as logos or icons.
Working with Local Static Import Images with Known Dimensions
Static imports are images that are imported as a variable in your code. They are statically imported and known at build time. Although, we want Next.js Image component to handle the optimization for us.
import photoSrc from '@/public/images/photo.jpg';
<Image
src={photoSrc}
alt="Local image example"
width={400}
height={300}
className="object-cover group-hover:scale-110 transition-all duration-700"
/>
When should I use this method?
Use static imports when you want to leverage build-time optimization for your local images. This method is best for images that are part of your source code and won't change between builds. It's particularly useful for critical images that benefit from automatic optimization and lazy loading.
Blur Data URL
We love that shiny blur-up effect that show up typically when images are loading. Let's look at how we can use the Image component to add that effect to our images.
What if I told you that Next.js Image component can generate a blur-up effect for you as the import is static?
You can just use the Image component with the placeholder=blur property as Next.js will automatically generate a blur-up effect for you as the import is static.
We cover a lot more about remote images in the upcoming lessons. But the above will give you a good idea of how to use the Image component to optimize your images.
When to use BlurDataURL
When you have a static image, you don't need to use BlurDataURL. You can just use the Image component with the placeholder=blur property as Next.js will automatically generate a blur-up effect for you as the import is static.
When you have a remote image, you should use BlurDataURL. This is because the image is not static and Next.js cannot generate a blur-up effect at runtime.
You can use the following tool to generate a blur-up effect for your image: https://png-pixel.com/
ChatGPT Prompt
Here is a quick chatgpt prompt I've used to help you determine the aspect ratio of an image:
I need help calculating the aspect ratio for an image. Here's what I'd like you to do:
1. Calculate the exact aspect ratio from my width and height values
2. Simplify it to the closest standard ratio (e.g., 16:9, 4:3, 1:1, etc.)
3. Tell me what this aspect ratio is commonly used for (e.g., landscape photos, mobile screens, etc.)
4. Suggest the best CSS classes or container styles for this ratio in Next.js