Proper Image Handling for Fast Vue Sites

In this lesson, get a high level overview of various image optimization techniques to help tackle one of the biggest culprits of bad performance. Learn about:

• serving the right image size
• using srcset and sizes to serve different image sizes based on the screensize
• using fetchpriority="high" for prominent LCP images
• lazy loading images below the fold with the loading="lazy" attribute
• and how NuxtImg can automate the process a bit

Links

• MDN - Responsive Images
• Nuxt Image
• Nuxt.js 3 Fundamentals Course
• Fetch Priority