Optimized / Resized GIFs lose all animation, become still frames

Feature
1

The title says it all. When oversized animated gif files are resized, only the first frame is preserved.

After a bit of research, it looks like the solution is to first coalesce the gif before resizing it. This “fills out” the incomplete frames so they can be resized, retaining the animation, by ImageMagick.

Seemingly paradoxically, this usually results in a larger file size than you started with. The coalescing process can be effectively reversed by optimizing the resized gif.

So, we have a few possible solutions:

  1. Coalesce, resize, then optimize gifs rather than sending them through the same optimization process as other images.
  2. Allow browsers to resize gifs client side.
  3. Some more involved process resembling YouTube lazy embeds, where gifs don’t animate until you click / hover them. (See e.g. 9gag.com)

I’m definitely in favor of the first option.

1 Like
2

  1. I don’t think it’s actually the job of the server to resize a giant animated GIF that’s so large it doesn’t even fit in the viewport. That’s a lot of work, particularly if we are preserving animation, and as you noted it can munge the compression.

  2. Resizing on the client is not a bad idea, provided we can hard-code the dimensions in the width and height attributes – resizing “on the fly” and letting the browser decide the width/height leads to bouncing of the page as it shifts to accommodate the unknown (until render time) dimensions).

  3. This idea has some merit as well, but seems kind of harsh… and would be dev work. Maybe if that only kicks in when the animated GIF is so large?

3

We have two definitions of “large” being used, one with regard to file size and one with regard to dimensions, so clarity is key.

  1. I competely agree, so long as we’re talking solely about large dimensions. Resizing and compressing uploaded gifs seems reasonable if it’s done to save bandwidth and storage space.
  2. I thought this was already done automatically? I’ve always seen dimensions added to my image markup. The problem is that they’re being (as you put it) munged server-side based on those dimensions. (Or maybe not based on those dimensions… I haven’t looked at the code for that.)
  3. Agreed, on all counts.
4

@fysics If you have a community with high use of gifs this may be a better way to go (for both speed and storage space required):

1 Like