Nuxt•5mo ago

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

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>

<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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

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