Discord Embed Components slideshow

If the title is confusing, here's what it looks like:

(If your browser doesn't support AVIF yet, you must be really confused. You can see it on the Home page if not.)

That is a 581 KB animated avif file (encoded via SVT-AV1 at q70). With the new Discord Embed Components feature, this make-shift slideshow built to resemble exactly how the live highlights carousel on the actual home page looks is displayed on all Discord clients when a link to the home page is sent. You can try it out today!

This isn't noteworthy enough to make a real announcement, but it's part of a larger plan I have to improve the embeds for Discord with their new feature, maybe you'll even see this on every article with a carousel.

This is possible with ImageMagick (imagick) and libavif (avifenc/SVT-AV1). It is rendered every home page refresh (previously every 15 minutes, now 10) and updates quickly based on what's actually on the home page at the time.

Discord's proxy does, however, convert it to a much larger 4.4MB lossy animated WebP, but they do store the original avif, so I'm hoping that they request the right format on compatible clients in the future.

As an additional note, speaking of compatible clients: AVIF is now supplied to compatible browsers as a variation of every WebP image/thumbnail. The amount of images loaded on the home page (in terms of file size) is smaller than the home page's CSS!

The source code is available on the ObbyWikiHomePage extension on GitHub under MIT, so you can see exactly how it works, or even run it yourself!

obbywiki/mediawiki-extensions-ObbyWikiHomePageThe custom home page for the Obby Wiki.00