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-component.vercel.app/
----

----
My first ever PR to Next.js regarding the sizes property 😃😃: https://github.com/vercel/next.js/pull/20067
----

----
Documentation

Next.js Image: https://nextjs.org/docs/basic-features/image-optimization
Next.js Image Api Reference: https://nextjs.org/docs/api-reference/next/image
----

----
GitHub Repository: https://github.com/bmvantunes/youtube-2020-dec-nextjs-image-component
GitHub Repository Commit History: https://github.com/bmvantunes/youtube-2020-dec-nextjs-image-component/commits/main
----

----
Next.js (GitHub) AVIF reference: https://github.com/vercel/next.js/blob/5562daf7a160e62fd4f78eca257ba957ad64074c/packages/next/next-server/server/image-optimizer.ts#L17
----

----
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: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes

Видео Next.js Image Component and Image Optimization + srcset and sizes explanation канала Bruno Antunes