Hellow guys, Welcome to my website, and you are watching Next.js Image Component and Image Optimization + srcset and sizes explanation. and this vIdeo is uploaded by Bruno Antunes at 2020-12-21T04:00:07-08:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | Next.js Image Component and Image Optimization + srcset and sizes explanation |
| Video Uploader | Video From Bruno Antunes |
| Upload Date | This Video Uploaded At 21-12-2020 07:00:07 |
| Video Discription | 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 |
| Category | Science & Technology |
| Tags | nextjs tutorial | next.js image component | next js image component | nextjs image component | nextjs image optimization | next.js image optimization | next js image optimization | next js srcset sizes | next.js image component how it works | how to use next js image component | next.js image tutorial | next js image tutorial | next js image component tutorial | next/image | nextjs objectFit | nextjs objectPosition | nextjs image | next js image | next image component |
