Rendering Optimized Images - Next.js Course #8
In this tutorial we’ll use the Image component provided by Next.js to render local and remote images in a web application. We’ll focus on key performance optimizations to prevent Cumulative Layout Shift (CLS) and slow Largest Contentful Paint (LCP). The image component sets width and height of local images automatically by analyzing the file. It can also generate a srcset with multiple sizes to match viewport breakpoints which you can configure. The component also supports a blurry image placeholder while the image is loading. You have to specify a base64 string for remote images and Next can generate the blurry loading base64 data automatically if the image is local.
Contents:
0:00 Introduction
0:16 Performance Optimizations
0:50 Using the Image Component
1:37 Blurry Image Placeholders
2:10 Multiple Image Sizes
3:19 Image Quality
3:39 Using Remote Images
4:45 Image Loader
5:25 Image Fill Prop
5:51 Loading with Priority
6:32 Conclusion
Social Media:
Email: [email protected]
Twitter: / nikelaz
LinkedIn: / nikola-lazarov
#nextjs #course
Watch video Rendering Optimized Images - Next.js Course #8 online without registration, duration hours minute second in high quality. This video was added by user NL Tech 09 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 539 once and liked it 27 people.