How do I make 2 images appear side by side in Jupyter notebook (iPython)?
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.
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)
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:
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)