Next.js Image Component and Image Optimization + srcset and sizes explanation

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"! I hope you enjoy this video :) ---- Deployed Demo App with all the examples I showed: https://youtube-2020-dec-nextjs-image... ---- ---- My first ever PR to Next.js regarding the sizes property 😃😃: https://github.com/vercel/next.js/pul... ---- ---- Documentation Next.js Image: https://nextjs.org/docs/basic-feature... Next.js Image Api Reference: https://nextjs.org/docs/api-reference... ---- ---- GitHub Repository: https://github.com/bmvantunes/youtube... GitHub Repository Commit History: https://github.com/bmvantunes/youtube... ---- ---- Next.js (GitHub) AVIF reference: https://github.com/vercel/next.js/blo... ---- ---- Timeline: 00:00 Introduction - Performance 00:53 Introduction - Cumulative Layout Shifts (CLS) 01:39 Introduction - The Next.js Image Component is based on web standards 02:48 srcset attribute in order to understand how the Next.js Image component works "behind the scenes" 05:08 devicePixelRatio and how our browser picks up our images in srcsets 07:44 sizes attribute - this is something very important, that we should set on every single image that is not using 100% of the viewport 13:27 Load more images on the page 14:12 Migrating from the "img" tag to the Next.js Image Component 14:53 Explaining the default layout (intrinsic) and showing the differences to layout responsive 16:40 How to override the default deviceSizes in next.config.js 16:54 Performance between Next.js Image Component vs "normal" img tag with only src attribute 17:34 Showing that Next.js image component only loads the visible images (lazy load) 18:22 Layout Fixed 18:50 Layout Fill with objectFit and objectPosition 23:05 Loading property: Making one image load eagerly even if outside the viewport (not visible) 24:33 My Next.js server crashed =D 25:25 Going back to loading property 25:45 Quality property in order to save even more KB 27:03 One last note on sizes 27:10 My first PR to Next.js 😃😃 27:38 Conclusion ---- Follow me on: Twitter:   / bmvantunes   Dev.to: https://dev.to/bmvantunes Website: https://brunoantunes.net GitHub: https://github.com/bmvantunes LinkedIn:   / bmvantunes