Props supported by Image Components
- src: It will take a path string. It can be either an absolute external URL or an internal path. If you’re using an external URL, you must add it to remotePatterns in next.config.js.
- width: It will take a width in pixels. It will help in rendering a placeholder of the correct size and prevent layout shifts when the actual image loads.
- height: It will take a height in pixels. It will help in rendering a placeholder of the correct size and prevent layout shifts when the actual image loads.
- alt: It will take a text. It will used by search engines and displayed if image not found.
- layout: It is used to provide layout to the image. Ex: intrinsic, responsive, and fixed.
- priority: It will ensures that images are prioritized during page loading. value can be true or false.
- placeholder: It is used to enhance the perceived loading speed and provide a better user experience.
- quality: It is used to define quality of image and it takes value between 1 to 100. default value is 75.
Next JS Image Optimization: Best Practices for Faster Loading
Large and unoptimized images can impact a website’s performance on loading time. Optimizing images is necessary to improve the performance of the website. Next.js provides built-in support for image optimization to automate the process, providing a balance between image quality and loading speed.
Contact Us