Color Me Gmail: Solve for Gmail’s Image Proxy Changing the Colors of Your GIFs

Recently, we’ve heard rumblings from email geeks asking “Why is my GIF showing up with different colors in Gmail?” As we haven’t seen this issue with our GIFs at Litmus, we were wondering why our GIFs seem to have escaped this quirk and how we could help other email geeks avoid it. So let’s dive in and share what we found.

• Why Gmail changes the colors of your GIFs
• What is happening to your GIFs (with examples)
• How to fix Gmail changing the colors of your GIF

Why, Gmail, why?!

Our first question was the obvious, “Why?” The simple answer is that Gmail has been having issues with images since they started caching images using a proxy server back in 2013. Though the color changing may not have been one of those issues, some of those issues have been addressed (like an issue with GIFs being compressed incorrectly when they included text). However, this color changing one doesn’t seem to have been addressed yet.

But what specifically is happening? Well, from what we can determine, when Gmail caches an image on it’s proxy servers, it runs the images through a compressor which cuts colors out of the color table for GIFs. This results in some GIFs changing colors. We’ll go into the specifics later in this article, but that’s the basics of why your GIF is changing colors. When a color is cut out, the GIF will replace it with one of the colors that’s left in the color table that is closest to the original color.

A needle in a haystack

One of the first things we discovered, and probably why this issue hasn’t been fixed yet, is that it’s rather difficult to recreate. So if you find your images changing colors then consider yourself lucky… well maybe not lucky, but you are in the minority.

The lovely Lily Worth created a couple of different GIFs for us to test, and none of them visibly changed colors. But upon further inspection, all of them had colors removed from their color table by Gmail.

With these simple GIFs:

Gmail removed 24 and 19 colors respectively which resulted in the GIFs looking like this:

Not a difference that you can see. And this is the case with most of the GIFs that Litmus creates. We don’t see a visible difference between the original version and the Gmail version, even when colors are removed, which is probably what Gmail is going for.

However, in some cases, the color that is removed is a very crucial color. As seen in these GIFs from Tiffani Davidson at Thimble. The original GIF has 127 colors.

The Gmail version has 125 colors, only a difference of two colors. However, one of those colors that Gmail removed was white, which resulted in the GIF appearing in the email with a very faint green-tinged background instead of the white:

If that color had been a small part of the GIF animation, then it wouldn’t have been noticeable. However, it was a major background component and so it is very obvious in the email.

Another place where the color changing was more obvious was when gradients were used. To test this, we added gradients to our initial GIFs. Here are the two GIFs with smooth background gradients:

However, once these have been put through the Gmail proxy, the gradients are a bit more choppy. If you look closely, colors have been removed and the gradients now have lines between them.

In the above GIFs, Gmail removed 60 colors in the cat conveyor belt, but only 6 colors in the color changing cats.

This is the most common version of Gmail dropping colors that we’ve noticed in our emails. A recent email that we sent had a smooth gradient everywhere except in Gmail as seen here:

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.

Blend modes

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:

Then, we’ll wrap the animation with a span. We’ll add a background color and have the span be a block element to ensure the background is behind the entire animation:

The background color we used here is the light green that Gmail is converting the white background to.

Next, we add the class. And here’s the tricky part: We add the class to both the span and the image.

When we add the class to the span, the background color becomes the difference between the light green and white:

The result? When we add the image on top, that dark background color is blended with the light green of the image to bring it back to white:

There’s a technical formula for how the blend mode works, which Remi goes into and provides further blogs if you want to fall down a (very interesting) rabbit hole. But what it boils down to is:

White background – light green background – light green background = white background

Which makes a lot more sense than me trying to explain it with numbers and equations.

This solution only works if Gmail is changing the white color in your animation and your animation is sitting on a white background. If there’s another color being changed or a gradient being changed, then you’ll have to fall back to resaving your image—but it’s a great quick fix to keep in your back pocket for when you need it.

Get your GIF on

So there you have it. Maybe not the most satisfying solution as to why Gmail is wreaking havoc on your images, but at least you can be the email hero and offer solutions the next time you see your images showing up weirdly in Gmail. And the best way to be an email hero? Make sure to test your emails in Litmus before you send so you can catch those image issues and ensure your emails are looking their best when they hit your subscribers’ inboxes.

Want more on GIFs? Check out our guide to animated GIFs in email.

Ensure a great subscriber experience Test your emails in 90+ email clients, apps, and devices. And send on-brand, error-free emails. Every time. START YOUR 7-DAY FREE TRIAL