GIFS y prefiere-movimiento-reducido

El pictureelemento tiene un truco que puede hacer donde muestra diferentes formatos de imagen en diferentes situaciones. Si lo único que le interesa son los formatos por motivos de rendimiento, tal vez haría lo siguiente:

picture  source type="image/avif"  source type="image/webp"   img src="img/waterfall.jpg" alt="A bottom-up shot of a huge waterfall in Iceland with green moss on either side."/picture

Pero observe esos elementos allí… ¡también sourcepueden tomar un atributo! mediaEn otras palabras, se pueden utilizar para imágenes responsivas en el sentido de que se puede cambiar la imagen por otra diferente, tal vez incluso por una con una relación de aspecto diferente (por ejemplo, una forma de rectángulo de recorte amplio en una pantalla grande frente a una de corte estrecha en una pantalla grande). recortar forma cuadrada en una pantalla pequeña).

Sin embargo, el mediaatributo no tiene por qué estar relacionado con el tamaño de la pantalla. Brad Frost documentó este truco hace un tiempo:

picture  source media="(prefers-reduced-motion: reduce)"/source   img alt="brick wall"/picture

Se trata de utilizar una prefers-reduced-motionconsulta de medios para cambiar un GIF por una imagen estática cuando se prefiere menos movimiento (una opción a nivel de sistema). ¡Inteligente! El otro día vi el tweet de Manuel sobre cómo conseguir algo de amor:

https://twitter.com/mmatuzo/status/1314430894090981376?s=12

---

¿Recuerdas nuestro pequeño comentario sobre la idea de Steve Faulkner de hace un momento? En lugar de detener completamente el GIF, puedes colocar imágenes animadas y no animadas una encima de otra (dentro de un detailselemento) y permitir que se “reproduzcan” un pedido. Podríamos modificar eso un poco nuevamente y hacer que respeta esta consulta de medios usando un poco de JavaScript: