Skip to content
6 changes: 4 additions & 2 deletions docs/content/5.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,11 @@ export default defineNuxtConfig({

Default: `['webp']`

You can use this option to configure the default format for your images used by `<nuxt-picture>`. The available formats are `webp`, `avif`, `jpeg`, `jpg`, `png`, and `gif`. The order of the formats is important, as the first format that is supported by the browser will be used. You can pass multiple values like `['avif', 'webp']`.
You can use this option to configure the default format for your images used by `<nuxt-picture>` and `<nuxt-image>`. Multiple values like `['avif', 'webp']` can be passed. The order of the formats is important, as for `<nuxt-picture>`, the first format that is supported by the browser will be rendered. For `<nuxt-image>` on the other hand, the _first_ element of the array is used (ignoring browser support).

You can also override this option at the component level by using the [`format` prop.](/components/nuxt-picture#format)
Available formats are `webp`, `avif`, `jpeg`, `jpg`, `png`, and `gif`.

You can also override this option at the component level by using `format` prop ([<nuxt-image>](/components/nuxt-image#format)|[<nuxt-picture>](/components/nuxt-picture#format)).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand Down
2 changes: 1 addition & 1 deletion src/runtime/components/_base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const useBaseImage = (props: ExtractPropTypes<typeof baseImageProps>) =>
...props.modifiers,
width: parseSize(props.width),
height: parseSize(props.height),
format: props.format,
format: props.format || $img.options.format[0],
quality: props.quality || $img.options.quality,
background: props.background,
fit: props.fit
Expand Down
Loading