Next.js Image in-depth tutorial скачать в хорошем качестве

Next.js Image in-depth tutorial

#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-im... 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... https://developer.mozilla.org/en-US/d... https://www.mydevice.io/ https://developers.google.com/speed/webp