Long ago at the end of the 19th century, a man by the name of Eadweard Muybridge studied locomotion by capturing still photographs of bodies in motion. Chances are you have seen these photographs as still images, but also as an animated GIF made from those still photographs. The GIF (Graphics Interchange Format) has been the de facto file format for online animated images since 1995. Today, they are commonly used to propagate memes, grab attention, succinctly explain a step-by-step process, and otherwise communicate visual information quickly. We see them in news articles, our social media feeds, and even in instruction. Are they an element you would consider incorporating into the banner of your online course?

Why use an animated GIF as the banner for a course?

At the moment, Blackboard supports animated GIFs for course banners. WordPress does as well. The GIF format introduces the dimension of time to images, and the ability to show change. It is an opportunity for imagery to serve as a visual hook that evokes emotion, inspires inquiry, or visualizes complex information. These types of images are meant to be attention-getters.

Why use an image format with a larger file size and accessibility challenges?

While GIFs do add visual impact, there are some critical considerations that should inform your decision to use one. First, the file format produces notoriously large files, much larger in terms of file size than most other online image formats. An animated GIF is really many images within what appears to be a single file, like frames of a movie. The more frames a GIF contains the larger the file size. Each frame is a single image that must be optimized to ensure the overall animated image isn’t so large that it takes a prohibitive amount of time to load. Long load times are already problematic on slow internet connections here in Alaska. As a general guideline, animated GIFs should be limited to 2MB and smaller. If that isn’t possible, reconsider the idea you are trying to convey with the animation and how it can be communicated more efficiently.

The second consideration is accessibility. If a picture is worth a thousand words, an animated GIF is worth volumes. That being said, not all people view images conventionally when browsing the web. Instead, they rely on descriptive text to understand image content. Providing a description of an image by adding ALT (alternative) text is one way to ensure everyone is able to access the meaning of an image. When using an animated GIF, consider how to effectively describe the animation so that it is easily understood by all.

Making GIF banners

There are many tools available for creating animated GIFs. Some tools are better and easier to use than others. For the novice creator, online tools such as Gifs.com, Giphy Capture, Giphy Editor, and Vimage (mobile) make the process easy, but be mindful of the image file sizes. For the expert creator, Screenflow and Photoshop are tools full of features for creating GIFs that offers options for both image composition and for optimization.

When creating a banner for a course shell you have some flexibility. Blackboard recommends that image dimensions be 480px by 80px. Here at UAF CTL, we recommend 800x by 150px. Use these recommendations to set the dimensions when designing your banner.

Further Resources
The Ultimate Guide to GIF Design
We’ve already explored why we might use an animated GIF for instruction.
A deeper dive into animated GIFs – the Intro to Animation module in my CITS F221 class
Find Open-licensed Media