Unable to embed a gif on imgur to a README.md on github

Question

I want to show a large gif on README.md. Firstly, I uploaded it to imgur. And then, I added the url to README.md # <img alt="YAP" src="http://i.imgur.com/dNYswmI.gif">. But it cannot be loaded, it was compiled to:

<a href="https://camo.githubusercontent.com/b4f1167e599ce7936bb83aad5d007ca8f04345ac/687474703a2f2f692e696d6775722e636f6d2f644e5973776d492e676966" target="_blank">
    <img alt="YAP" src="https://camo.githubusercontent.com/b4f1167e599ce7936bb83aad5d007ca8f04345ac/687474703a2f2f692e696d6775722e636f6d2f644e5973776d492e676966" data-canonical-src="http://i.imgur.com/dNYswmI.gif" style="max-width:100%;"></a>

This is my README.

###Description
  A open source player.

###Screenshot
# <img alt="YAP" src="http://i.imgur.com/dNYswmI.gif">

GitHub strips out a lot of raw HTML. Any reason you didn't use Markdown syntax: `![YAP](http://i.imgur.com/dNYswmI.gif)`? — Waylan, Jun 10 '16 at 17:14
I have updated it as you said but it doesn't either. Maybe it's because this gif is larger than 10m, github refuses to cache it. @Waylan — Zen, Jun 10 '16 at 17:20
"because this gif is larger than 10m: that is probably the problem. If so, there's nothing you can do about it except use a smaller file size. — Waylan, Jun 10 '16 at 17:46

score 19 · Accepted Answer · edited Oct 25 '21 at 14:32

19

The gif you shared is 19MB in size.

GitHub routes all content through https://camo.githubusercontent.com/ even for external source now. Sharing a file that is bigger than the size limit (10MB) will get you a "Content length exceeded" error.

I tried sharing it on Google Drive, Dropbox, Droplr, my own server all ran into this issue unless the file size is below 5MB. It also doesn't matter if your syntax is in html or markdown.

<img src="https://static01.bbi.io/2Wt9Tk.gif"/>

!(image)[https://static01.bbi.io/2Wt9Tk.gif]

Your solution is to resize your gif. You can do it with service like this one: https://ezgif.com/resize .

edited Oct 25 '21 at 14:32

Shankar Narayana Damodaran

68,075
43
96
126

answered Oct 12 '17 at 05:18

williamli

3,846
1
18
30

or use their large file storage as I have mentioned below – CreationTribe Jul 15 '19 at 02:57
1

I believe, it is `![image](https://static01.bbi.io/2Wt9Tk.gif)` (brackets are reversed) – Parzh from Ukraine Aug 08 '19 at 12:56
1

the limit is 5MB. – Manuel Otto Feb 27 '20 at 19:04
@ManuelOtto they must have revised the size limit in 2020. – williamli Feb 29 '20 at 04:52

score 18 · Answer 2 · answered Jul 08 '17 at 19:08

18

GitHub does support Imgur embeds. Make sure to provide the image extension, which isn't on Imgurs default share hyperlink.

BAD

![Imgur Image](http://i.imgur.com/zTONrOD)

GOOD

![Imgur Image](http://i.imgur.com/zTONrOD.jpg)

Imgur also provides this preformatted link under the MarkDown links menu, see image below.

See also an example readme.md with Imgur image.

answered Jul 08 '17 at 19:08

Joseph Lust

19,340
7
85
83

2

GitHub routes all content through https://camo.githubusercontent.com/ even for external source now. Sharing a file that is bigger than the size limit (10MB i think) will get you a "Content length exceeded" error. I tried sharing it on Google Drive, Dropbox, Droplr, my own server all ran into this issue unless the file size is below 10MB. – williamli Oct 12 '17 at 05:16
For using this in markdown. You will need to place an exclamation mark before the URL. So `[Imgur](https://imgur.com/63riHy1)` will be `![Imgur](https://imgur.com/63riHy1)` – Joshua May 21 '20 at 03:07

score 3 · Answer 3 · answered Mar 20 '20 at 20:26

3

the way it worked for me was with the tag like @williamli said

<img src="https://static01.bbi.io/2Wt9Tk.gif"/>

answered Mar 20 '20 at 20:26

lavaldi

31
1
4

Can you clarify: This HTML image tag is what you are using in README – Michael Nelles Mar 20 '20 at 20:50

score 2 · Answer 4 · answered Jul 10 '19 at 14:49

You can still have a gif in readme.md that's above 10MB if you include the gif itself in your repository.

This is because images from the repository itself are not routed through https://camo.githubusercontent.com/.

You could upload the gif to a misc folder and embed it like so:

<img src='./misc/your_file.gif'>

score 1 · Answer 5 · answered Oct 19 '16 at 22:19

1

I believe the only way to link images from imgur would be something like this:

![An open source player](http://i.imgur.com/dNYswmI.gif)

However (in my experience) GitHub does not support imgur, I do not know if there are any other supported image share service.

If you can't find a supported service just do something like this as a last resort to just leave a link to the image:

###Description
A open source player.

### Screenshot
#[Screenshot](http://i.imgur.com/dNYswmI.gif)

answered Oct 19 '16 at 22:19

Diego Eann

47
9

4

I believe Github doesn't support imgur's gifv format - https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjag9Wm6s_UAhVE-mMKHZReAFAQFggoMAA&url=https%3A%2F%2Fhelp.imgur.com%2Fhc%2Fen-us%2Farticles%2F208606616-What-is-GIFV-&usg=AFQjCNECe0QWcK--uHnCdpJr6aeJaLFrRA This means that any gif larger than 2MB wont work if you try to embed it in your README on github. – Frikster Jun 21 '17 at 21:18

score 0 · Answer 6 · answered Jul 15 '19 at 02:54

0

I've run into this issue as well. Github will not allow you to upload anything over 10Mb. However, they offer an optional large file storage service specifically for audio/video/etc. This is what you want:

lfs-github

answered Jul 15 '19 at 02:54

CreationTribe

562
1
5
17

If you use GitHub LFS, you get 1GB of storage and 1GB of mostly bandwidth transfer for free, after that charges apply: https://help.github.com/en/articles/about-billing-for-git-large-file-storage – williamli Jul 16 '19 at 03:17

Unable to embed a gif on imgur to a README.md on github

6 Answers6

Linked