11ty / eleventy-img

Utility to perform build-time image transformations.
https://www.11ty.dev/docs/plugins/image/
435 stars 54 forks source link

Video frames from WEBP and GIF originals are stripped off #139

Closed richardneililagan closed 2 years ago

richardneililagan commented 2 years ago

When using a .webp or .gif file that has video / animation frames as an input to the plugin, the output files seem to have stripped those out, and all we're left with are still images.

In my case, my pipeline is something akin to this --- nothing special I think? :

const image = require('@11ty/eleventy-img')

// ...

const imagedata = await image(IMAGE_PATH, {
  widths: [624],
  outputDir: './_site/i/',
  urlPath: '/i/',
})

// `imagedata` is then parsed to the corresponding `picture > source + img` markup.
AleksandrHovhannisyan commented 2 years ago

I ran into this issue myself and ended up removing animated GIFs from my site for that reason. Curious to see if there's a way to process them while retaining the frames. I know Google provides a gif2webp command-line utility (similar to cwebp) that can be used to convert animated GIFs to animated WebPs. As a temporary workaround, you might be able to process those manually and passthrough-copy them to a dedicated folder for GIFs. Not ideal, though.

zachleat commented 2 years ago

sharp added support in 0.30.0 which will ship with Eleventy Image v1.1.0.

Tested here https://github.com/11ty/eleventy-img/blob/ca70384e26a8bab0ebe7de6f0184c244ff7f2ed1/test/test.js#L904

You will need to pass in the animated prop to sharpOptions