Skip to content

A query in WebP support in browsers and MarkDown previews on GitHub and in VS Code

License

Notifications You must be signed in to change notification settings

TomasHubelbauer/markdown-webp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MarkDown Animated WebP

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.

Support

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

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

Alternatives

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:

Takeaway

  • 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

To-Do

Compare APNG and WebP size and ease of generation to focus recommendation

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.

Test out whether VS Code preview can handle video too now

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

Test out APNG and MNG in GitHub and VS Code MarkDown previews

About

A query in WebP support in browsers and MarkDown previews on GitHub and in VS Code

Topics

Resources

License

Stars

Watchers

Forks