Hellow guys, Welcome to my website, and you are watching Next.js Image in-depth tutorial. and this vIdeo is uploaded by Full Stack Zach at 2022-11-25T08:42:14-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 in-depth tutorial |
| Video Uploader | Video From Full Stack Zach |
| Upload Date | This Video Uploaded At 25-11-2022 11:42:14 |
| Video Discription | #nextjs #nextjsimage #vercel The Next.js Image component is super powerful, yet can be costly if misused. This tutorial walks you through the most important concepts behind this component and aims to show how to use this in different situations. Supplementary repo: https://github.com/zachgoll/nextjs-image-tutorial Chapters (skip to the one you're interested in!): 0:00 Intro 6:21 Why should you care about Next.js Image (and images in general)? 16:35 Large images DESTROY your Lighthouse score (and how to fix it) 24:26 A costly $$ mistake with Next.js Image (hint: you might need a custom "loader") 35:53 How to use Next.js image effectively 37:00 Static (local) image usage 39:40 CLS and why Next.js Image REQUIRES a width and height 42:46 What is a LQIP (low quality image placeholder)? 48:08 How to generate your own LQIPs for remote images 57:11 What if I don't know the width/height of my image? 1:02:50 How to make your images responsive with `fill` property (no width/height required) 1:06:40 Why "srcset" and "sizes" props are SUPER important 1:30:35 Brief migration guide from next/legacy/image to next/image Resources I mentioned in the video: - https://nextjs.org/docs/api-reference/next/image - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images - https://www.mydevice.io/ - https://developers.google.com/speed/webp |
| Category | Science & Technology |
| Tags | next js | nextjsimage |
