Is there a way to add a gif to a Markdown file?

Question

I want to add this gif to a GitHub flavored markdown file. If it can\'t be done in GitHub, is it possible to do it in another version of markdown?

Answer 1

Showing gifs need two things

1- Use this syntax as in these examples

![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)

Yields:

2- The image url must end with gif

3- For posterity: if the .gif link above ever goes bad, you will not see the image and instead see the alt-text and URL, like this:

4- for resizing the gif you can use this syntax as in this Github tutorial link

<img src="https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40" height="40" />

Yields:

Answer 2

Upload from local:

1. Add your .gif file to the root of Github repository and push the change.
2. Go to README.md
3. Add this ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
4. Commit and gif should be seen.

Show the gif using url:

5. Go to README.md
6. Add in this format ![Alt text](https://sample/url/name-of-gif-file.gif)
7. Commit and gif should be seen.

Hope this helps.

Answer 3

1. have gif file.
2. push gif file to your github repo
3. click on that file on the github repo to get github address of the gif
4. in your README file: ![alt-text](link)

example below: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)

Answer 4

just upload the .gif file into your base folder of GitHub and edit README.md just use this code

![](name-of-giphy.gif)

Answer 5

Giphy Gotcha

After following the 2 requirements listed above (must end in .gif and using the image syntax), if you are having trouble with a gif from giphy:

Be sure you have the correct giphy url! You can't just add .gif to the end of this one and have it work.

If you just copy the url from a browser, you will get something like:

https://giphy.com/gifs/gol-automaton-game-of-life-QfsvYoBSSpfbtFJIVo

You need to instead click on "Copy Link" and then grab the "GIF Link" specifically. Notice the correct one points to media.giphy.com instead of just giphy.com:

https://media.giphy.com/media/QfsvYoBSSpfbtFJIVo/giphy.gif

Answer 6

From the Markdown Cheatsheet:

You can add it to your repo and reference it with an image tag:

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Inline-style:

Reference-style:

---

Alternatively you can use the url directly:

![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)