Nuxt Image: Performance and Status

[pi0]

This report is written by @nuxt/framework team for an overview of the image module project status and roadmap and will be updated as we progress. Feedback is more than welcome 💚

Related:

• Rendering Optimizations: Today and Tomorrow (https://github.com/nuxt/framework/discussions/5856)

Why

Images in the browser, are often not optimized:

• Unsized images hurt Content-Layout Shift (CLS)
• Large images can hurt Largest Contentful Paint (LCP)
• Poor image compression can hurt LCP
• Loading unnecessary images hurt LCP

You can read more about the ongoing work by the Aurora team on https://web.dev/image-component/

How

Nuxt Image provides multiple solutions and features to solve the issues with images performance:

• <nuxt-img> is a drop-in replacement for the native <img> element:
  • Uses a built-in provider to optimize local and remote images
  • Converts src to provider-optimized URLs
  • Automatically resizes images based on width and height
  • Generates responsive sizes when providing sizes option
  • Supports native lazy loading as well as other <img> attributes
  • Supports placeholder
• <nuxt-picture> is a drop-in replacement for the native <picture> element.
  • Usage of <nuxt-picture> is almost identical to <nuxt-img> having the benefit of serving legacy+modern formats at the same time
• Built-in image resizer and transformer with unjs/ipx with support of ~20 additional providers out-of-the-box and easy interface to create custom providers.
• Generate width and height based on ratio
• Optimize using modern formats such as webp and avif

Future Improvements

Nuxt image module is an ongoing development project, and we plan to keep improving:

• Enforce to always provide width and height using a warning to hint correct sizes
• Recommend to use <nuxt-img> over plain <img> (feat(rule): add no-img-element eslint-plugin-nuxt#177)
• Try WASM-based image optimizer with squoosh for universal deployments when Node.js is not available
• Recommend image module from the main documentation
• Fetch priority combined with preloading (https://web.dev/priority-hints/)
• Auto enabling image module with zero config
  -Other enhancement issues

Nuxt Support Status

Nuxt 2 (0.x)

• Status: Working and Stable
• Documentation: https://image.nuxtjs.org

Nuxt 3 (1.x)

• Status: Working (Under development: Nuxt 3 Support #548)
• Documentation: https://v1.image.nuxtjs.org

[hirenramoliyaiwb]

@pi0 Hey Is there any plugin for lazy loading image?

[kissu]

This is done already natively no?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
loading="lazy"

[manikant-yml]

@nuxt/image should work fine for you!!

Nux 2 Supported

For nuxt 3 -

Nuxt 3 Supported