Gifs embedded in posts paused after locally downloaded

Hi,

I’m running into a problem embedding custom gifs (created with ScreenToGif) in Discourse posts. When I embed a gif, it works a moment then freezes on the first frame, e.g.:

It appears to work as expected in the post preview. And when I open the uploaded gif in a new tab, it works there too. It only freezes on Discourse itself.

I’ve tried four workarounds:

  1. uploading the gif to another website (e.g. an S3 bucket), then linking to it. That works until the system bot comes along and downloads it locally, at which point it freezes again.

  2. I also thought this might have something to do with resizing, so I tried removing the markdown formatting for the image, e.g.:

    ![](upload://4IHl8zz0sJiYl5Vm3H21YTEFo9z.gif) 
    

    instead of:

    ![example|690x383](upload://4IHl8zz0sJiYl5Vm3H21YTEFo9z.gif) 
    
  3. Since the gif worked when I followed the link to a new tab, I tried replacing the shorthand “upload” URI with the full URL of the uploaded image, e.g.:

    ![example|690x383](https://d11a6trkgmumsb.cloudfront.net/original/3X/2/1/211635b9ae2b0960e8e135299b3a91189b00c289.gif)
    
  4. Finally, I thought the problem might have something to do with Discourse’s interpretation of the markdown code, so I tried using a raw html image tag with the full URL of the uploaded image:

    <img src="https://d11a6trkgmumsb.cloudfront.net/original/3X/2/1/211635b9ae2b0960e8e135299b3a91189b00c289.gif">
    

Alas, nothing worked. If I controlled the forum where I wanted to post, I know I could disable local downloads. But alas, I don’t!

1 Like

Since it’s working here, but not on your site I suggest doing a rebuild of your site and trying again. We did lots of recent changes around gifs. For some periods we had bugs like your report and your site may be in an affected version.

2 Likes

I don’t think that’s the problem. For me, it’s not working here. I can only see the first frame.

Is it possible there’s some other chrome default setting that’s getting in the way?

Oh I can reproduce it on Chrome. So weird.

Original

Optimized via Gifscicle

After making it go via Gifscicle it works:

Thanks for reproducing. What gifcicle command did you run to optimize?

It’s a simple:

gifscicle original.gif -o fixed.gif

By the way Discourse ships with support for both autoplay mp4 and WEBP, that may give you better results!

5 Likes

I don’t think it’s a file size thing because I’ve played with much larger and small gifs to no avail.

Great let me see if this works for my actual gifs. I’ll update when I’m done.

Definitely not a file size, but a “malformed” file that gifscicle is fixing. It’s common to see some tools making bad files. I always pass my GIFs to a good tool like ffmpeg before sharing. But even then you can get easily a malformed file if dimensions are odd, for example.

GIF is a complicated format, and there are better options nowadays like MP4 and WEBP for most applications.

1 Like

Worked for all my gifs. I also had to add the --colors 256 flag in some cases.

For anyone wondering, I generated the originally buggy gifs with ScreenToGif’s “Neural Network” gif generator.

Thanks for your help @Falco

4 Likes

@nbianca any ideas why the GIF’s thumbnail isn’t animated? Seems like the original GIF is well within the limits

It is animated on Firefox. It’s either a malformed GIF / Chrome bug.

It’s not animated for me in latest FF / Windows 10.

1 Like

Interesting! Here is how it shows for me on Linux, Firefox on the left Chrome on the right:

2 Likes

All GIFs in this topic are animated for me (Chrome on Arch Linux), but current FastImage version says it is not animated because of this bug.

4 Likes

In that case we should push to get that merged sooner rather than later :+1:

For what it’s worth, I’ve found a couple cases where gifsicle doesn’t work. Specifically, sometimes using --colors 256 is required to get a working gif. But other times, leaving the flag out is necessary.

Hello,

The fix for your problem has been accepted and it is now available in the latest version.

3 Likes