Nuxt Image and Cloudinary Provider- Animated GIF support

[mikkeltschentscher]

Hi,

We're using Nuxt.js as our tool of choice, Strapi CMS and Cloudinary.

We're utilizing Nuxt Image and this works well for general images.
However we are experiencing issues with animated GIF/WebP's.

We have this animated GIF uploaded via Strapi CMS to Cloudinary:
link:https://res.cloudinary.com/eupry/image/upload/v1706881829/Animation_Wheel_Branding_2_0_0ef5da18a2.gif

However, using Nuxt Image will not render it correctly.
We are using "@nuxt/image vs. 1.3.0" and "ipx version 3.0.0" looking at our package.json.

We are including images like this in the frontend with Nuxt:
<NuxtPicture :src="data.image.data?.attributes.hash"  />

And it generates this markup out of the box: 

<picture><source type="image/webp" sizes="(max-width: 768px) 100vw, 1200px" srcset="https://res.cloudinary.com/eupry/image/upload/f_webp,q_auto,w_1,h_1/Animation_Wheel_Branding_2_0_0ef5da18a2 1w, https://res.cloudinary.com/eupry/image/upload/f_webp,q_auto,w_2,h_2/Animation_Wheel_Branding_2_0_0ef5da18a2 2w, https://res.cloudinary.com/eupry/image/upload/f_webp,q_auto,w_1200,h_675/Animation_Wheel_Branding_2_0_0ef5da18a2 1200w, https://res.cloudinary.com/eupry/image/upload/f_webp,q_auto,w_2400,h_1350/Animation_Wheel_Branding_2_0_0ef5da18a2 2400w"><img width="1600" height="900" alt="" loading="lazy" onerror="this.setAttribute('data-error', 1)" class="w-full rounded-2xl lg:sticky lg:top-24" data-nuxt-pic="" src="https://res.cloudinary.com/eupry/image/upload/f_jpg,q_auto,w_2400,h_1350/Animation_Wheel_Branding_2_0_0ef5da18a2" sizes="(max-width: 768px) 100vw, 1200px" srcset="https://res.cloudinary.com/eupry/image/upload/f_jpg,q_auto,w_1,h_1/Animation_Wheel_Branding_2_0_0ef5da18a2 1w, https://res.cloudinary.com/eupry/image/upload/f_jpg,q_auto,w_2,h_2/Animation_Wheel_Branding_2_0_0ef5da18a2 2w, https://res.cloudinary.com/eupry/image/upload/f_jpg,q_auto,w_1200,h_675/Animation_Wheel_Branding_2_0_0ef5da18a2 1200w, https://res.cloudinary.com/eupry/image/upload/f_jpg,q_auto,w_2400,h_1350/Animation_Wheel_Branding_2_0_0ef5da18a2 2400w" data-error="1"></picture>

Here's the Cloudinary direct link for the GIF: link:https://res.cloudinary.com/eupry/image/upload/v1706881829/Animation_Wheel_Branding_2_0_0ef5da18a2.gif

Here's our Nuxt.js configuration for images:

image: {
   provider: process.env.NUXT_IMAGE_PROVIDER ,
   cloudinary: {
       baseURL: process.env.CLOUDINARY_BASE_URL
   },
},

You can see our demo page where we've added 3 images, 2 animated, and one jpg:
https://eupry.com/gif/

It looks like it applies the same logic to all image types and converts to .webp, thus failing the animated images.
How can we fix this?

[danielroe]

Have you tried specifying gif format for that picture?