Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gmail messes up animated GIF compression #60

Open
hteumeuleu opened this issue Apr 26, 2019 · 13 comments

Comments

Projects
None yet
5 participants
@hteumeuleu
Copy link
Owner

commented Apr 26, 2019

I've seen several reports this week that Gmail messes up animated GIF compression. Consider the following code with an animated GIF (thanks to Thomas D. on Slack for providing a similar example) :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jeff.gif</title>
</head>
<body>
	<img src="https://i.imgur.com/46uC2Ny.gif" alt="" />
</body>
</html>
View original image

jeff.gif

Here's how Gmail transforms it:

<img src="https://ci4.googleusercontent.com/proxy/6dDrR2aRe8Pwb86S4hahsncaTiiSe9xKIxB1JDXPpuXYahR2jHDfKuEYCd4LLL6bi78=s0-d-e1-ft#https://i.imgur.com/46uC2Ny.gif" alt="" class="CToWUd a6T" tabindex="0">
View buggy image

buggy-jeff

The resulting image is cropping visuals around what seems to be based on the text from some of the frames of the animation. Looking at the file in Photoshop, it looks like the compression is using some kind of Coalesce algorithm to stack the frames. (Read more about GIF compression here.)

jeff-in-photoshop

A solution shared by Caleb M. on the #emailgeeks Slack is to duplicate all frames (and make them half long). So if you have four frames ABCD of each 1 second, you need to edit your GIF so it has eight frames AABBCCDD of each 0,5 second.

View fixed image

jeff-fixed

-- Attachments
PSD from the examples shared here

@hteumeuleu hteumeuleu added the bug label Apr 26, 2019

@nittygitty

This comment has been minimized.

Copy link

commented Apr 26, 2019

Has anyone else been seeing a bug in Gmail where it seems to be showing the frames of a GIF slowly, or not showing every frame?

@nittygitty

This comment has been minimized.

Copy link

commented Apr 26, 2019

The duplication of frames then halfing their length did not solve my issue.

@revelt

This comment has been minimized.

Copy link

commented Apr 26, 2019

@nittygitty Another consideration is the exact compression settings: interlacing, how many colours palette has and maybe presence/absence of embedded colour space (sRGB or whatever). Maybe your settings were different from what that suggested recipe used?

@hteumeuleu

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2019

@nittygitty Duplicating the frames does solve the problem. Here's a fixed version of your animation: https://i.imgur.com/jUTL0Cg.gif

I edited my initial post to make it clearer that each frames needs to be duplicated individually, not the entire animation.

@nittygitty

This comment has been minimized.

Copy link

commented Apr 26, 2019

@hteumeuleu that version you posted does seem to be working for me now, thanks!

@revelt

This comment has been minimized.

Copy link

commented Apr 26, 2019

we should contact somebody at Google

@hteumeuleu

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2019

I pinged their account on Twitter, but this is probably the least efficient way to do it.

@jkupczak

This comment has been minimized.

Copy link

commented Apr 26, 2019

Do we know how old this issue is?

@hteumeuleu

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2019

I have no idea. But given it was brought up on Slack three times in the past two days, I'd say this is very recent. There's no way this would have been unseen before now.

@abisse

This comment has been minimized.

Copy link

commented May 3, 2019

We found an other solution which seams to work (for now) with our email marketing solution (cheetah digital):

  • send the gif by hangout
  • copy the URI of the image created on the google servers
  • use this link in our emails

It's far from being a 'good' solution, but it does the job for us until google find a fix.

We have open a ticket on the google support here (in french).

@hteumeuleu, with your solution, how do you deal with animation (when there are a lot of short frames) ?

@hteumeuleu

This comment has been minimized.

Copy link
Owner Author

commented May 5, 2019

@abisse : So far, I did by hand in Photoshop. I duplicate every frame by hand (by clicking the "new frame" icon on each frame). And then I set the timing for those two frames.

@hteumeuleu

This comment has been minimized.

Copy link
Owner Author

commented May 10, 2019

It looks like Gmail has fixed this bug as of this morning. Can anyone else confirm?

@abisse

This comment has been minimized.

Copy link

commented May 10, 2019

I confirm that Google has fixed this bug.
Thx for your help. ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.