BBC GEL | How to make accessible animated images Homepage Accessibility links * Skip to content * Accessibility Help BBC Account Notifications * Home * News * Sport * Weather * iPlayer * Sounds * Bitesize * CBeebies * CBBC * Food * Home * News * Sport * Business * Technology * Health * Culture * Arts * Travel * Earth * Audio * Video * Live More menu Search BBC * Home * News * Sport * Weather * iPlayer * Sounds * Bitesize * CBeebies * CBBC * Food * Home * News * Sport * Business * Technology * Health * Culture * Arts * Travel * Earth * Audio * Video * Live Close menu Menu * Home * Guidelines * Foundations * Design Patterns * How-tos * Articles * Playbooks * About UX&D * BBC Staff How to make accessible animated images How to create animated images that are safe and accessible for all. Contributors * * Published on 20 Jun 2018 Platform: Web Contents * What is an animated image? * When should you use an animated image? * Animated images vs embedded video * Animated images across the BBC * Making animated images accessible * Further reading What is an animated image? An animated image - the animated GIF being the most popular format - is more than a static image, but not quite a video. It's typically used for short animation sequences, and used to capture and communicate an idea in a way that words, a static image or a full-blown video can't quite manage. Back to top When should you use an animated image? If you're thinking about using an animated image, start by checking it's the best fit for the job. Will text, images, sound, video or interactive media be more useful? Or is an animated image the best option for ensuring your message is clear and digestible? Take your audience, subject matter and editorial principles into account. Back to top Animated images vs embedded video If you're opting to use animation, how do you choose between GIFs and embedded video? Imagine you're writing an article about the physics of a pendulum's swing. The concept of movement and timing is difficult to explain using only text or static images, so it's worth considering animation. But will a GIF or the full video player experience be best? The BBC's Standard Media Player (SMP) supports a wide variety of file formats, and puts the user in charge with controls including stop, rewind and replay. It's well-designed for video content, but it may be overkill if your animation is: * Very short * Doesn't include sound * Doesn't require sophisticated playback controls Instead, a five second animation might be all that is needed to best capture and communicate the entire idea or concept. If you do opt for animated images, bear in mind that: * GIFs are difficult to compress, so files are often large * They require relatively high levels of energy to render, so can quickly deplete mobile phone battery * There's no support for sound * They can't be controlled natively by the user, such as stopping or rewinding Back to top Animated images across the BBC There are lots of examples of animated images being put to good use around the BBC, both to convey information and to improve presentation. Here's a quick overview. Animation is great for explaining complex movement in sports. Here, BBC Sport illustrate the movement of a cricket player. Weather systems that change over time can also be effectively illustrated using animation. BBC Weather illustrates a growing storm on a hurricane-tracking map over the course of five days in Texas. Animation can also add a sense of excitement and fun to otherwise static images. CBBC uses an animated version of this image as the page header for their children's game show 'The gazumping ground'. Back to top Making animated images accessible Animated images can really enhance user experience and understanding, but there are limitations. If they're not designed in an accessible way, GIFs can be distracting or could even cause seizures. To make sure your animated images are safe and accessible for all, here's what you need to know. Alt text Just like regular images, animated images must use equivalent text to convey information to non-sighted and visually impaired users. This is especially important if the image is editorially significant . Blinking and flashing Animated images often blink or flash, which presents a number of accessibility challenges. Flashing content can cause seizures, and many people are unaware they have this disorder until it strikes. To limit the chance of triggering seizures, animated images should flash no more than three times per second. If the flashing area is small or of low contrast, these limits could be more flexible. And remember, even if your image doesn't appear to be flashing, you can't guarantee it's safe for use. For example, a clip from a news story showing a celebrity walking the red carpet might include photographers firing camera flashes off in rapid succession. The BBC mobile guidelines explain blinking and flashing. Web browser limits and flashing If you're viewing a GIF in a particular web browser, the rate of flashing may appear to be safely below the 'three times per second' rule. But remember, this can change from browser to browser. Before publishing an animated image, it's important to interrogate the file itself. Make sure you look at the setting values to find out what the possible frame rate could be in any given browser. Will a simple warning suffice? To be safe, you may consider avoiding flashing all together in an animated image. But if flashing is unavoidable and if you can't reasonably minimise it, would a warning suffice? If you've ever heard a television announcer say something like, "warning: the next segment contains some flashing images", you might think that a similar technique could be applied to web content. But warnings can easily be missed, especially by children who may be unable to read. A better approach would be to modify the image, either by slowing down the frame rate or toning down the severity of the flash, to be within safe limits. Never-ending loops A constantly looping animated image can be distracting for everyone. But for people with reading or attention disabilities, never-ending GIFs can make it difficult or even impossible to successfully read the surrounding text. To mitigate this, there should be a way for the user to pause, stop or hide any moving, blinking or scrolling information that: * Starts automatically * Lasts for more than five seconds * Is presented in parallel with other content Measuring your loops To make sure GIFs aren't distracting, you should check the total duration of your animation. If it lasts longer than five seconds, modify the image to limit the number of loops. When calculating the duration of a looping animated image, you can use the parameters defined by The WCAG guidelines : Duration of animation = number of frames x frame rate x number of repetitions For example, a simple blinking image with two frames, a frame rate of 0.5 seconds and three repetitions will have a duration of 2 x 0.5 x 3 = three seconds. Using a command line tool to find the number of loops in a GIF Developers should find this section particularly useful… Trying to measure these parameters can be complicated, especially considering the delay between frames may not be consistent. Using a tool to measure these parameters can make the job much easier. GraphicsMagick (gm) , released under the MIT License, is a good option for measuring loops. As an example, the tool could be used to find the number of loops in an animated GIF with the following command: gm identify -verbose example.gif | grep Iterations Iterations: 0 Notice that the number of iterations for the example image was set to be zero, which is equivalent to unlimited looping - much longer than our five second goal. To correct this, we can adjust the number of looping cycles. If our goal is to make the total duration five seconds or less, the formula is: Loops = Math.floor (5 / LoopDuration) In our case, with a loop duration of 2.2 seconds, we end up with two loops. Modifying the looping duration of a GIF There are lots of tools that can be used to modify the looping duration of an animated GIF. Here's how to do it using the GraphicsMagick tool. gm convert -loop 2 example.gif example.twice.gif The resulting image, which was named 'example.twice.gif', will only loop twice. If each loop duration is 2.2 seconds, we can expect the total animation to end after about four and a half seconds, safely within our five second limit. Controlling animated images The animated GIF file format (GIF89a) can result in relatively large files which, when downloaded, can cause noticeable performance problems. GIFs don't natively support play or pause functions, so if the animation is near the bottom of a web page, the five second looping duration is likely to be finished before the user ever scrolls far enough to see it. These issues can be addressed via a technique called 'lazy loading', which displays a relatively small placeholder image initially. JavaScript then listens for a predefined event, which triggers a switch from the placeholder to a full animated image. Back to top Further reading GEL guideline: The ABCs of motion BBC mobile accessibility - Flicker Wikipedia: photosensitive epilepsy BBC mobile accessibility - Images of text BBC mobile accessibility - Control Wikipedia: frame rate Back to top More from How-tos * How to design a voice experience * How to design accessible email newsletters * How to design accessible games * How to design for accessibility * How to design for children * How to design for interactive TV experiences * How to design for the web * How to design for touch * How to design forms * How to design infographics * How to design onboarding for games * How to make accessible animated images * How to make custom emojis and GIFs accessible * How to use reactions in your content * How to write text descriptions (alt text) in BBC News articles * How to write useful error messages * See all Explore the BBC * Home * News * Sport * Weather * iPlayer * Sounds * Bitesize * CBeebies * CBBC * Food * Home * News * Sport * Business * Technology * Health * Culture * Arts * Travel * Earth * Audio * Video * Live * Terms of Use * About the BBC * Privacy Policy * Privacy Policy * Cookies * Cookies * Accessibility Help * Parental Guidance * Contact the BBC * Make an editorial complaint * Careers * BBC emails for you * Advertise with us Copyright (c) 2026 BBC. The BBC is not responsible for the content of external sites. Read about our approach to external linking.