AVIF to GIF conversions fail

[GoOz]

Hello there,

I have this setup:

• node 18.17.1
• eleventy 2.0.1
• eleventy-img 4.0.2

And I'm currently using eleventy-img with that config:

imgOptions: {
    widths: [400, 812, 1400, "auto"],
    formats: ["avif", "webp", "auto"],
    sharpOptions: {
        animated: true,
    },
    outputDir: path.join(eleventyConfig.dir.output, "img"),
},

And on a few old posts of mine I'm using GIFs which is supposed to be an accepted format and it should be ok with an avif & webp conversion (while keeping the animation).

When I look at the output, I can see all the gif, webp and avif files being created and all of them except avif are ok.

Avif files are created but their filesize is 0 byte. And since the file exists and my browser supports the format it's trying to render the avif file but obviously fails.

While building I get this error

[11ty] Unhandled rejection in promise: (more in DEBUG output)
[11ty] heifsave: image too large
[11ty] heifsave: image too large (via Error)
[11ty] 
[11ty] Original error stack trace: Error: heifsave: image too large
[11ty] heifsave: image too large
[11ty]     at Sharp.toFile (/Users/gooz/Repos/Haikooz/node_modules/sharp/lib/output.js:89:19)
[11ty]     at /Users/gooz/Repos/Haikooz/node_modules/@11ty/eleventy-img/img.js:622:43

I don't get much more information by running the debug build except that I know it's the gif failing to be converted to avif.

The error states that the image is too large but honestly I don't think it is. Most of those GIFs are around 600x400 pixels for a filesize of a few Kb but never above 1Mo.

Also to be sure my GIFs are not corrupted in some way, I tried on the first online converter I could find (https://ezgif.com) and it's converting properly apparently.

I have the feeling it's actually a Sharp issue but I'm not fluent in image format conversion, is there something I'm doing wrong? or something I can do? Or even, can I somehow filter GIF files so it doesn't try to convert them into AVIF?

Thanks for the help.

[lovell]

Animated AVIF sequences are unsupported by libheif and therefore also libvips, sharp and eleventy-img. Please see the upstream discussion at https://github.com/strukturag/libheif/issues/377

Because you've specified animated: true, the frames will be rendered vertically, which can lead to the height of the image becoming larger than the 16384 pixel limit and therefore the "image too large" message.

https://sharp.pixelplumbing.com/api-constructor

When loading more than one page/frame of an animated image, these are combined as a vertically-stacked "toilet roll" image where the overall height is the pageHeight multiplied by the number of pages.

[GoOz]

@lovell oh I see, I understand why the "image too large" error now. Thanks.

I don't think there's a builtin way to exclude GIF files from AVIF conversion in eleventy-img (or is there?) so I guess I'm not gonna use this format then.