Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps - Vue.js Live 2023

Jakub Andrzejewski presented this talk at Vue.js Live 2023 in London: "Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!"
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
0:00 Intro
2:09 Optimized Images are crucial
2:36 Image Formats
5:18 What if I can't optimize my images manually?
9:49 Demo of Cloudinary for Nuxt 3
13:40 Useful Patterns for working with images
18:51 By using optimizing images, you deliver a better experience to the Users

[@daniele.2944]

This is cool..wonder if there is a way to pull the static assets from cloudinary. Typically my clients want minimal dependence on 3rd parties.

[@nyambe]

What about cloud front?

[@oemeraran8183]

Asking the same question right now. Did you manage to find a solution?
Currently i am using IPX, which transforms the images on-the-fly. But these are not cached. Transforms from jpg to avif takes a long time. Users with fast internet will actually have a worse experience with the on-the-fly compression.

[@karfagen86]

Why would your friend support IE? Oo