Is there a way to add an animated GIF to a Markdown file?

Question

I want to add this animated 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?

Possible duplicate of [How to add screenshot to READMEs in github repository ?](http://stackoverflow.com/questions/10189356/how-to-add-screenshot-to-readmes-in-github-repository) or [Add images to README.md on github](http://stackoverflow.com/questions/14494747/add-images-to-readme-md-on-github?rq=1) — Michael Recachinas, Dec 17 '15 at 18:40

Khaled Annajar · Accepted Answer · 2017-11-06T11:03:04.157

933

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:

edited Nov 06 '17 at 11:03

answered Feb 21 '17 at 11:42

Khaled Annajar

15,542
5
34
45

14

Please note that if your gif is too large, you will see a bad image box. Smaller gifs will work just fine. – Shubham Chaudhary Jan 04 '18 at 13:16
2

@jibeeeee Thanks to "Rick supports Monica" user. He is the one who added the Cat's image – Khaled Annajar May 17 '21 at 14:05
1

fwiw, I was able to add a GitHub-hosted gif to a GitHub gist even though the file url didn't end with .gif – savinola May 25 '21 at 04:01
@savinola Well that is good. Maybe things have changed. I don't know. That was the case when I wrote this answer – Khaled Annajar Jun 05 '21 at 18:02
I seem to have a funny one with it not working at all! does work if I change to a different gif image though. – Dave Jul 31 '21 at 13:10
2

And just like that, this cat became the most popular placeholder gif across the globe – pitamer Oct 09 '21 at 14:59

erip · Answer 2 · 2017-03-17T12:02:58.733

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

Reference-style: alt text

Alternatively you can use the url directly:

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

score 32 · Answer 3 · answered Apr 23 '18 at 15:06

32

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)

answered Apr 23 '18 at 15:06

Nhu Phan

699
7
4

17

It's easier to put it in a repo directory like `/img` and then use `![alt text](img/my-image.png)` – Braden Best Jan 30 '19 at 17:12

score 27 · Answer 4 · answered Oct 29 '19 at 13:24

27

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

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

answered Oct 29 '19 at 13:24

Vishal Shelake

572
1
8
12

score 13 · Answer 5 · answered Mar 25 '20 at 17:47

13

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.

answered Mar 25 '20 at 17:47

Sumit

874
9
10

This would add an additional binary file to the repository. increases repo size – Manoj Mar 27 '23 at 08:16

score 12 · Answer 6 · answered Mar 13 '18 at 20:06

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

Santosh Karanam · Answer 7 · 2022-01-04T15:25:09.203

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)

Mahozad · Answer 8 · 2022-10-31T21:27:37.680

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

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

![image description](path/in/repository/to/image.svg)

<img src="path/in/repository/to/image.svg" width="128"/>

Njuguna_nc · Answer 9 · 2022-03-13T08:56:41.303

5

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

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

edited Mar 13 '22 at 08:56

answered Feb 02 '22 at 15:48

Njuguna_nc

257
3
11

TechDogLover OR kiaNasirzadeh · Answer 10 · 2020-10-08T20:38:34.377

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

score 2 · Answer 11 · answered Sep 22 '20 at 18:46

2

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

answered Sep 22 '20 at 18:46

Faizan.shaikh

41
1
5

score 1 · Answer 12 · answered Dec 23 '22 at 03:54

Convert the url from

https://github.com/nikhith265/submit_button_group/blob/master/attachments/gif/sample_gif.gif

to

https://raw.githubusercontent.com/nikhith265/submit_button_group/298c26b5a3fcfe936f16deef0e8712c2fdc1b635/attachments/gif/sample_gif.gif

NOTE: Make sure to remove /blob from url

Then use img tag as follows to add gif to .md

<img src="https://raw.githubusercontent.com/nikhith265/submit_button_group/298c26b5a3fcfe936f16deef0e8712c2fdc1b635/attachments/gif/sample_gif.gif" alt="gif" width="300" height="540">

score 1 · Answer 13 · answered Aug 01 '23 at 20:39

The easiest way that I found to add a gif to a markdown file is just copy/paste. Nearly most of Microsoft's websites like GitHub, Stack Overflow support copying/pasting images and gifs.

If you have the file in your computer, then copy it and paste in any markdown file and it will be added automatically and uploaded to GitHub's server and formatted in the correct format with the name of the file.

Is there a way to add an animated GIF to a Markdown file?

13 Answers13

Linked