Nuxt Image
summary
Nuxt Image gets added as a module, swap image tags to <nuxt-img>, configure providers for Cloudinary and Unsplash, and apply presets that force webp, q=60, fit=cover with responsive sizes and lazy/eager rules; a 1.5 MB hero image compresses to 1.5 MB → 20 KB, the page’s Largest Contentful Paint falls from 9.5s → 1.2s, and image payload drops from 90% to 30% of bytes, cutting estimated user data cost (US ~ $0.55 → $0.06); results come from Lighthouse and WebPageTest comparisons and the change works.
AI-written summary · about
chapters (14)
- 0:00Nuxt Image intro
- 2:40Lighthouse performance
- 5:04Waterfall analysis
- 8:33Image weight issues
- 9:35Next Image solution
- 10:40Install Next Image
- 13:07Providers and presets
- 14:30Before/after results
- 16:37WebPageTest verification
- 18:22Old vs new metrics
- 20:06WebPageTest tools
- 21:30Lighthouse scoring
- 22:53Best practices
- 23:58Q&A
related talks
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
21mNuxt Performances
33mImages blast off at the speed of Jamstack!
15mLet’s talk about Image Optimization with Next.js
43mEveryone Wins When You Optimize Media
25mDelivering Fast and Beautiful Images and Video
42mEngaging Ecommerce with the Visual Web
31mEngaging Ecommerce with the Visual Web