Most important thing to know about gifs: they’re based on how many colors you use! Imagine a gif’s colors as a box of crayons, if you can color your picture with 40~80 colors, you have a good gif. Now, gradients use hundreds of colors just to get from one color to another. See our example gradient below:

When you export your gif, you’ll notice it looks more like the example below:

This is because the gif has run out of usable colors (read: “crayons”). So the gif loads based on how many colors you use, and depending on the resolution. A small resolution means more animation, quicker loading time, but fewer color choices. A large resolution means more colors and less animation. Now, with Tumblr’s restrictions, you’re only given 1mB of gif to upload per photo. 1mB gives you about 40~80 colors and < 100 frames of animation, as well as a limit of 500px wide (aka low resolution). Take the example below, this is a highly gradiented picture with over 200+ colors. This would translate very poorly as a gif.

On the other hand, the photo below has exactly 4 colors, making this a very good picture to animate with, and it will load very quickly since each color is reused on so many pixels. The gif doesnt have to “put down and pick up different crayons” as it were, so it draws the frames quicker if there are fewer colors.

I hope this has helped any, and if anyone has any more questions about gifs, please ask me so I can be more clear about a specific topic.

TL;DR - Check the bold section for the optimized gif settings.