11

this question may sound silly but if I understood correctly Github is unable to display MP4 video files in a README.md, however it is possible to display an animated GIF. Am I right? I was wondering where is the best practice to store that animated GIF file, in the repository itself?

Jake Worth
  • 5,490
  • 1
  • 25
  • 35
Zoltan King
  • 1,964
  • 4
  • 18
  • 38
  • Does this answer your question? [Is there a way to add a gif to a Markdown file?](https://stackoverflow.com/questions/34341808/is-there-a-way-to-add-a-gif-to-a-markdown-file) – faround Feb 06 '20 at 13:00

3 Answers3

11

GitHub supports GIFs in READMEs. Here's an example, using Markdown, that I tested on a GitHub repository.

![hippo](https://media3.giphy.com/media/aUovxH8Vf9qDu/giphy.gif)

GIFs inside the repo can be used, too. This link format seems stable:

![til](https://raw.githubusercontent.com/hashrocket/hr-til/master/app/assets/images/banner.png)

Relative paths work too:

![til](./app/assets/images/banner.png)

I think a best practice would be to host the GIF online using a service like Giphy. If it's stored in the repo, anyone who clones that repo will have to download the GIF onto their machine. Unless it's also integral to the application, you might let an external service handle the hosting.

Jake Worth
  • 5,490
  • 1
  • 25
  • 35
  • 1
    Just a side note: the GIF can also be hosted inside the repository. In this case, it needs to be accessed using a relative path or `https://raw.githubusercontent.com////`. The problem is that this would be a binary file in a github repo... – dan1st Feb 06 '20 at 14:54
  • 1
    One last thing: it seems that github also supports relative paths to images (e.g. `./animation.gif`) in markdown files... – dan1st Feb 06 '20 at 15:00
  • @dan1st I tested that too and it worked; answer updated. – Jake Worth Feb 06 '20 at 15:12
2

There is one easy way. Upload your gif to the repo then copy the address of your gif. For example, I uploaded a gif named me.gif. Here is the link.

https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif

then just put in the README.md

![me](https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif)
Daisy
  • 288
  • 3
  • 8
0

You can also do this:

Relative path:

<img src="./assets/image.gif"/>

or image from the internet

 <img src="https://media3.giphy.com/media/aUovxH8Vf9qDu/giphy.gif
"/>

Another advantage is that you can specify your own width and height:

<img src="./assets/image.gif" width="50%" height="50%"/>
Hrvoje Čukman
  • 421
  • 4
  • 12