Image optimization techniques with next.js
Tags: webdev, nextjs, frontend
Published: 2023-03-17 20:20:23

First of all, it's important to you read the . [Next.js Doc about this topic.](https://nextjs.org/docs/basic-features/image-optimization)


## 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 <img /> 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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d43jz5u1duz78mjwpeb3.png)

---

## 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: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh75xsrhjy782061nd9n.png)

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 :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf6tv7lfrgtsvse5t4mg.png)


## Avoid img Flickering


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bw4g445d6oillvjscja.gif)



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](https://nextjs.org/docs/basic-features/image-optimization#priority)


--- 

## Final issues

Some videos and links that can help : 

[Next dev and lead talking about a future feature, you can follow him to to know more about next world](https://twitter.com/timneutkens/status/1636693508223270912)
and

[You're Doing Image Rendering WRONG in Next.js!](https://www.youtube.com/watch?v=2U7yZ3wvFBM&ab_channel=SonnySangha)

and 

[Next Documentation](https://nextjs.org/docs/basic-features/image-optimization)


</hr>

Hope this post can be helpful!
For some feedback or more content, follow me on [twitter](https://twitter.com/daniellimae) or [github](https://github.com/bolodissenoura)