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

Markdown Problem Overview

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?

Markdown Solutions

Solution 1 - Markdown

Showing gifs need two things

1- Use this syntax as in these examples

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

Yields:

Alt Text

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:

Alt Text

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: https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40" height="40" />

Solution 2 - Markdown

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: ![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"

Alternatively you can use the url directly:

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

Solution 3 - Markdown

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

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

Solution 4 - Markdown

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

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

Solution 5 - Markdown

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

Solution 6 - Markdown

Upload from local:

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

Show the gif using url:

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

Hope this helps.

Solution 7 - Markdown

Another simpler way is to open your git repository in your browser (chrome), click on edit README.md

then just drag drop your gif/png/jpeg file from your local machine disk and automatically the file will be uploaded and link will be placed in README.md file, like shown below

![myfile](https://user-images.githubusercontent.com/52455330/139071980-91302a8a-37b1-4196-803e-f91b1de2ee5b.gif)

myfile

The file you wanted to be added

myfile

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

Solution 8 - Markdown

If you can provide your image in SVG format and if it is an icon and not a photo so it can be animated with SMIL animations, then SVG would be definitely the superior alternative to GIF images (or even other formats).

SVG, like other image formats, could be used with either standard markup or HTML <img> element:

![image description](the_path_to/image.svg)

<img src="the_path_to/image.svg" width="128"/>

https://raw.githubusercontent.com/mahozad/mahozad/master/logo.svg" width="128"/>

Solution 9 - Markdown

Using HTML's img tag then giving a source url.

<img src="https://...thumbs-up.gif">

Solution 10 - Markdown

in addition to all answers above:

if you want to use a gif for your github repository README.md and don't want to address it from your root directory, it's not enough if you just copy the url of your browser, for example your browser URL is sth like:

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif

but you should open your gif in your github account and right click on it and click copy image address or sth like that which is sth like this:

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif?raw=true

Solution 11 - Markdown

you can use ![ ](any link of image)

Also I would suggest to use https://stackedit.io/ for markdown formating and wring it is much easy than remembering all the markdown syntax

Content Type	Original Author	Original Content on Stackoverflow
Question	Zaynaib Giwa	View Question on Stackoverflow
Solution 1 - Markdown	Khaled Annajar	View Answer on Stackoverflow
Solution 2 - Markdown	erip	View Answer on Stackoverflow
Solution 3 - Markdown	Nhu Phan	View Answer on Stackoverflow
Solution 4 - Markdown	Vishal Shelake	View Answer on Stackoverflow
Solution 5 - Markdown	Jordan Arnesen	View Answer on Stackoverflow
Solution 6 - Markdown	Sumit	View Answer on Stackoverflow
Solution 7 - Markdown	Santosh Karanam	View Answer on Stackoverflow
Solution 8 - Markdown	Mahozad	View Answer on Stackoverflow
Solution 9 - Markdown	Njuguna_nc	View Answer on Stackoverflow
Solution 10 - Markdown	kia nasirzadeh	View Answer on Stackoverflow
Solution 11 - Markdown	Faizan.shaikh	View Answer on Stackoverflow