Animated GIFs

Transloadit
1

Archived from the Transloadit support forum. Originally posted on January 16, 2012; details may be outdated, see our docs for current behavior. Original thread

I’ve noticed that the majority of animated gifs upload don’t maintain their animation. Did you guys change something about how you handle animated gifs?

This is the template I’m using: https://transloadit.com/templates/view/REDACTED

2

Hey Gabe,

nope we did not change anything regarding this.

But I see you use the frame: 1 parameter and strip: true. This could already be the cause of only one frame to be used.

Has this worked in the past with this template?

Also all system tests that check for animated gifs still pass.

Kind regards
Tim

3

We don’t use frame:1 for the large image size, just for the thumbnails.
Does strip:true for the large image size strip out the other frames of the animated gif? Can’t remember, but we may have added that to the template recently, so that could be the problem.

Thanks
Gabe

4

Hey Gabe,

strip: true strips all meta data, including the frame information AFAIK.

It’s worth a try. Let me know if you want me to do it to confirm this first.

Kind regards
Tim

5

I just took out strip for the large image size and I still get a non-animated gif when I upload this file: http://i.imgur.com/2qWav.gif

Thanks
Gabe

6

I see. I was able to reproduce it as well. This is really weird.

I will debug this once I am in the office and will then get back to you.

7

Hey Gabe,

I debugged this. The problem is the flatten parameter, which has a default value of true, which solves quite a few issues. This does not work for gif files though, as it loses the animation.

I think the best way to solve this would be to have a default value of “auto” which flattens all non-gif conversions, but not gif-conversions. What do you think?

8

Alternatively we could just keep it as it is and do not flatten gif files, even though the flatten parameter is set to “true”. To deal with animated gif files, people could still make use of the “frame” parameter.

9

I’m not really familiar with the flatten param, as I don’t deal with transparent images, but the first suggestion seems reasonable to me.

I also wanted to ask if this would be possible.. Are there any template rules that would enable me to produce a non-animated gif if the file size is above 1mb, and instead watermark another image over it (a play button icon)? If the file size is below 1mb it would create an animated gif.

I remember reading at some point (but cant find it now) a way to reference image meta-data, such as filesize, in the template to change it’s behavior on the fly.

Thanks
Gabe

10

For that you’d need the file/filter robot: http://transloadit.com/docs/file-filter

Regarding the flatten parameter, I think I will keep it as it is and just not flatten gif files for now, as you cannot specify which frame to use with the flatten parameter anyway.

For gif files, you’d use the frame parameter. I think the expected behavior is to preserve animations by default.

11

Okay the new behavior is deployed and the docs for the flatten parameter are updated: http://transloadit.com/docs/image-resize

Can you please confirm, that gifs work for you now, Gabe?

Thanks again for reporting this!

12

Yep, animated gifs are working now. Thanks Tim!

13

Perfect.

Again thanks for reporting this.

Closed.

14

Hey Tim,

I also wanted to ask if this would be possible.. If the animated gif file size
is above 1mb I’d like to produce an animated gif as well as a non-animated gif that contains a watermark of another image (a play button icon)? If the file size is below 1mb it would just create the one animated gif.

I remember reading at some point (but cant find it now) a way to reference image meta-data, such as filesize, in the template to change it’s behavior on the fly.

Would that be possible? Or would the best way to do this be to do a second call to your api after my callback is url hit by your server, and create the non-animated gif then using a different template?

Thanks
Gabe

15

Hey Gabe,

you could again use the /file/filter robot for it.
Since you create the animated gif file in both cases, we can trim the problem down to just creating a watermarked version for files > 1mb.

Here is some pseudo template:

: /file/filter, proper condition, use original wm_version: use gif_gt_1mb, /image/resize robot, watermark parameters

The gist here is, that gif_gt_1mb file could pass zero files on to the wm_version step (in case the original file was below 1mb), hence the wm_version step would do nothing.

That’s all that you need. Here are the docs again: http://transloadit.com/docs/file-filter

Let me know if you need further help.

Tim