The original version has 256 colors, where the Gmail version has 131. That’s a whopping 125 colors removed by Gmail and results in those very obvious lines through the gradient background in the animation.
In most of the above cases, the reduction of the color table results in smaller image sizes, so our guess is that Gmail is trying to optimize the images a little in an effort to make sure the files are as small as possible. However, in the case of Tiffani’s image, the Gmail version actually has a larger file size, so maybe there’s some other goal that Gmail is trying to achieve. Possibly the color table changes are just an artifact of Gmail scanning the images for security purposes. Either way, we may never know—but what we do know is that since Gmail is reducing the color tables, we have something we can do to try and solve the issue.
How to get your GIFs back to looking amazing
As you can see, there are lots of ways that Gmail can mess up your GIFs, so there are several things you can do.
If the color shift is subtle, such as with the cat GIFs above, you can get away with doing nothing. But if your color shift is obvious, such as with Tiffani’s GIF, then you should consider exploring other options:.
Resave your GIF
The next solution is to resave your GIF with less colors in the color table. This allows you a bit more control over how the image is optimized. When you save your GIF with a smaller color table, there are less colors for Gmail to cut out. Essentially you’re telling Gmail which colors are the most important for your image.
Knowing that Gmail may add artifacts and remove colors, you can save your GIF at different color tables (32, 64, 128, and 256). Then, you can test your emails in Litmus to find out which GIF looks good in Gmail without sacrificing the look in other email clients.
In some cases you’ll be able to stay pretty close to the original. Here are different versions of an animation saved at 256, 128, 64, and 32 colors from top to bottom, as seen in Gmail:
In this case, everything shows up with the lines through the gradient, but the 128 color version is slightly better than the other versions.
But in some cases, you’ll have to go down to 32 colors:
In this case, the light green background stays until the animation is saved at 32 colors.
This option is a little more technical, but if you don’t have the original GIF or a way to resave the GIF, this option could work in some cases. Remi Parmentier brought CSS blend modes to my attention as a fix for keeping text light in Gmail apps, but he pointed out it would work in this case as well.
CSS blend modes are used to calculate how an element’s color mixes with the color of the element’s parent. Simply put, you can use blend modes in CSS to alter how colors behave. In this case, we use the mix-blend-mode CSS property, and the difference blend mode. First we’ll set up the class, and we’ll target it with
u + .body so that it only occurs in Gmail:
Blog – Litmus