Discover how to use and configure the nuxt-picture component.

<nuxt-picture> is a drop-in replacement for the native <picture> tag.

Usage of <nuxt-picture> is almost identical to <nuxt-img> but also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN


See props supported by nuxt-img


Format used for fallback. Default is conditional:

  • If original format supports transparency (png, webp and gif), png is used for fallback
  • Otherwise jpeg is used for fallback