How do I make 2 images appear side by side in Jupyter notebook (iPython)?

Question

I want to display 2 PNG images in iPython side by side.

My code to do this is:

from IPython.display import Image, HTML, display

img_A = '\path\to\img_A.png'
img_B = '\path\to\img_B.png'

display(HTML("<table><tr><td><img src=img_A></td><td><img src=img_B></td></tr></table>"))

But it doesn't output the images, and instead only displays placeholders for the 2 images:

I tried the following as well:

s = """<table>
<tr>
<th><img src="%s"/></th>
<th><img src="%s"/></th>
</tr></table>"""%(img_A, img_B)
t=HTML(s)
display(t)

But the result is the same:

The images are in the path for sure, because I verified by displaying them in a pop up:

plt.imshow(img_A)
plt.imshow(img_B)

and they do appear in the pop ups.

How do I make the 2 images appear side by side in iPython?

Not sure but would solution in https://stackoverflow.com/questions/33647774/how-to-include-two-pictures-side-by-side-in-markdown-for-ipython-notebook-jupyt be helpful ? — niraj, May 28 '18 at 04:10
@student The accepted solution in the link you provided is the exact thing I'm trying, but it doesn't work in code section - maybe it only works in markdown section. — Kristada673, May 28 '18 at 04:14
`` will not magically fill in the variable value. You will have to do that. — Klaus D., May 28 '18 at 05:14
Does this answer your question? [How to include two pictures side by side in Markdown for IPython Notebook (Jupyter)?](https://stackoverflow.com/questions/33647774/how-to-include-two-pictures-side-by-side-in-markdown-for-ipython-notebook-jupyt) — Lerner Zhang, Mar 02 '22 at 07:45
incredible that, after all these years, some "pretty display image" methods have not been implemented. — Antonio Sesto, Mar 12 '22 at 07:54

score 21 · Accepted Answer · edited Mar 01 '22 at 04:17

21

You can try using matplotlib. You can read image to numpy array by using mpimg.imread (documentation) from matplotlib, then you can use subplots (documentation) and for creating two columns for figures and finally imshow (documetation) to display images.

import matplotlib.pyplot as plt
import matplotlib.image as mpimg
from matplotlib import rcParams

%matplotlib inline

# figure size in inches optional
rcParams['figure.figsize'] = 11 ,8

# read images
img_A = mpimg.imread('\path\to\img_A.png')
img_B = mpimg.imread('\path\to\img_B.png')

# display images
fig, ax = plt.subplots(1,2)
ax[0].imshow(img_A)
ax[1].imshow(img_B)

edited Mar 01 '22 at 04:17

zr0gravity7

2,917
1
12
33

answered May 28 '18 at 15:07

niraj

17,498
4
33
48

But I have a problem I get the image within a cartesian frame. How to solve this? – pink.slash May 02 '19 at 20:01
You can do this: # display images fig, ax = plt.subplots(1,2); ax[0].imshow(img_A); ax[0].axis('off'); ax[1].imshow(img_B); ax[1].axis('off') – SereneWizard Jan 24 '21 at 08:12
in my case this solution does not work as it is: I only get some strangely labeles axes. – Antonio Sesto Mar 12 '22 at 07:53

Karol Żak · Answer 2 · 2020-06-29T10:20:13.083

16

matplotlib is a very good tool for plotting but I found it very heavy and slow for scenarios where I simply need a fast and easy way to display bigger number of images.
To solve this I'm using IPyPlot package:

import ipyplot

ipyplot.plot_images(images_list, max_images=20, img_width=150)

You would get a plot similar to this:

edited Jun 29 '20 at 10:20

answered May 04 '20 at 12:50

Karol Żak

2,158
20
24

in my case, empty images are displayed, even if the path is correct and other methods for reading the image run fine. – Antonio Sesto Mar 12 '22 at 06:48
I don't understand the syntax `images[labels == 'tents']` and I wasn't able to find information by googling, can you explain how it works ? – Damien Oct 26 '22 at 11:12
1

@Damien don't mind that. You can just pass a list of images as a parameter. In case of that syntax I simply filter the list of `labels` by looking for string `tents` which returns a list of True and False values adequately and that's what I use for slicing of selecting specific images from my `images` list – Karol Żak Oct 26 '22 at 13:03

Shreyas H.V · Answer 3 · 2021-05-06T19:24:18.520

Kind of late but i found out about this over here

You can do it via Hbox. Hbox is a special container where you can add widgets. It aims at providing an efficient way to lay out, align and distribute space among items in a given space. Although its a bit cumbersome to define so many elements just to display 2 images you can add a lot more functionality like sliders, dropdown menus as well as buttons making your Jupiter notebook more interactive.

import IPython.display as display
import ipywidgets as widgets

img1=open('path_to_image','rb').read()
wi1 = widgets.Image(value=img1, format='jpg', width=300, height=400)
img2=open('path_to_image','rb').read()
wi2 = widgets.Image(value=img2, format='jpg', width=300, height=400)
a=[wi1,wi2]
wid=widgets.HBox(a)
display.display(wid)

The above method works best for png images(it essentially converts the image into binary and then displays it as per my knowledge). Found what you need here --> https://stackoverflow.com/questions/60640375/displaying-gifs-in-jupyter-notebook-using-widgets — Shreyas H.V, May 09 '21 at 18:27

score 2 · Answer 4 · answered Apr 29 '21 at 23:25

This easy solution worked great for me:

from IPython.display import Video, Image, HTML, display

image_path1 = "/myfolder/my_img1.jpg"
image_path2 = "/myfolder/my_img2.jpg"


HTML(f"""
    <div class="row">
            <img src={image_path1} style="width:30%"> </img>
            <img src={image_path1} style="width:53.2%"> </img>
    </div>
    """)

I put in different widths for if you have a portrait and a landscape picture, but that is up to you depending on the images and the aspect ratios.

It's easy to adapt your code to image-text pairs. – Lerner Zhang Mar 02 '22 at 07:42 — Lerner Zhang, Mar 02 '22 at 07:42

score 1 · Answer 5 · answered Mar 02 '22 at 07:50

For some guys who may want to place an image and a text snippet side by side(adapted from this answer):

import base64
from IPython.display import HTML, display
b64_img =  base64.b64encode(open('./path', 'rb').read()).decode('ascii')
txt = "sjfa;\nakd;f\nsdfa"
display(HTML(f"""
    <div class="row">
    <img style="float:left;margin-right:30px;" src="data:image/jpeg;base64,{b64_img}" width="400" height="300" />
    <div style="font-size:10px;white-space:pre;">{txt}</div>
    </div>
    """))

score 0 · Answer 6 · answered Nov 29 '22 at 05:37

It should be like this:

from IPython.display import Image, HTML, display

img_A = '\path\to\img_A.png'
img_B = '\path\to\img_B.png'

display(HTML("<table><tr><td><img src={0}></td><td><img src={1}></td></tr></table>".format(image_A,img_B)))

You mistook the variable name as variable itself.

How do I make 2 images appear side by side in Jupyter notebook (iPython)?

6 Answers6

Linked