Pausar un GIF con detalles/resumen

Steve Faulkner tiene una idea inteligente aquí. Puede mostrar un GIF (animado) y superponer un botón de pausa/reproducción encima, que en realidad es un elemento details/ . summaryCuando se activa, un JPG (no animado) en el interior cubre el GIF, "deteniéndolo" efectivamente.

Adrian Roselli lo llama una forma “rápida y sucia” de pasar el Criterio de Éxito 2.2.2 de las WCAG: Pausar, Detener, Ocultar.

Lo bifurqué, cambié todas las imágenes para que mostrara primero el JPG y puse loading="lazy"las imágenes. Parece que efectivamente no carga el GIF hasta que presionas explícitamente reproducir, por lo que esa también es una opción:

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario