First of all, it's important to you read the . Next.js Doc about this topic.
Image Component
The first thing that who already have worked with next.js before thinks when the topic is image is "The Image Component".
With Next.js, images are only loaded when they enter the viewport, with optional blur-up placeholders. For that, the tool use the cache of your browser to avoid unnecessary requirements.
It's very simple to use and provides you a better user experience, the usage is similar the tag in HTML.
Some of the optimizations built into the Image component include:
- Improved Performance: Always serve correctly sized image for each device, using modern image formats
- Visual Stability: Prevent Cumulative Layout Shift automatically
- Faster Page Loads: Images are only loaded when they enter the viewport, with optional blur-up placeholders
- Asset Flexibility: On-demand image resizing, even for images stored on remote servers
In addition, this component force you to use width and height as props, but if you don't know the exacts number to put on those props or if you want a more responsive way, you can use layout property as "fill" value.
Instead of
<Image src="www.yourimg.com/img" height={300} width={500} />, you can use<Image src="www.yourimg.com/img" layout="fill" />
And now your Image component will get the parents size an fill it. So what you need to do is wrap your component into a div and manipulate this div to control your image width and height.
Use webp instead jpeg/png files
For your browser can load faster at the first time:
How to use Remote images
If you are using local images, from your public folder, next works very fine, without previous configs.
But if you are trying to use a link in your src at <Image />, you can find this problem:
The reason why you need to allow your img url provider is because next have a little work to get all those images, compress and delivery again to you, so if you allow every single domain will open a door for malicious scripts to upload massive images on your application.
For that, you have to provides a "whitelist" to your frontend can consumes :
In your next.config.js file add the domains that you want allow :
Avoid img Flickering
If you have a image that is the number one of your website, and you want to avoid it to flick when the user reload the page, next give to us a "PRIORITY" atribute, that you can use in your image component .
Click here to see how to use it
Final issues
Some videos and links that can help :
You're Doing Image Rendering WRONG in Next.js!
and
Hope this post can be helpful!
For some feedback or more content, follow me on twitter or github
Top comments (0)