Image Component and Image Optimization + srcset and sizes explanation

In this video we'll have a look at the new Image Component in . 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 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 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 in the layout “fill“ and “responsive“, how to make an image load eagerly and how to use the properties obje ... #BrunoAntunesPT #nextjs_tutorial # #next_js_image_component #nextjs_image_component #nextjs_image_optimization # #next_js_image_optimization #next_js_srcset_sizes # 20201221 R4sdWUI3-mY