Animated images render incorrectly when viewed dynamically

[juan-manuel-alberro]

Summary

The GIF images doesn´t work as expected after publish

Steps to Reproduce

1. Create a new publication
2. Add a GIF and insert it into the publication
3. Save

Additional info

• Postleaf version: latest version from master
• Node version: 7.9.0
• Affected browsers: alls

• Operating system: macOS Sierra

  Demo

[claviska]

Can you attach the original, unmodified image? I'd like to test this with GD.

[juan-manuel-alberro]

Is the GIF from the Atom's website, here's the link.

[claviska]

This is an issue with how GraphicsMagick handles animated GIFs. I need to investigate this more, but I believe this option will be helpful: http://www.graphicsmagick.org/GraphicsMagick.html#details-coalesce

We either need to not process animated GIFs or find a reliable way to process them. Also affects Dynamic Images.

[claviska]

Found a fix using GM's coalesce method, but it deoptimizes frames, resulting in a larger image size than the original despite the dimensions getting smaller (in this case, 820x940 @ 296KB ==> 500x573 @ 5MB). It's also very time consuming and memory intensive, which I'm not comfortable with:

In dynamic_images.js:

// Detect animated images
.then((image) => {
  return new Promise((resolve, reject) => {
    image.identify('%n\n', (err, info) => {
      if(err) reject(err);

      info = info.split('\n');
      let numFrames = parseInt(info[0]);

      if(numFrames > 1) {
        image.coalesce().write(targetFile, (err) => {
          if(err) return reject(err);
          return resolve(Gm(targetFile));
        });
      } else {
        return resolve(image);
      }
    });
  });
})

Still looking into options.

[claviska]

The best I can do to address this is to simply not process images with animation (see 59921a3). This leaves animations unaltered, but at the expense of not being able to use any Dynamic Images with them. Unfortunately, this type of processing is just too slow and memory intensive.

One alternative is to use just the first frame of the animation, but that may cause confusion since the original would be animated but modified versions won't.