Why do animated GIFs from Pillow not work in MS Teams?

[raygard]

[Continuing a discussion that started in [issue #5278], where @smccombie reports having trouble with PIL-generated animated GIFs not animating in Microsoft Teams, and also being larger than necessary. He suspected the LZW encoding had something to do with the problem, but that's not likely. Since we don't know how PIL causes the problem yet, I thought it better to be a discussion than an issue for now.]

@smccombie, this is still a mystery. Addressing first the size differences: in your latest four files, the LZW-encoded data amounts to not much difference. The first two files (from PIL) each have a total of 966 bytes of LZW data; the GIMP file has 729 bytes, and the ezgif file has 973 bytes total LZW data. Nearly all the difference in file size comes from the PIL files having a 768-byte GCT (global color table) and five 768-byte LCTs (local color tables), while the GIMP-ified file has an 8-slot 24-byte GCT and no LCTs, and the ezgif file has a 2-slot 6-byte GCT and four 6-byte LCTs (its first image has no LCT).

In your second bad file today, how did you remove the extra animation-looping (NETSCAPE2.0) application extension blocks? Can you use the same technique to remove the extra comment blocks? And, does the ezgif file work in Teams?

I looked at the second bad file for anything anomalous that could explain its not working in Teams. Nothing jumps out except the excess comments, and the "color resolution" field having a value of 0 (2 colors) while the GCT size field has a value of 7 (256 colors).

I would like you to try this patched version of your second (bad) file:

It's patched to change the color resolution to 7.

If that fails, see if you can generate the GIFs from PIL without comments. The GIMP-ified version has no comment blocks.

Keep me posted, and feel free to email me directly: raygard at gmail dot com.

[smccombie]

@raygard -- thanks for continuing to help me out, been a bit busy today to get back to you until just now. Unfortunately, that patched file also doesn't work, so the issue must be elsewhere. I'm going to try to remove the extra comment blocks, I didn't notice that earlier. I removed the extra application extensions through a home-brew script, shouldn't take me long to do the same for the comments. I'll keep you posted, thank you for checking the LZW sizes, that alleviates many of my concerns. Also I didn't realize each frame had a LCT, I thought the graphic extension had the flag set to no LCT (but I only checked the first frame). I see it is indeed set after the first frame (whoops!), going to try to strip out the LCT and see if that's the source of the problem. Shouldn't be necessary to have LCT in any of my graphics, and I thought there was a PIL patch to use just the GCT.

This file is still broken, but I've removed the LCTs:

Ok, so I also removed all of the comments and the problem went away!!!

So really the major issue was the LCT and comments (also not sure if this matters but I have a single application extension before everything), not sure if it works with a single comment though as I believe I've shown that working with GIMP before, will investigate further, but from a PIL perspective, probably just need a mechanism to disallow LCT, also I'll raise these findings with Microsoft, although I doubt they're going to do anything about it... In the mean-time, putting together some python hackery to fix things and I'll post the code here. Once again thank you for your help and everyone on the PIL team!

[raygard]

@smccombie, At this point it seems more likely that Teams does not like extra (or maybe any) comments. The first file from yesterday (from GIMP) did have LCTs on all but the first image, and you said it worked, so LCTs are not necessarily the problem.

I'm not sure how you can get PIL to generate animated GIFs without LCTs. If you just delete LCTs you may (and probably will) get a defective file. You can really only eliminate all the LCTs if they all match the GCT, I believe. Removing LCTs is an optimization that some GIF optimizers can do, by finding all the colors in all the images, reducing to 256 or fewer if there are more, and then rearranging the pixel data to use the new GCT generated from the reduced colors. That will usually alter the appearance, but not perceptibly in many or most cases.

If you can demonstrate that Teams can work with a single comment block and also use disposal=1 to get consistent a disposal method, then maybe PIL can be fixed to only write a single comment block. I would like to see the script you use to remove extra animation application extension blocks and/or comment blocks. If we can be sure that extraneous comment blocks and/or application extension blocks are a problem, then we can make that an issue and maybe get it resolved.

Another thought: maybe you can use pygifsicle to optimize them when you generate them. I think it can remove LCTs and do other optimizations, but I haven't looked into it.

[smccombie]

@raygard

Okay so I've narrowed down the 2 problems. You were correct, the LCT is not causing any problems and can be left alone (although it would be nice to have an option to use just the GCT to help reduce size, but that's not an immediate concern of mine). The multiple application extensions and comment extensions causes Teams to break. You can however have 1 comment extension without it breaking, which is the preferred behavior. The following is the code I used, which is just for debugging purposes, but helped me prove the problem. Please let me know if you're going to submit a request to have PIL remove the extraneous comments and application extensions. Thanks again for everything!

fh = open("original.gif", "rb")
bad = fh.read()
fh.close()

#REMOVE EXTRA COMMENTS (KEEPS FIRST)
ct = 0
xx = []
for i in range(0, len(bad)):
    if hex(bad[i])[2:] == "21" and hex(bad[i + 1])[2:] == "fe":
      ct = ct + 1
      xx.append(i)
print("----")
print(ct, xx)
fh = open("step-1.gif", "wb")
fh.write(bad[:xx[1]])
fh.write(bad[xx[1]+30:xx[2]])
fh.write(bad[xx[2]+30:xx[3]])
fh.write(bad[xx[3]+30:xx[4]])
fh.write(bad[xx[4]+30:])
fh.close()

#REMOVE EXTRA APPLICATIONS (KEEPS FIRST)
fh = open("step-1.gif", "rb")
bad = fh.read()
fh.close()
ct = 0
xx = []
for i in range(0, len(bad)):
    if hex(bad[i])[2:] == "21" and hex(bad[i + 1])[2:] == "ff":
      ct = ct + 1
      xx.append(i)
print("----")
print(ct, xx)
fh = open("step-2.gif", "wb")
fh.write(bad[:xx[1]])
fh.write(bad[xx[1]+19:xx[2]])
fh.write(bad[xx[2]+19:xx[3]])
fh.write(bad[xx[3]+19:xx[4]])
fh.write(bad[xx[4]+19:])
fh.close()

original:

step1:

step2:

[radarhere]

Could I get confirmation on whether any of the following images work?
6211_without_comments.gif
6211_with_comments.gif
6211_first_frame_comment_only.gif

[smccombie]

@radarhere -- it's just gray for me, I can't really tell if it's working in Teams or not, can you have it flip back and forth between 2 colors? also the yellow -> ab --> yellow --> ab --> yellow --> ab is working properly in Teams (I presume it's not supposed to loop) I haven't had a chance to look into your file, I presume that's the adjacent comments version (which implies yes that would be the ideal fix). I can try removing moving the comments around in the file as well if you'd like (before first, second, third, etc. frame #)

[raygard]

The 6211_*.gif files are one-shot two-frame animations with no loop extension, first frame is all black, second is grey, no disposal specified, 10 ms delay on each frame. I'm not sure what @radarhere is looking for, but if it's for a test in Teams, maybe it would be better with a loop. I am surprised and puzzled my yellow/ab file works in Teams; it has a loop count of 2, then two comment blocks, yellow image, another comment, then the 'a' image and the 'b' image. (Does it look the same in a web browser as it does in Teams?) So I think I still don't know what does and doesn't work in Teams.

[smccombie]

@raygard
https://user-images.githubusercontent.com/24783736/163656966-357ceba4-7c0e-4d13-af5a-0ff75271e1b8.gif
looks exactly the same in Teams and in the browser, must be there's something about the comments extensions that makes it acceptable in Teams, however if you only got one application extension, I think that's definitely a problem in the existing gif writer code and a major reason why it's working

I noticed that your AB file has the comments before the graphics control extension which is immediately followed by LZW data, perhaps that's the problem? Where-as the gif that doesn't work has comments after the graphics control extensions but before the LZW data... *shrug

[raygard]

@smccombie You may be on to something there. The gif spec has a "grammar" (Appendix B) of allowable block sequences that says the Image block must immediately follow the Graphic Control Extension block. If Teams interprets that literally it may explain the problem. Elsewhere though, the spec says (part 24 section d) "The scope of this [Graphic Control] Extension is the graphic rendering block that follows it; it is possible for other extensions to be present between this block and its target." (My emphasis there...) Contradicting the grammar.

It would be better if we follow the grammar in what we emit from Pillow.

[smccombie]

For anyone who needs a quick and dirty fix that is compatible with the Pyodide runtime:

  buf = io.BytesIO() #! NEW BINARY BUFFER
  buf.seek(0) #! REWIND OLD BINARY BUFFER
  #img[0].save(buf, append_images = img[1:], comment = str(datetime.datetime.now()), #AWAITING PIL PATCH...
  #  duration = 1000, loop = 0x0, format = "GIF", optimize = False, save_all = True) #AWAITING PIL PATCH...
  img[0].save(buf, append_images = img[1:], comment = "", duration = 1000, format = "GIF", loop = 0, save_all = True)
  tmp = buf.getvalue().split(b'NETSCAPE2.0')
  buf = tmp[0] + (b'NETSCAPE2.0') + tmp[1][:5]
  for i in range(1, len(tmp)):
    buf = buf + tmp[i][5:-3]
  buf = buf + tmp[-1][-3:]

[raygard]

@smccombie Scott, FYI I wrote some code for you to use to test out some possible fixes to your issue; see below if you have not seen it.

I am also starting on a mod to Pillow to keep comments, but only one copy of each, and place them ahead of the Graphic Control Extension block they were originally associated with. The fix_gif.py code I linked below does not do that. But maybe that will work in Teams as well. I think it's better than moving all the comments to the front or end of file. Thanks -- Ray

[smccombie]

@raygard Hi Ray, sorry about that, this fell off my plate (I found a hacky fix to keep moving) and started focusing my attention on a million other things going on at work... Let me check this out tomorrow and get back to you, thanks for keeping on top of this, really appreciate it!!

[raygard]

@smccombie Scott, I have written a program (uploaded as a gist), fix_gif.py. It will "Re-order GIF file sections if needed, so "NETSCAPE2.0" animation loop extension is immediately after header and global color table (if latter is present), followed by all other application extensions, then all comment sections (with duplicates removed), then all other sections in original order. The code may be modified easily to put comment sections and other application extensions at the end, but Pillow 9.1.0 does not work well with sections after the last image data section."

I'd like you to try it on some of the GIFs that are giving you trouble in Teams. Please let me know if this helps. If so, I'd like to get GifImagePlugin.py fixed up to put blocks in this order. If this doesn't quite do it, maybe you can experiment with the code a bit to see what block ordering does work reliably in Teams.

Also, can you please tell me what version of Pillow you are using?

[raygard]

@smccombie Scott, thanks for the feedback. @radarhere has made PR #6211 to put the NETSCAPE2.0 looping block in the right place in the front of the file and I have made PR #6300 to put the comment (only a single comment) just after the looping block.

I have taken the GifImagePlugin.py from 9.0.0 and manually merged those, plus my PR #6292 that fixes a minor bug, to make this gist. I think you can just drop it into your PIL folder and it's good to go. Not specifically tested, but I the mods have been tested separately and I think I merged them correctly.

Please give it a try. I am pretty sure these fixes will get into the next release, at least I hope so.

[radarhere]

All of the PRs have now been merged.

[radarhere]

@smccombie are you interested in compiling Pillow from main (or just copying GifImagePlugin into your existing installation) and seeing if that resolves this problem for you? Alternatively, you could just wait until the next release of Pillow, due on July 1.

[radarhere]

@smccombie Pillow 9.2.0 has now been released, so this problem should be fixed for you

[radarhere]

Ok, I've tested, and an animated GIF saved with Pillow 9.1.1 doesn't show all frames in Teams, and an animated GIF from Pillow 9.2.0 does. So I consider this resolved.