Automatic Generation of WebP and JPEG Images in a Static Nuxt 3 Project with @nuxt/image-edge or @nuxt/image

[frankdema]

Hello everyone,
I have a question about image optimization in a static Nuxt 3 project. I want to ensure that both WebP and JPEG versions of my images are generated during the build process.

Goal:

• I want to have an original file, e.g., cover123.jpg (5 MB), in the directory assets/images/cover123.jpg.
• After running nuxt generate, the browser should have access to the compressed versions cover123.jpg and cover123.webp.
• Additionally, I want a fallback so that if the browser cannot display WebP, it uses the JPEG file.

Usage example:

<template>
  <NuxtImg
    src="cover123.jpg"
    sizes="100vw sm:50vw md:400px"
    format="webp, jpg"
    picture
  />
</template>

Problem:

After running npm run generate, only one image version (either WebP or JPEG) is generated, but not both. I want to ensure that both formats are created during the build process and that the browser loads either the WebP or the JPEG version depending on its support.

Question:

Is this even possible in a static Nuxt 3 project? If yes, how can I configure it correctly? If there are alternative approaches to achieve this goal, I would appreciate any help.

Thank you in advance!

Best regards,
Frank

[Yves852]

Did you tried without the space in format?

<template>
  <NuxtImg
    src="cover123.jpg"
    sizes="100vw sm:50vw md:400px"
-    format="webp, jpg"
+    format="webp,jpg"
    picture
  />
</template>