The Course is launching in Early Access! 🎉
The Modern Full Stack Next.js Course is launching in Early Access only to the folks on the waitlist by the first week of August.
Feedback
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!
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:
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.
Let's look at it in the video lesson.
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.
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.
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.
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.
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 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/
<Image
src="/images/photo.jpg"
alt="Local image example"
width={400}
height={300}
className="object-cover group-hover:scale-110 transition-all duration-700"
/>
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"
/>
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