Ultimate Guide to Image Optimization in Next.js (CLS, Placeholders, Transformations, ImageKit)
In this video I will give you the ultimate guide to image optimization in Next.js. We will start with the standard image tag and how to use srcSet and sizes to make images responsive. Then we will dive into the Next.js Image component, covering the most important props, lazy loading, and placeholders including blur-up techniques. You’ll also learn how to adjust image quality on the fly, apply transformations like rotation, blur, and grayscale, add text overlays, implement smart cropping, work with fill images for responsive layouts, and even a quick overview of file uploads with presigned URLs. We will even cover Imagekit which is an image and video API plus AI powered DAM.
🚀 Signup for ImageKit’s forever free plan: https://tinyurl.com/3wzfkr7w
🎓 Learn more about ImageKit: https://dub.sh/cLRFjWq
📸 Screen Recording Software: https://dub.sh/eDa47SO
🔒 My favorite Auth Solution: https://dub.sh/xeU8r3v
🌍 My Website: https://marshalcode.com/
👋🏻 Discord: / discord
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: [email protected]
Timestamps:
00:00 Intro
01:14 The standard img tag
02:00 Cumulative Layout Shift (CLS)
07:50 Lazy Loading
10:00 Responsive Images (srcSet & sizes)
14:30 Next.js Image component
24:00 Custom image loader
29:00 Fill images (responsive and performant)
30:00 Adjusting image quality on the fly
35:00 Basic image loading placeholder (Base64)
40:00 Advanced image loading placeholder
44:00 Image transformations (rotation, blur, grayscale, etc.)
47:00 Text overlay on images
50:00 Smart cropping into objects
52:30 File uploads (Presigned URLs)