Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
summary
Image optimization cuts payloads dramatically: converting a JPEG to AVIF shrinks one demo image from ~55 KB to 22.3 KB while PNG reached ~200 KB, and Cloudinary automatically serves AVIF/WebP. The workflow shows using Cloudinary (overlay/transformation URLs), Cloudinary Nuxt 3 module plus Nuxt Image or IPX (sharp/libvips) for on‑the‑fly resizing, plus lazy loading, fetchpriority and lazy hydration patterns. The demo builds and works, reducing transfer size and improving Largest Contentful Paint.
AI-written summary · about
chapters (7)
- 0:00Intro
- 2:09Optimized Images are crucial
- 2:36Image Formats
- 5:18What if I can't optimize my images manually?
- 9:49Demo of Cloudinary for Nuxt 3
- 13:40Useful Patterns for working with images
- 18:51By using optimizing images, you deliver a better experience to the Users
related talks
24mNuxt Image
33mImages blast off at the speed of Jamstack!
43mEveryone Wins When You Optimize Media
31mEngaging Ecommerce with the Visual Web
45mA picture is worth a thousand…kilobytes.
30mVueConf US 2021 | Looking through the VueFinder Henri Helvetica
31mOptimizing for Super Sonic Speed in Vue.js & Gridsome
31mOptimizing for Super Sonic Speed in Vue.js & Gridsome