475

I'm trying to show a comparison between two photos in my README.md, but currently they appear one on top of the other. I want to display them side-by-side — for example, when showing “before” and “after” screenshots or comparing color themes.

Here’s what I currently have:

![Image One](https://picsum.photos/id/1015/300/200) ![Image Two](https://picsum.photos/id/1025/300/200)

enter image description here

This stacks them vertically. How can I make them appear horizontally (side-by-side) instead?

Improve this question
4
  • 2
    I created a little web-tool that allows you to add and align images without writing the markup yourself: stackoverflow.com/a/32790440/2477619 Commented Mar 17, 2018 at 10:42
  • 8
    link from question doesn't work Commented Feb 14, 2019 at 4:57
  • Saad, if you return to the site, would you be able to repair the link in this question? Commented Oct 6 at 18:34
  • 1
    Updated @halfer! Commented Oct 6 at 23:25

11 Answers 11

Reset to default
656

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

![](https://...Ocean.png) between those Square Braces you can add Alt-Text that is displayed when you hover over the image.
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.
Too bad this puts a border around your images.
@EpicDavi : in the context of your code, how do you downsize images within the table?
Note that to hide the title of each column, you can use the special character "⠀" (which is not a whitespace)
|
403

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>
Improve this answer

4 Comments

Yes, indeed, it should have more upvotes! I used <p align="middle"> to align the images on the center.
Is it possible to add a title to each of the images?
I prefer to specify the image as a percentage of the total width, e.g. width="32%" when aligning 3 images
I would also add <img align="top" src="..." for all images.
203

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:

inline images

Improve this answer

7 Comments

doesnt quite work for me. one of the (relative) images is a gif
@RidhwaanShakeel It doesn't matter whether your images are gifs or not. I successfully placed two gifs side by side with this method.
doesn't work for large (too wide) images
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)
Also works with html img tags!
|
73

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.

Improve this answer

2 Comments

I used <img height="350" hspace="20"/> as a separator between images in an issue (wigging's answer didn't work).
This works with larger images too that need resizing to fit on one row.
58

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 &nbsp; 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.

Improve this answer

Comments

38

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

enter image description here

Improve this answer

1 Comment

I wanted side by side images in Github Pages, so I was able to use styling to remove the borders too: <style> table, td, th { border: none!important; } </style>
21

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 )

Improve this answer

Comments

11

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.

Improve this answer

Comments

10

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.

Improve this answer

Comments

4

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:

enter image description here

Improve this answer

Comments

0

I used a solution from here: https://github.com/iced-rs/iced/blob/master/README.md?plain=1

<div align="center"> <a href="https://github.com/squidowl/halloy"> <img src="https://iced.rs/showcase/halloy.gif" width="460px"> </a> <a href="https://github.com/hecrj/icebreaker"> <img src="https://iced.rs/showcase/icebreaker.gif" width="360px"> </a> </div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.