Official image host for GitHub projects?

Question

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).

Where is this?

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

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

Solution 5

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:

View more solutions

Comments

[Alexander Rodin]

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.

[gMale]

Looks like you can just drag directly into a comment, as well (like when you're giving PR feedback)

[evilive]

You can not only grab an image into a comment, you can also do ctrl-v if you have an image in a buffer.

[Arturo Moncada-Torres]

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)

[avepr]

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