How to upload images like png into GitHub repository?

Question

I'm a newbie to Git or GitHub, and didn't find how to upload an image file into my repo in Git? Any idea?

Fazeli

This really needs to be added to the GitHub FAQ... There is currently no way to upload images (or other non-text files) through the web UI. You will have to do a proper clone and push as suggested below. – Zamudio

Note that if you do not need the image actually in your repo but only accessible, you can add a dummy "Issue" and drag/drop or copy/past the image to there. It can then be referenced in your readme, wiki, or indeed anywhere. – Unhopedfor

Answer 1

You need to add and commit the png file to your local repo first. Then push the updates to the remote server.

git add xxx.png
git commit -m 'add png file'
git remote add origin https://github.com/xxx.git
git push -u origin master

Alibi

Well, what if I have a repository that I only manage through web UI (because estabilishing local repo is pain). – Campagna

I think the question was how to do it with the web interface. The git way is quite obvious. But doing the same with the web gui is far from obvious. – Precondition

Answer 2

Although github does not have a CDN support, but you can use Issues to upload content like images and PDF.

Here is how you can do it.

1. Goto Issues
2. Create New Issue
3. Drag your image to the content area
4. Submit the issue

After submitting the issue, github will show you the preview of your image. You can just right click, copy the URL and use it.

This approach saves you from add-commit-push cycle. Also, your repo stays light weight as you don't have to keep your images in the repo.

Climb

Is it necessary to submit the issue? – Coexist

Answer 3

Update: Github has released Upload option for repositories!

yushlux's answer is fine for someone using CLI. But for uploading images to Github through a browser can be done this way.

Use prose.io for editing and inserting images in any files in your repo but make sure you create a _prose.yml file in the root of the repo and add this code inside.

prose:
  rooturl: '/'
  siteurl: 'http://prose.github.io/starter/'
  relativeLinks: 'http://prose.github.io/starter/links.jsonp'
  media: 'media'
  ignore:
    - index.md
    - _config.yml
    - /_layouts
    - /_includes
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "blog"
      - name: "tags"
        field:
          element: "multiselect"
          label: "Add Tags"
          placeholder: "Choose Tags"
          options:
            - name: "Apples"
              value: "apples"
            - name: "Bananas"
              value: "bananas"
    _posts/static:
      - name: "layout"
        field:
          element: "hidden"
          value: "page"
      - name: "permalink"
        field:
          element: "text"
          label: "Permalink"
          value: ""

Now you should be able to upload images through prose.io

Read detailed Tutorial here: How to add or edit Jekyll posts online

Schiff