Add static fallback for animated images if user prefers reduced motion

  • Hi and thanks for the useful plugin!

    How can we provide static fallback images to animated images uploaded by WordPress admins in case the client user prefers reduced motion?

    Best practice seems to be: extend source set using media media=”(prefers-reduced-motion: reduce)” (Source: https://css-tricks.com/gifs-and-prefers-reduced-motion/ ). TinyPNG does not seem to handle this yet.

    So ideally when uploading (or batch optimizing) images, each animated image should add an alternative static version that should be added to the source set.

    Alternatively, we could work around a missing static alternative and hide the image altogether using CSS, provided that there was a class name indicating that a post thumbnail container has an animated image inside.

    As a workaround of a workaround, I could use add_filter( 'post_thumbnail_html' and add such a CSS class name manually. To do it properly, I would have to open each image file stream and check each GIF, webp or avif for an animation signature. More pragmatically, I currently check for a .gif string anywhere inside the thumbnail section which of only works because TinyPNG leaves animated GIFs untouched and does not make animated webp’s out of theme.

    Reading my workaround code, we can’t even be sure if the post_thumbnail_html filter will be applied before, after, or instead of what TinyPNG does.

    Trying to sum up my confusion and end with 2 simple questions:

    Is there a TinyPNG filter / hook that I should use instead of post_thumbnail_html ?

    Did I miss a setting (or paid pro function) to make TinyPNG handle animated images properly (i.e. convert GIF to webp and add a static fallback for reduced motion preference)?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Ingo Steinke (openmindculture)

    (@openmindculture)

    P.S. to avoid possible conflicts with the TinyPNG plugin, my current workaround does not use the filter anymore but checks for '.gif"' occurence in the template that calls the_post_thumbnail() and adds a class name to to an outer container without modifying <picture> or <img> elements inside.

    Plugin Author Tinify

    (@tinify)

    Hi Ingo,

    Thanks for getting in touch.

    An optional feature to generate static fallbacks for animated images certainly seems a good idea for accessibility. We will keep this in mind for future updates.

    You didn’t miss any hidden feature. I think that the workaround you describe is a good solution for now.

    Support for simultaneously compressing and converting animated images to different formats is coming in the future. Currently though we only support compressing animated PNGs without changing the filetype.

    We hope this helps!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add static fallback for animated images if user prefers reduced motion’ is closed to new replies.