53

Whenever I need to include a picture in a GitHub project's README file I usually just stick it in a Screenshots folder and relatively link to it. However this unnecessarily bloats the file size of the project, especially if I include an animated .gif of the project in action.

I've noticed in a couple popular Github iOS projects (like MMDrawerController and JASidePanels) that the images are NOT relatively linked, but rather they exist on a domain I've never seen - "https://github-camo.global.ssl.fastly.net". Navigating to this site directly doesn't work and Google searches bring up nothing. So for my question: is this site affiliated with GitHub, and how does one get his/her images uploaded here? Of course I could always use a generic image hosting service but I'd prefer to use one that has official ties with GitHub (if such a site exists).

https://github-camo.global.ssl.fastly.net

Where is this?

Community
  • 1
  • 1
lobianco
  • 6,226
  • 2
  • 33
  • 48

6 Answers6

77

GitHub itself has a "secret" feature to upload images.

I read about this in a comment by GitHub's own Phil Haack:

I edit (or create) an issue and drag it into there and copy the resulting markdown into my post. It's probably an abuse of GitHub issues.

If you do it like this, the image will be stored on some GitHub server, and it will have a URL like this one:
https://f.cloud.github.com/assets/19977/1656110/a3f8b280-5b6d-11e3-818d-c06ab05bd613.jpg

Christian Specht
  • 35,843
  • 15
  • 128
  • 182
  • Or it is possible to just use github gists (which are git repositories and can contain any kind of file) to store an image and get direct link to it. – Alexander Rodin May 16 '16 at 12:23
  • 2
    Looks like you can just drag directly into a comment, as well (like when you're giving PR feedback) – gMale Jun 26 '17 at 13:35
  • You can not only grab an image into a comment, you can also do `ctrl-v` if you have an image in a buffer. – evilive Nov 18 '17 at 23:19
  • It is not clear in this answer whether you can immediately delete the issue/comment and have the generated link stay around? I.e. create an issue, drag the image, do a preview to confirm it, then copy the link and just close the issue without ever submitting it. Seems to work for me but I am concerned that a github "garbage collector" will eventually invalidate the link. – bulletmark Oct 15 '22 at 00:25
  • is there an API for this? – SOFe May 04 '23 at 04:06
13

Fastly is not an image host, it's a content delivery network. See their website and this CDN Planet entry.

If you peek at the source code of the README.md page in the MMDrawerController repository, you'll notice that the image aren't initially stored at Fastly.net.

Moreover, they're supposed to be served through standard http (ie. not https).

<p align="center" >
<img src="http://mutualmobile.github.io/MMDrawerController/ExampleImages/example1.png" width="266" height="500"/>
<img src="http://mutualmobile.github.io/MMDrawerController/ExampleImages/example2.png" width="266" height="500"/>
</p>

The links your refer to are dynamically rewritten thanks to the Camo tool.

This tool simplify routing images through an SSL host in order to prevent users from being warned by their browser about potential unsecure content as every GitHub.com content is being served over https.

nulltoken
  • 64,429
  • 20
  • 138
  • 130
10

I built MMDrawerController. I host the images in a gh-pages repo and link to them from the README.

kcharwood
  • 2,501
  • 19
  • 22
10

No you don't need a host. just put images in root of your own project and give link in readme.md something like this

![Preview1](./img1.PNG)
![Preview2](./img2.PNG)
## and so on
Zen Of Kursat
  • 2,672
  • 1
  • 31
  • 47
  • 5
    If you want to keep things a bit more tidy, you could put all the images in an `images` directory and then reference them as `![Preview1](./images/img1.PNG)` – Arturo Moncada-Torres Mar 15 '19 at 16:48
7

Follow these steps to host the image on GitHub's official website.

  1. Visit any repository on GitHub and click your way through to the issues.

  2. Create a new issue by clicking the New Issue button. You'll now see the title and description fields.

  3. Drag and drop an image onto the description field. This will start the uploading process.

  4. Copy the URL and use it in README, issues, or pull requests however you like.

Demonstration of how it works:

how to put an image in readme using GitHub Offical hosting

pradeexsu
  • 1,029
  • 1
  • 10
  • 27
1

Simply open the image you wish to post on GitHub, right-click, Copy Image, then in the Github post, hit ctrl-v.

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
TROY E
  • 39
  • 1
  • This is actually the most straightforward way that works and does not need to do weird abuse of new issue editor. But the answer itself needs editing to be more explanatory – avepr Mar 22 '22 at 02:07
  • works, but only if the repo is public, or for private repos if you are logged in to github – kiwichris May 20 '23 at 02:57