How to add screenshot to READMEs in github repository ?

Is it possible to place a screenshot in README file in a GitHub repository? What’s the syntax ?

  • Git Subtree. Why can't I branch from a subtree rather than the root?
  • Do Visual Studio Database Project *.refactorlog Files Belong in Source Control?
  • Fetching all remote branches into a bare Git repository
  • Staging Deleted files
  • How do I securely store a .pem file when working with git-tracked heroku project?
  • Make a local Git repo from master based with Zend Repo as Origin
  • How can i connect openshift git repository to bitbucket
  • How to handle/fix git add/add conflicts?
  • Git commit lost after merge
  • My pull request has been merged, what to do next?
  • Git: How to modify branch so that it exactly reflects another
  • how show the diff from my current working directory and my last commit?
  • 10 Solutions collect form web for “How to add screenshot to READMEs in github repository ?”

    If you use Markdown (

    Provided that you have the image in your repo, you can use a relative URL:

    ![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")

    If you need to embed an image that’s hosted elsewhere, you can use a full URL

    ![Alt text](http://full/path/to/img.jpg "Optional title")

    GitHub recommend that you use relative links with the ?raw=true parameter to ensure forked repos point correctly.

    Check out an example:

    Also, the documentation on relative links in README files:

    And of course the markdown docs:

    Additionally, if you create a new branch screenshots to store the images you can avoid them being in the master working tree

    You can then embed them using:

    ![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

    I found that the path to the image in my repo did not suffice, I had to link to the image on the subdomain.


    Markdown example ![Settings Window](

    Even though there is already an accepted answer I would like to add another way to upload images to readme on GitHub.

    • You need to create issue in your repo
    • Drag and drop in the comment area your image
    • After link for the image is generated insert it to your readme

    More details you can find here

    One line below should be what you looking for

    if your file is in repository


    if your file is in other external url


    The markdown syntax for displaying images is indeed:


    BUT: How to provide the url ?

    • You probably do not want to clutter your repo with screenshots, they have nothing to do with code
    • you might not want either to deal with the hassle of making your image available on the web… (upload it to a server… ).

    So… you can use this awesome trick to make github host your image file. TDLR:

    1. create an issue on the issue list of your repo
    2. drag and drop your screenshot on this issue
    3. copy the markdown code that github has just created for you to display your image
    4. paste it on your readme (or wherever you want)

    1. Upload your image to
    2. Get github Markdown url
    3. Insert in your ReadMe

    Markdown: ![Screenshot](http://url/to/img.png)

    • Create an issue regarding adding images
    • Add the image by drag and drop or by file chooser
    • Then copy image source

    • Now add ![Screenshot](http://url/to/img.png) to your file


    Alternatively you can use some image hosting site like imgur and get it’s url and add it in your file or you can use some static file hosting too.

    Sample issue

    To me the best way is –

    1. Create an new issue with that repository on github and then upload the file in gif format.To convert video files into gif format you can use this website
    2. Submit the newly created issue.
    3. Copy the address of the uploaded file
    4. Finally in your README file put ![demo](COPIED ADDRESS)

    Hope this will help .

    Method 1->Markdown way


    Method 2->HTML way

    <img src="https://link(format same as above)" width="100" height="100"/>


    <img src="https://link" style=" width:100px ; height:100px " />

    Note-> If you don’t want to style your image i.e resize remove the style part

    With the images located in /screen-shots directory. The outer <div> allows the images to be positioned. Padding is achieved using <img width="desired-padding" height="0">.

    <div align="center">
            <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
            <img height="0" width="8px">
            <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
    Git Baby is a git and github fan, let's start git clone.