Next.js Image Optimization with Image Component | Responsive Images
27.1 هزار بار بازدید -
12 ماه پیش
-
Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Next.js image optimization with image component tutorial for responsive images. Learn how to best optimize images with the Next.js image component. Go beyond simply the required props and learn how to help Next.js provide the best image optimization and responsive images.
💖 Support me on Patreon ➜ Patreon: davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Next.js Image Optimization with Image Component | Responsive Images
(00:00) Intro
(00:19) Welcome
(00:41) Next.js Images
(00:49) Remote pattern config
(01:35) Image Component Overview
(02:37) Width & Height can be confusing
(03:34) Content Layout Shift
(05:24) You may need to lie to Next.js
(08:40) The Key to Better Responsive Images
(12:41) How to set the sizes value accurately
(16:03) Priority prop
(17:53) Final Notes
📚 Tutorial References:
🔗 Next.js Image: https://nextjs.org/docs/app/api-refer...
🔗 Next.js Image Optimization: https://nextjs.org/docs/app/building-...
🔗 Linter for Responsive Images: https://ausi.github.io/respimagelint/
🔗 CSS Tricks: A Guide to Responsive Images Syntax: https://css-tricks.com/a-guide-to-the...
Was this tutorial about Next.js Image Optimization with the Image Component and Responsive Images helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #responsive #images
Next.js image optimization with image component tutorial for responsive images. Learn how to best optimize images with the Next.js image component. Go beyond simply the required props and learn how to help Next.js provide the best image optimization and responsive images.
💖 Support me on Patreon ➜ Patreon: davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ Discord: discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Next.js Image Optimization with Image Component | Responsive Images
(00:00) Intro
(00:19) Welcome
(00:41) Next.js Images
(00:49) Remote pattern config
(01:35) Image Component Overview
(02:37) Width & Height can be confusing
(03:34) Content Layout Shift
(05:24) You may need to lie to Next.js
(08:40) The Key to Better Responsive Images
(12:41) How to set the sizes value accurately
(16:03) Priority prop
(17:53) Final Notes
📚 Tutorial References:
🔗 Next.js Image: https://nextjs.org/docs/app/api-refer...
🔗 Next.js Image Optimization: https://nextjs.org/docs/app/building-...
🔗 Linter for Responsive Images: https://ausi.github.io/respimagelint/
🔗 CSS Tricks: A Guide to Responsive Images Syntax: https://css-tricks.com/a-guide-to-the...
Was this tutorial about Next.js Image Optimization with the Image Component and Responsive Images helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #responsive #images
12 ماه پیش
در تاریخ 1402/04/30 منتشر شده
است.
27,117
بـار بازدید شده