This repository serves as a test of animated WebP support in GitHub and VS Code MarkDown previews when a WebP image is embedded in the MarkDown document as an image.

Test image courtesy of Mathias Bynens.

https://caniuse.com/#feat=webp

• Supported in web browsers
• Supported in VS Code MarkDown preview
• Supported in GitHub MarkDown preview

For animation in MarkDown, the current options include:

• SVG with CSS animation: vector, performant, well compressible in transit
• GIF: raster, old, big, slow and ugly, should not be used for anything ever

The following are unfortunately not well supported:

• MP4: GitHub supports video, VS Code preview I don't know https://github.blog/2021-05-13-video-uploads-available-github
• APNG: might be an option actually: https://caniuse.com/#feat=apng
• MNG: no support information on CanIUse, likely not well supported

• Use SVG when the animation benefits from vector rendering
• Use WebP for static images or raster animations
• Use videos when targetting GitHub preview, will show up as path text elsewhere

I am leaning towards WebP as it is newer and is well supported now, but it would be good to put some numbers behind this.

GitHub rolled this out recently, maybe VS Code has as well or there is an extension to recommend?