🌿 Nuxt.js Intermediate

How does Nuxt.js handle image optimization?

Answer

Nuxt provides image optimization through the @nuxt/image module. It offers the <NuxtImg> and <NuxtPicture> components that automatically resize, convert to modern formats (WebP, AVIF), and lazy-load images. Images can be served through various providers: local (using Sharp for on-demand resizing), Cloudinary, Imgix, Vercel, IPX (a built-in image server). You configure the default provider and presets in nuxt.config.ts. <NuxtImg src="/hero.jpg" width="800" height="400" format="webp" /> generates the correct srcset and serves the right size to the right device. The module also handles responsive images and the loading="lazy" attribute automatically.