<click-to-play> —— 可点击播放的静态画面
一个渐进增强的 Web 组件，能将包含 GIF 链接和首帧图片的标记代码转换为带有“点击播放”按钮的静态画面。用户只有在点击按钮后才会加载完整的 GIF 动画，避免大体积 GIF 文件在页面加载时自动下载。
背景速读
- **Simon Willison** 是一位知名英国程序员、作家，以创建 **Datasette**（开源数据探索工具）和共同创立 **Django** Web 框架而闻名。他经常发布短小精悍的 Web 开发工具演示。
- **Web Component** 是一组原生浏览器 API，允许开发者创建可复用的自定义 HTML 标签（如 `<click-to-play>`），不依赖任何前端框架。
- **Progressive enhancement**（渐进增强）是一种设计理念：基础功能在所有浏览器上可用，高级功能（如点击播放）在支持时自动启用——这个组件符合这一原则。
- 问题背景：GIF/动画图片体积大、加载慢，影响页面性能。传统做法是直接嵌入 `<img>` 标签，无论用户是否想看到动画。这个组件让页面先显示静态首帧，用户点击后才加载完整 GIF，节省带宽、提升加载速度。