Use static images for users that prefer "reduced motion"

[oskarrough]

The reduced-motion media query is something users can control on the OS-level. This article explains how to use it, like any other media query, inside the <picture> element to show a static image instead of a gif: http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/

This is pretty neat for performance and we already have the picture element in place in https://github.com/internet4000/radio4000/blob/master/app/components/channel-cover/template.hbs

[nellarro]

@oskarrough. I'd definitely love to take this on! Can you assign it to me?

[oskarrough]

@nellarro with pleasure, thank you! Let us know if we can assist in any way.

The radio cards we have everywhere on the site is called channel-card. Inside it there is a channel-cover component, which contains all the responsive image logic. We'd have to implement the media query here. We already skip gifs for screens below 500px. Maybe modify this media query to include reduced motion as well?

• https://github.com/internet4000/radio4000/blob/master/app/components/channel-card/template.hbs
• https://github.com/internet4000/radio4000/blob/master/app/components/channel-cover/template.hbs

[nellarro]

Thanks so much! I'll get to working on it ASAP :)