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
Смотрите видео Rendering Optimized Images - Next.js Course #8 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь NL Tech 09 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 539 раз и оно понравилось 27 людям.