How to display an animated GIF in a github README file?

Question

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?

Answer 1

if your gif is inside the repository you can do this

![alternative text](path to your gif)

for example you have the gif in the root directory then

![any alternative text you want ](./gifname.gif)

Answer 2

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%"/>

Answer 3

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)

Answer 4

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.