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.

Component: Autooptimization feature

Component: Autooptimization feature - Next.js Tutorial

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

Start my 1-month free trial Buy for my team

Component: Autooptimization feature

“

So, now as we know the basics of the image component, let's explore some advanced features as well. Let's discuss one scenario where the Next.js application displays the image, which is stored on the server. And let's say this image's size is 5000 by 5000 pixels. Now when this application is opened in a mobile device, you would not want the same image to be downloaded, instead, there has to be a low res that is low resolution image. And this process is done by Next.js for us. Next.js image component will ask for the best image version to the server. For example, in this case, it may ask for a 1200 by 1200 pixel image. Once on the server, Next.js will make another low-res copy and deliver it. Not only that, this process happens only once on the server, and this new low-res copy is stored in the cache on the server. The storing of cached images is handled behind the scene and we don't have to keep a track of it. And just to check it once, let me go to the code window and open the .next…

Contents