Animated PNG Maker

Auto-playing animations can cause real harm to users with vestibular disorders, epilepsy, and attention-related conditions. The Web Content Accessibility Guidelines (WCAG) 2.1 include specific requirements for moving content, and failing to meet them can exclude a significant portion of your audience — and expose your organisation to legal risk in jurisdictions where web accessibility is mandated.

Why Animated GIFs Are a Specific Risk

Unlike video elements, GIFs have no native pause control. They start playing immediately when the page loads and loop indefinitely by default. There is no built-in mechanism for a user to pause, stop, or hide a GIF without using browser extensions or disabling images entirely. This makes GIFs uniquely problematic from an accessibility standpoint compared to HTML5 video, which can be given controls and respects the prefers-reduced-motion media query natively.

Vestibular disorders affect approximately 35% of adults over 40, and symptoms can be triggered by motion on screen — particularly flashing, flickering, or rapid movement. For users with photosensitive epilepsy, content that flashes more than three times per second can trigger seizures. Even for users without these conditions, auto-playing animations are a significant source of distraction and cognitive load, particularly for users with ADHD or attention-related conditions.

WCAG 2.1 Requirements for Moving Content

Criterion	Level	Requirement
2.2.2 Pause, Stop, Hide	AA	Moving content that starts automatically, lasts more than 5 seconds, and is presented alongside other content must be pausable, stoppable, or hideable.
2.3.1 Three Flashes or Below Threshold	A	Content must not flash more than three times per second, or the flash must be below the general and red flash thresholds.
2.3.3 Animation from Interactions	AAA	Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality.

Criterion 2.2.2 is the most directly relevant to GIFs. If your GIF loops indefinitely and is displayed alongside other page content (which is almost always the case), you are required at WCAG Level AA to provide a mechanism to pause or stop it. A GIF that plays once and stops is exempt from this requirement, as is a GIF that is the only content on the page.

Implementing prefers-reduced-motion

The prefers-reduced-motion CSS media query lets you detect when a user has requested reduced motion in their operating system settings. This is the most important accessibility improvement you can make for animated content — it's a single CSS rule that respects the user's explicit preference.

For GIFs, the most practical approach is to use the GIF as a background image and set animation-play-state: paused when reduced motion is preferred. However, since GIFs don't use CSS animations, a more reliable approach is to swap the GIF for a static PNG using JavaScript:

// Replace GIFs with static images when reduced motion is preferred

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {

document.querySelectorAll("img[data-static-src]").forEach(img => {

img.src = img.dataset.staticSrc;

});

}

Adding a Pause Button

For GIFs that must loop (where stopping is not an option), you can implement a pause mechanism by toggling between the animated GIF and a static PNG of the first frame. This is a common pattern used by major websites including Twitter and Slack:

function GifWithPause({ src, staticSrc, alt }) {

const [paused, setPaused] = useState(false);

return (

<button

onClick={() => setPaused(p => !p)}

aria-label={paused ? "Play animation" : "Pause animation"}

style={{ position: "absolute", bottom: 8, right: 8 }}

{ paused ? "▶" : "⏸" }

</button>

</div>

)

}

Writing Meaningful Alt Text

Alt text for animated GIFs should describe what the animation shows, not just what it depicts statically. A GIF of a loading spinner should not have alt text of "loading spinner" — it should say "Loading indicator, please wait" or simply have an empty alt attribute if it's purely decorative. A product demo GIF should describe the action being demonstrated: "Screen recording showing how to upload a file by dragging it to the drop zone."

For complex animations that convey significant information, consider providing a text alternative below the GIF that describes the content in full. This serves screen reader users, users who have disabled images, and users in low-bandwidth environments where the GIF may not load.

The Flash Threshold

WCAG 2.3.1 requires that content not flash more than three times per second. For GIFs, this means avoiding rapid alternation between high-contrast states — for example, a GIF that alternates between a white frame and a black frame at 4 fps would violate this criterion. The threshold applies to any area larger than 25% of the viewport, so small GIFs are less likely to trigger it, but large hero animations are at risk.

In practice, most well-designed animations don't approach the flash threshold. The risk is highest with deliberately flashy effects (strobe-style animations, rapid colour cycling) or with poorly optimised GIFs that produce unintended flicker due to palette quantisation artefacts. If your GIF flickers visibly, it's a sign that the palette is too small for the content — increase the colour count or switch to a better dithering algorithm.