How can Nuxt Image v2 be configured to optimize images for different screen densities and devices?

Nuxt Image v2 optimizes images by configuring different presets for various screen densities and device types.

It automatically serves appropriately sized and formatted images based on device capabilities using built-in presets, lazy loading, and format fallback strategies. This improves performance and quality across devices by minimizing bandwidth while maintaining visual fidelity.

Code

// Option 1
const img = useImage()

// Full autocomplete for modifiers
const url = img('/image.jpg', { 
 width: 300,
 height: 200,
 fit: 'cover' // TypeScript knows the valid values!
})

// Option 2
<template>
  <NuxtImg
    src="/images/banner.jpg"
    sizes="sm:100vw md:50vw lg:33vw"
    densities="1x 2x 3x"
    format="webp"
    alt="Banner"
  />
</template>