I hate animated gifs. I really really do. For a million accessibility reasons. But I also love HostGator. They’re an awesome web host, and I use them for my other websites and will be moving the files for this blog onto my hosting over there soon so they can have a happier home.
In any event, I wanted to promote a special they have just for WordPress users and put the ad for that in my blog sidebar. Unfortunately, none of the graphics for the special were of a size to fit neatly into my sidebar, and they moved too fast (timed around 2-3 seconds before the text change). Thankfully, I was able to find a compromise between what I want in keeping my site accessible, and what I had as options from the premade HostGator advertising images for the WordPress special.
I decided that I could not possibly be the only person to have this problem, so here’s how I managed it.
The Problem
Since I avoid animated gifs like the plague normally, but was limited to being able to use HostGator images only, I needed to find an easy solution that did not involve me having the files they used to make it. I needed to be able to resize the animated gif to fit in my sidebar better, and while I was at it, I wanted to see if it was possible to slow down the animation speed to be more accessible.
The Solution
I started off doing it the easy way. The image had two views only where text was different, so I took a screenshot of each version of the graphic as it changed text, and cropped them down to just the ad image. I put both in Photoshop as two separate layers on a project, and followed these instructions on how to resize animated gifs from there. Voila! I have a resized gif that now changes in 5 second intervals instead.
