<click-to-play> — クリックで再生される静止画
<click-to-play> はプログレッシブエンハンスメントなWebコンポーネントで、GIFの最初のフレームを静止画として表示し、クリックするとGIFをオンデマンドで読み込んで再生する。大きなGIFをユーザーが再生したいときだけ読み込ませたい場合に便利。
背景メモ
Simon WillisonはDjangoフレームワークの共同開発者として知られるプログラマー・ブロガー。彼が公開している「<click-to-play>」は、ページ読み込み時に巨大なGIFアニメーションを自動再生せず、ユーザーがクリックしたときだけ読み込む「プログレッシブ・エンハンスメント」方式のWeb Components。
- 背景: GIFアニメーションはファイルサイズが大きくなりがちで、ページの読み込み速度を著しく低下させる原因になる。従来はJavaScriptライブラリ（LazyLoadなど）やプレイヤー埋め込みで対応してきた。
- このコンポーネントの特徴: 通常の<img>タグの代わりに、静止画のサムネイル＋再生ボタンを表示し、クリックで初めてGIFを動的にロードする。HTMLのカスタム要素として書かれているため、フレームワークに依存しない。
- 応用例: 同じWillisonの別記事（Datasetteの新機能デモ）で、操作手順をGIFで見せるためにこのコンポーネントが使われている。