From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

RQ: Component—autooptimization feature

RQ: Component—autooptimization feature

Why should we use the image component instead of the regular img tag in Next.js? So as we discussed, Next.js offers various ways for optimizing the performance of the application. The image component is a feature of Next.js, which provides several optimizations for images to improve the performance of the website over the IMG tag. It provides a lazy loading feature in which images are loaded automatically when they appear in the viewport. It will render the images in different sizes based on the screen sizes. So for smaller screen, it will render a smaller image. This component will also automatically compress the images to reduce their file sizes and improve the loading time. So, to make use of the caching and optimizations of Next.js, one should choose the image component over the img tag.

Contents