XionBBS

<video width="496" autoplay="autoplay" loop="loop" muted="muted">
<source src="https://cdn.tohoku.ac/f/ed63f3bb99894df9b7a79155cec6b8b9/unknown.mp4" type="video/mp4" />
<object data="https://cdn.tohoku.ac/f/d53cdb0c4ea94fbca621890dd4711e6a/unknown.png" type="image/png">
<img src="https://cdn.tohoku.ac/f/f4a7bc1cef80451d9b4a6685006380c5/unknown.gif" alt="unknown" />
</object>
</video>
This fragment is technically only valid "XHTML5" (which is not a thing), although I validate it as XHTML 1.0 Strict while ignoring only errors relating to the use of <video> and <source> elements.

It works, is HiDPI-friendly, and falls all the way back to a GIF in an <img> tag. It doesn't load any of the fallback assets unless the ones ahead of them programmatically fail outright. The only thing that is kind of quirky is that it assumes lack of <object> support is coterminous with lack of APNG support, which is a practical but not foolproof assumption.

The MP4 is the best presentation as it is downscaled in-browser even on HiDPI displays like mine (I'm iterating on this on my M1 Max). The native file resolution is 1920 by 1040. So it looks awesome, and at a CRF factor of 24 it is still under 1 megabyte.

The APNG and GIF are both downscaled quite harshly though, being 1/16th the area (quarter the width and quarter the height). However, the APNG has excellent colour reproduction (obviously) and a great deal of inter-frame optimisation as it only re-paints changed pixels. The GIF does the same thing too. Furthermore, the GIF was created with apng2gif tool which is unique in that it leverages the Wu quantisation algorithm to perform superior dithering and colour mapping even compared to Photoshop.

The animation in question is the same as that shown in the thread (https://bbs.xion.mt/index.php?topic=12.0) on efficient encoding of animated images using reverse OAM methods, although these files are originally postprocessed from the HD film by yours truly (the APNG in that thread was ripped from the Web). Long live Radical Ed :)