githubgithub-flavored-markdown

How can one display images side by side in a GitHub README.md?

I'm trying to show a comparison between two photos in my README.md which is why I want to display them side-by-side. Here is how the two images are placed currently. I want to show the two Solarized color schemes side by side instead of top and bottom. Help would be much appreciated, thanks!

Solution

  • The easiest way I can think of solving this is using the tables included in GitHub's flavored markdown.

    To your specific example it would look something like this:

    Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

    This creates a table with Solarized Dark and Ocean as headers and then contains the images in the first row. Obviously you would replace the ... with the real link. The :s are optional (They just center the content in the cells, which is kinda unnecessary in this case). Also you might want to downsize the images so they will display better side-by-side.