< img src=" https://websitedesign-usa.com/wp-content/uploads/2020/11/gifs-and-prefers-reduced-motion.png" class="> ff-og-image-inserted “> The< photo > aspect has a technique it can do where it reveals various image formats in various circumstances. If all you have an interest in is formats for the sake of
< photo >< source srcset=" img/waterfall. avif "type =" image/avif ">< source srcset=" img/waterfall. webp" type=" image/webp" >
< img src=" img/waterfall.
media characteristic does not need to be screen-size associated though. Brad Frost recorded this technique a while back:
<< pre rel> <=" HTML" class=" wp-block-csstricks-code-block language-markup" data-line >< image >< source srcset=" no-motion.
< img srcset=" animated.gif" alt=" brick wall" >.
That is utilizing a prefers-reduced-motion media inquiry When less motion is chosen (a system-level option), to switch a GIF for a fixed image. Smart! I saw Manuel's tweet about it get some like a few days ago:
< figure class=" wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter "> Remember our little rif on Steve Faulkner's concept from a bit back? Instead of completely stopping the GIF, you can put non-animated and animated images on top of each other (inside a