Image Next.js – Never Struggle Again (ImageKit)

Sign up for ImageKit's forever free plan: https://bit.ly/49zmXkt (paid sponsorship)
Learn more about ImageKit: https://bit.ly/3VXRK7u (paid sponsorship)
Disclaimer: This is a sponsored (paid) video. It is your responsibility to evaluate the safety, accuracy and other relevant parts of the product under review.
NEW React & Next.js course: https://bytegrad.com/courses/professional-react-nextjs

Hi, my name is Wesley. I am a Kinde brand ambassador (paid sponsorship).
Check out Kinde for authentication and more https://bit.ly/3QOe1Bh

NEW React & Next.js course: https://bytegrad.com/courses/professional-react-nextjs
Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
Professional CSS Course: https://bytegrad.com/courses/professional-css

Web development roadmap 2024 & 2025: https://email.bytegrad.com
Email Newsletter (BIG update soon): https://email.bytegrad.com
Discord: all my courses have a private Discord where I actively participate
Kinde: Check out Kinde for authentication and more https://bit.ly/3QOe1Bh

️ Timestamp:
00:00 Introduction
00:42 Image kit
01:58 Example layout 1 (simple)
02:10 Native img tag
02:48 Next.js image component
02:58 Width and height accessories
04:42 Responsive Images
05:56 srcSet and sizes
2:17 p.m. DPR / retina
15:48 Disable cache
4:36 p.m. Priority
17:06 Space reserved for blur
6:29 p.m. Local image
20:03 Example layout 2 (full width, blog)
9:43 p.m. fill
23:09 sizes
24:06 What if there is padding?
25:33 Custom loader (connect ImageKit to Image component)
29:54 Example layout 3 (gallery)
32:50 Example layout 4 (background image)
33:58 Layout example 5 (masonry)