<click-to-play> — a still that plays
Simon Willison introduces a progressive enhancement Web Component called <click-to-play> that transforms a linked GIF into a still image with a play button, loading the GIF only when the user clicks. This avoids loading large GIFs until the user chooses to play them.
Background
Simon Willison is an influential web developer, creator of the Datasette open-source tool for exploring data, and a long-time advocate of progressive enhancement (a design philosophy that web features should work on a baseline level even without JavaScript, then be improved for capable browsers). This post introduces a tiny custom HTML element he built called `<click-to-play>` — a "Web Component" (a reusable piece of self-contained UI code using browser-native standards). The problem it solves: animated GIFs are large and slow to load. Instead of forcing every visitor to download the GIF upfront, the component shows a static placeholder image (the first frame) and only loads the actual animated GIF when the user clicks a play button. He specifically created it for a blog post about Datasette's new row editing tools, where he wanted to show an animated demo without slowing down the page for everyone.