<click-to-play>

Tap the still.
It plays the motion.

A web component that progressively enhances an ordinary linked image. With no JavaScript it's a plain link to a GIF. With the element defined, the click is caught, the GIF is preloaded in the background, and the still is swapped for it — playing from the very first frame the instant it's decoded. Just write <click-to-play><a href=motion.gif><img src=still.jpg></a></click-to-play>.

A still frame of a ball; tap to play the bounce

state: still → tap → loading → playing  ·  tap again to return to the still

A.

The button stays legible on any image

A still on a light background; tap to play Light image. Translucent dark disc + blur keep the icon readable.
A still on a dark background; tap to play Dark image. The white ring and triangle hold their contrast.
B.

How it enhances

Plain, linkable markup

An <a> pointing at the GIF wraps an <img> of the still. Visible, crawlable, and clickable with zero script.

Catch & preload

The element intercepts the click, holds the navigation, marks itself loading, and fetches the GIF off-screen via new Image().

Swap on decode

Once the GIF is ready, its data URL replaces the still's src, so playback starts cleanly at frame one.

C.

The component

click-to-play.js
D.

Drop it in

<script src="click-to-play.js"></script>

<click-to-play>
  <a href="motion.gif">
    <img src="still.jpg" width="600" height="400" alt="…">
  </a>
</click-to-play>