In this video we’ll have a look at the new Image Component in Next.js.

During this video we will learn how to use “srcset” and “sizes” attributes with the “normal” html “img” tag. After that we will look into the 4 different layouts in the Next.js image component “intrinsic”, “responsive”, “fixed” and “fill”.

I’ll show the performance difference in a simple image gallery by using the “normal img” tag vs using the Next.js image component. As a “spoiler” I can tell you the difference in performance between the Image component and the “img” tag is big… very big :)

We will cover a few more topics, like how to change the image quality, change the default srcsets provided by Next.js in the layout “fill” and “responsive”, how to make an image load eagerly and how to use the properties objectFit and objectPosition when using layout “fill”!

#next #nextjs #react #javascript #reactjs