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

Question

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!

I created a little web-tool that allows you to add and align images without writing the markup yourself: https://stackoverflow.com/a/32790440/2477619 — Felix K., Mar 17 '18 at 10:42

score 573 · Accepted Answer · edited May 31 '19 at 20:36

573

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.

edited May 31 '19 at 20:36

DroidClicketyClacker

2,057
1
10
10

answered Jun 20 '14 at 05:05

EpicDavi

6,732
3
19
20

22

`![](https://...Ocean.png)` between those Square Braces you can add Alt-Text that is displayed when you hover over the image. – Adi Jan 05 '15 at 17:15
This solution is better if you want to put more images on the same line on github. I managed to put 4 on the same line with this solution but only 3 with wigging's solution. – vvvvv Aug 04 '17 at 17:21
Wonderful! Works with Bitbucket as well. (Well, I can vouch at least that it works on their pull request screen.) – Nate Cook Dec 20 '17 at 01:27
3

Too bad this puts a border around your images. – nomad Jul 27 '19 at 04:38
2

@EpicDavi : in the context of your code, how do you downsize images within the table? – emagar Oct 20 '19 at 15:52
could you please give some hint on how to make this 4 columns? – Mona Jalal Nov 05 '19 at 04:32
@MonaJalal you can just follow the same pattern. The [docs](https://help.github.com/en/github/writing-on-github/organizing-information-with-tables) have an example of 3 columns – Doug May 24 '20 at 23:51
Works for me. The text of the first table header cell must not have spaces before it. Otherwise the table is not rendered at all. – Krisztián Balla Jun 09 '20 at 16:48
I think [This answer](https://stackoverflow.com/a/61340219/10458409) accurately addresses the question – whataconundrum May 27 '21 at 15:50
Note that to hide the title of each column, you can use the special character "⠀" (which is not a whitespace) – AirOne Aug 25 '22 at 11:34

score 354 · Answer 2 · edited Apr 08 '20 at 22:50

354

This will display the three images side by side if the images are not too wide.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

edited Apr 08 '20 at 22:50

Jake

2,126
1
10
23

answered Jul 28 '17 at 09:15

simibac

7,672
3
36
48

48

Yes, indeed, it should have more upvotes! I used `
` to align the images on the center.
– Reza Dodge Jan 29 '18 at 07:36
3

Is it possible to add a title to each of the images? – Gilfoyle Jan 12 '20 at 07:27
This is perfect! As it allows to specify the sizes of the images. – Kaushal28 May 11 '20 at 09:46
19

I prefer to specify the image as a percentage of the total width, e.g. `width="32%"` when aligning 3 images – Dr Fabio Gori Jun 26 '20 at 13:42
Is there a similar way to use the same technique to align the images vertically (above/below each other)? – Idan Nov 16 '20 at 16:12
4

How can I add image captions/titles with this method? – micycle Feb 05 '21 at 10:48
2

I would also add ` – heyzling Feb 08 '22 at 16:39
Best solution out there and adjust the size helps for large images – JPM Jan 18 '23 at 15:50

score 189 · Answer 3 · answered Jul 22 '15 at 18:59

189

You can place each image side-by-side by writing the markdown for each image on the same line.

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

As long as the images aren't too large, they will display inline as demonstrated by this screen shot of a README file from GitHub:

answered Jul 22 '15 at 18:59

wigging

8,492
12
75
117

3

doesnt quite work for me. one of the (relative) images is a gif – Ridhwaan Shakeel Apr 20 '19 at 00:22
1

@RidhwaanShakeel It doesn't matter whether your images are gifs or not. I successfully placed two gifs side by side with this method. – Socowi May 09 '19 at 08:50
1

doesn't work for large (too wide) images – heyzling Feb 08 '22 at 16:42
2

if the images are different sizes, you can balance the scale using %. `![alt-text-1](image1.png "title-1" =20%x) ![alt-text-2](image2.png "title-2" =75%x)` – J Davies Aug 17 '22 at 15:29
Also works with html img tags! – Marco Prins Dec 08 '22 at 15:53

score 69 · Answer 4 · answered Aug 12 '16 at 20:39

69

Similar to the other examples, but using html sizing, I use:

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/>

Here is an example

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

I tested this using Remarkable.

answered Aug 12 '16 at 20:39

Steven C. Howell

16,902
15
72
97

6

I used `` as a separator between images in an issue ([wigging's answer](http://stackoverflow.com/a/31571776/3124150) didn't work). – EmmanuelMess Feb 26 '17 at 04:56
This works with larger images too that need resizing to fit on one row. – farhanhubble May 30 '19 at 08:32

fisch2 · Answer 5 · 2022-05-31T12:04:09.573

45

This solution allows you to add space in-between the images as well. It combines the best parts of all the existing solutions and doesn't add any ugly table borders.

<p align="center">
  <img alt="Light" src="./light.png" width="45%">
&nbsp; &nbsp; &nbsp; &nbsp;
  <img alt="Dark" src="./dark.png" width="45%">
</p>

The key is adding the   non-breaking space HTML entities, which you can add and remove in order to customize the spacing.

You can see this example live on GitHub at transitive-bullshit/nextjs-notion-starter-kit.

edited May 31 '22 at 12:04

answered Jan 29 '21 at 04:17

fisch2

2,574
2
26
29

2

I think this is the best one - if you have larger images and don't want to mess about with pixel sizes. Thanks so much! – Goblinhack Jun 16 '22 at 08:37

score 35 · Answer 6 · answered Feb 28 '20 at 15:29

This is the best way to make add images/screenshots of your app and keep your repository look clean.

Create a screenshot folder in your repository and add the images you want to display.

Now go to README.md and add this HTML code to form a table.

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

In the <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** To get the image path --> Go to the screenshot folder and open the image and on the right most side, you will find Copy path button.

You will get a table like this in your repository--->

MoonLite · Answer 7 · 2020-09-30T14:39:31.863

For markdown table syntax see:

https://www.markdownguide.org/extended-syntax/#tables

Quick summary:

To quickly understand the syntax used in other answers, it helps to start from a more complete intuitive and easier to remember syntax, and then a minimalized version with the same result.

Basic example:

| Header A       | Header B       |
| -------------- | -------------- |
| row 1 col 1    | row 1 col 2    |
| row 2 column 1 | row 2 column 2 |

Same result in a more minimalist form (cell widths can vary) :

Header A | Header B
--- | ---
row 1 col 1 | row 1 col 2
row 2 column 1 | row 2 column 2

And more related to the question: side by side images with labels on top:

label 1 | label 2
--- | ---
![](https://...image1.png) | ![](https://...image2.png)

( use :--- , ---: , and :---: for (text) alignment in the column, respectively: left, right, center )

score 10 · Answer 8 · answered Jul 07 '17 at 11:37

If, like me, you found that @wiggin answer didn't work and images still did not appear in-line, you can use the 'align' property of the html image tag and some breaks to achieve the desired effect, for example:

# Title

<img align="left" src="./documentation/images/A.jpg" alt="Made with Angular" title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

Obviously, you have to use more breaks depending on how big the images are: awful yes, but it worked for me so I thought I'd share.

Thank you! Also `hspace` is a neat little trick if there is not enough space between the pictures. Didn't know github actually parses that. — NullDev, Oct 17 '17 at 14:01

whataconundrum · Answer 9 · 2020-04-21T12:29:52.627

To piggyback off of @Maruf Hassan

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td> is supported by GitHub Markdown. Images with varying heights may not vertically align near the top of the cell. This property handles it for you.

score 1 · Answer 10 · answered Nov 26 '22 at 13:51

I found a way to have 3 images aligned left/center/right all on the same line, so it automatically adds suitable space between them:

<p align="center">
      <img src="..." align="left">
      <img src="...">
      <img src="..." align="right">
</p>

This is what it looks like for my real use case here:

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

10 Answers10

Linked