Animated GIFs

Imager X can transform animated GIFs, and comes with some nifty additional functionality to add some flexibility.

First of all, you can use the template variable craft.imager.isAnimated(myAsset) to check if an image is animated or not. You can use this to avoid transforming animated gifs altogether, or pass in different transform parameters.

TIP

Transforming animated gifs require alot of memory and cpu recources. Transforming one gif with 20 frames, is the equivalent of transforming 20 images. So, consider if you actually have the resources available to do the transform, or if you should rather opt out.

There is also a frames transform parameter that can be used to extract individual, or sequences of, frames, from the gif.

// Get only first frame of animated gif
{% set transformedImage = craft.imager.transformImage(animatedGif, { width: 300, frames: '0' }) %}

// Get the first ten frames of animated gif
{% set transformedImage = craft.imager.transformImage(animatedGif, { width: 300, frames: '0-9' }) %}

// Get every fifth frame between frames 0 and 40
{% set transformedImage = craft.imager.transformImage(animatedGif, { width: 300, frames: '0-40@5' }) %}

// Get every fifth frame between the first and the last frame
{% set transformedImage = craft.imager.transformImage(animatedGif, { width: 300, frames: '0-*@5' }) %}

Extracting the first frame can be expecially useful for getting the first frame of the gif to use as a placeholder, and then lazyloading in the whole gif later.

When transforming animated gifs, they tend to blow up in size. To do the transform, every single frame has to be extracted, transformed, and then all the frames are merged together into the final gif. Any optimizations that were done to the gif prior to the transform, will be lost. Also, GD and Imagick does nothing to help optimizing the gif. You can use the gifsicle optimizer to optimize the final file.