Using GIFs in the header

Using GIFs on Tumblr can sometimes be problematic – they have a filesize limit of 1.5MB, but they also seem to have some ‘hidden limits’ related to the complexity of the GIF… things such as color density, speed and length can come into play too.

There is a way to get around the upload limit if you’re happy to customize the theme a little, and are able to host the GIF image somewhere else on the web.

On your Customize page, open up the Edit HTML panel and find lines 1300 – 1305:

var images = [ ‘{HeaderImage}’
{block:IfHeader2Image}, ‘{image:Header 2}’{/block:IfHeader2Image}
{block:IfHeader3Image}, ‘{image:Header 3}’{/block:IfHeader3Image}
{block:IfHeader4Image}, ‘{image:Header 4}’{/block:IfHeader4Image}
{block:IfHeader5Image}, ‘{image:Header 5}’{/block:IfHeader5Image}
];

This is where the theme decides which image to show on each page load. You could replace one (or several) of the images with your own URL, like this:

var images = [ ‘{HeaderImage}’
{block:IfHeader2Image}, ‘{image:Header 2}’{/block:IfHeader2Image}
{block:IfHeader3Image}, ‘{image:Header 3}’{/block:IfHeader3Image}
{block:IfHeader4Image}, ‘{image:Header 4}’{/block:IfHeader4Image}
, ‘http://your-website.com/your-image.gif’
];

The above would replace the Header 5 image with your own custom one. Then just hit Save and you should be all set.