El <picture> El elemento tiene un truco que puede hacer donde muestra diferentes formatos de imagen en diferentes situaciones. Si todo lo que le interesa son los formatos por el bien del rendimiento, tal vez lo haría:
<picture>
<source type="image/avif">
<source type="image/webp">
<img src="https://css-tricks.com/gifs-and-prefers-reduced-motion/img/waterfall.jpg" alt="A bottom-up shot of a huge waterfall in Iceland with green moss on either side.">
</picture>Pero fíjate en esos <source> elementos allí… pueden tomar una media atributo también! En otras palabras, se pueden usar para imágenes receptivas en el sentido de que puede cambiar la imagen por una diferente, tal vez incluso una con una relación de aspecto diferente (por ejemplo, una forma de rectángulo de gran recorte en una pantalla grande frente a una forma de cerca). recortar la forma cuadrada en una pantalla pequeña).
El media Sin embargo, el atributo no tiene que 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>Eso es usar un prefers-reduced-motion consulta de medios para intercambiar un GIF por una imagen estática cuando se prefiere menos movimiento (una opción a nivel del sistema). ¡Inteligente! El otro día vi el tweet de Manuel al respecto: obtener algo de amor:
Comience con una imagen estática y reemplácela con una animación solo si los usuarios no tienen preferencia por el movimiento reducido. Mejora progresiva ❤️
CodePen: https://t.co/2knyHNiHPl pic.twitter.com/zvnuey5eU1
— Manuel Matuzovic (@mmatuzo) 9 de octubre de 2020
¿Recuerdas nuestro pequeño rif en la idea de Steve Faulkner de hace un rato? En lugar de detener por completo el GIF, puede poner imágenes animadas y no animadas una encima de la otra (dentro de un <details> elemento) y permitir que se “jueguen” a pedido. Podríamos alterar eso una pizca nuevamente y hacer que respete esta consulta de medios usando una pizca de JavaScript: