Here’s the thing: I want my website to look a little gross to people. I want people to see the star background and pixelated images, flailing attempts to escape rigid organization at the expense of discoverability, and I want them to think ah, this is not Optimized for my User Experience. I want people to see a bunch of tacky animated GIFs and think “oh my God, didn’t we all get past that?” I want it to be abundantly clear from the get-go that I made this as an expression Of Me, not a consumable For You.

But I don’t actually want visitors with vestibular disorders to get physically sick.

Browsers ought to do a better job than they do to solve GIFs on the client-side. It’s obvious that this is possible because browser extensions have a bunch of options that make sense.

Instead, the MDN advice is to use a jQuery plugin to add controls to your GIFs. While the result is great, as an engineer thanks I hate it.

Over on my little neocities page about webmentions I recommended using js to replace a static version with an animated version where it’s safe, using a built-in browser feature that can tell you whether someone has requested less animation. This has the best safe fallback behavior. However, needing to create multiple versions of all your assets is a pain, and therefore discourages the fluid transclusion and reappropriation that I love in GIF culture.

So I’ve made a script that just deGIFs things. If someone has prefers-reduced-motion set, I have js that’ll go through the page, find every img element that has a gif as a source, and replace it with the first frame of that gif drawn onto a canvas element.

This won’t help:

  • people who don’t know about setting prefers-reduced-motion
  • people who have prefers-reduced-motion set but JavaScript disabled
  • people whose real beef with GIFs is what they do to the page size

but I think it’s probably good enough for now.