Images blast off at the speed of Jamstack!

on YouTube ↗33m

" summary

Builds a reusable Vue image component that maps width height format and quality into an Image Service CDN URL and stores presets in a headless CMS so banners, art‑direction sources and eager above‑the‑fold images are configured, not handcoded. Uses Nuxt 3, Storyblok image service, responsive srcset/size descriptors, width/height attributes, lazy/eager loading, WebP/AVIF conversion and CDN caching. Demo gallery with four images yields a dramatic Lighthouse score improvement (near 100).

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 11:33Use next generation formats
3. 13:52Add width and height attributes
4. 16:04Responsive images: Resolutions
5. 17:24Responsive images: Sizes
6. 20:20Use the loading property

" related talks

• 20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt AppsJakub Andrzejewski · Vue.js Live 2023
• 31mOptimizing for Super Sonic Speed in Vue.js & GridsomeShodipo Ayomide · Vue.js Global 2020
• 24mNuxt ImageDebbie O'Brien · Nuxt Nation 2021
• 31mOptimizing for Super Sonic Speed in Vue.js & GridsomeShodipo Ayomide · Vue.js Global 2020
• 21mNuxt PerformancesDebbie O'Brien · Vuejs Amsterdam 2021
• 30mVueConf US 2021 | Looking through the VueFinder Henri HelveticaHenri Helvetica · Vueconf.US 2021
• 12mCloudinary's New Vue SDKDoug Steinberg · VueConf US 2019
• 15mLet’s talk about Image Optimization with Next.jsSaad Irfan · Next.js Conf 2021