Display multiple images in one IPython Notebook cell?

Question

If I have multiple images (loaded as NumPy arrays) how can I display the in one IPython Notebook cell?

I know that I can use plt.imshow(ima) to display one image… but I want to show more than one at a time.

I have tried:

 for ima in images:
     display(Image(ima))

But I just get a broken image link:

enter image description here

If using `imshow` is an option, why not using it in combination with `subplots` to create an array of images? Do the image sizes vary a lot? — Jakob, Oct 20 '13 at 06:42
I could use subplots… but that gets fiddly when I'm just experimenting: I need to set the number of rows and columns, then if there are too many rows and columns I need to increase the figure size to make sure they are each individually reasonably sized, and I need to wait for the entire figure to render before I can see the individual images (as opposed to their being displayed as they are generated) — David Wolever, Oct 20 '13 at 06:58
Do you use python 3.3? And is something written to the console? — Jakob, Oct 20 '13 at 07:16
No - this is Py2.7. And what do you mean, "is something written to the console"? Do you mean when I go to `display(Image(…))`? In that case, it looks like the image has something like `src="data:np.array([…])"`. — David Wolever, Oct 20 '13 at 17:35

score 121 · Accepted Answer · edited Dec 14 '16 at 19:36

121

Short answer:

call plt.figure() to create new figures if you want more than one in a cell:

for ima in images:
    plt.figure()
    plt.imshow(ima)

But to clarify the confusion with Image:

IPython.display.Image is for displaying Image files, not array data. If you want to display numpy arrays with Image, you have to convert them to a file-format first (easiest with PIL):

from io import BytesIO
import PIL
from IPython.display import display, Image

def display_img_array(ima):
    im = PIL.Image.fromarray(ima)
    bio = BytesIO()
    im.save(bio, format='png')
    display(Image(bio.getvalue(), format='png'))

for ima in images:
    display_img_array(ima)

A notebook illustrating both approaches.

edited Dec 14 '16 at 19:36

Hakim

3,225
5
37
75

answered Oct 20 '13 at 22:22

minrk

37,545
9
92
87

2

Subtle point from the linked notebook: You need to do `%matplotlib inline` if you want the images to appear. – Brent Bradburn May 20 '16 at 15:38
4

Is there any good explanation of why I have to `plt.figure()` before each each image? – Selam Getachew Jul 21 '17 at 21:20
Is there a way to avoid sending the images to disk? I do have a bunch of in-memory images that are manipulated many times - *in memory*. – WestCoastProjects Feb 17 '18 at 21:00

score 103 · Answer 2 · answered Aug 06 '15 at 17:32

103

This is easier and works:

from IPython.display import Image
from IPython.display import display
x = Image(filename='1.png') 
y = Image(filename='2.png') 
display(x, y)

answered Aug 06 '15 at 17:32

newmathwhodis

3,209
2
24
26

2

Exactly what I needed - I wasn't using numpy arrays or actual plots, I just had .pngs to display, and this was perfect. Thanks! – dwanderson Oct 12 '16 at 20:57
18

This should very much be the accepted answer. If you have an array of images, this works: `display(*images)` – Claude Jan 04 '17 at 09:27
3

I like this, but it displays images much larger than `plt.imshow()`. [It does't seem possible to control the size](https://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html#IPython.display.display). – Tom Hale Mar 21 '19 at 06:12

Michael · Answer 3 · 2017-12-12T11:04:52.713

97

Horizontal layout

Short answer

plt.figure(figsize=(20,10))
columns = 5
for i, image in enumerate(images):
    plt.subplot(len(images) / columns + 1, columns, i + 1)
    plt.imshow(image)

Long answer

import glob
import matplotlib.pyplot as plt
import matplotlib.image as mpimg
%matplotlib inline

images = []
for img_path in glob.glob('images/*.jpg'):
    images.append(mpimg.imread(img_path))

plt.figure(figsize=(20,10))
columns = 5
for i, image in enumerate(images):
    plt.subplot(len(images) / columns + 1, columns, i + 1)
    plt.imshow(image)

edited Dec 12 '17 at 11:04

answered Jul 24 '17 at 12:37

Michael

3,206
5
26
44

5

This is a great and more useful answer! – carlossierra Oct 05 '17 at 19:15
2

This is a great way to enumerate multiple figures – Gang Su Dec 25 '17 at 00:47
4

Number of rows should be an integer. Change plt.subplot(len(images) / columns + 1, columns, i + 1) to plt.subplot(int(len(images) / columns + 1), columns, i + 1) – Kookaburra Feb 26 '23 at 21:27

Karol Żak · Answer 4 · 2020-06-29T10:20:11.217

You can do it really fast and easy with IPyPlot:

import ipyplot

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

You would get a plot similar to this:

It's using IPython.display and HTML under the hood and it can take images in following formats:

string file paths
PIL.Image objects
numpy.ndarray objects representing images

It would take just a few seconds to display a numpy array of 500 images

PBrockmann · Answer 5 · 2015-01-06T14:21:00.717

You can display multiple images in one IPython Notebook cell by using display and HTML functions. You need to create the set of html img tags as a string as follows

from IPython.display import Image, HTML, display
from glob import glob
imagesList=''.join( ["<img style='width: 120px; margin: 0px; float: left; border: 1px solid black;' src='%s' />" % str(s) 
                 for s in sorted(glob('yourimage*.png')) ])
display(HTML(imagesList))

See a example of use from http://nbviewer.ipython.org/github/PBrockmann/Dodecahedron

You may need to refresh your browser (shift + load) to see new images if they have been changed from a previous cell.

Is it possible to save this rendering to file, somehow? – Abhijat Biswas Nov 22 '16 at 01:28 — Abhijat Biswas, Nov 22 '16 at 01:28

score 5 · Answer 6 · answered Jul 06 '21 at 10:46

Today, I faced this problem in google Colab and jupyter notebook and I would share a simple solution on MNIST dataset:

for index in range(1,6):
    plt.imshow(train_set.dataset[index], cmap='gray')

The output only shows the last image:

Because the cell in both IDEs shows only the last image. Thus I added plt.show() to fix this issue:

for index in range(1,6):
    plt.imshow(train_set.dataset[index], cmap='gray')
    plt.show()

The output:

Last comment: I like this way because I can add input() and plot() functions together in the loop not like other methods I tried.

score 4 · Answer 7 · answered Sep 14 '18 at 14:43

If you don't mind an additional dependency here is a two liner using scikit-image:

from skimage.util import montage
plt.imshow(montage(np.array(images), multichannel=True))

Set multichannel=True for color images and multichannel=False for grayscale images.

score 4 · Answer 8 · answered Aug 17 '21 at 00:46

It's been a few years now since this question has been asked, but it's sad that this feature has not managed to get into the core of jupyter notebooks.

I would expect an imshow function that's simple enough that

accepts a single or multiple images as input
layouts them neatly for me even if there are 100 images

and looks something like:

imshow(img)
imshow(img1, img2)
imshow(*imgs[:100])

Some nice to have optional arguments:

title
size
rows and/or columns
cmap

Unfortunately, that function doesn't as part of the notebooks. Hopefully, that will be there in the future. For now, I have that exact function imshow implemented in the imshowtools package. It uses matplotlib under the hood.

Say you have MNIST and imshow loaded using

from imshowtools import imshow
import tensorflow as tf

(x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data()

Then you can simply use

imshow(x_train[0])
imshow(x_train[0], x_train[1], x_train[2])
imshow(*x_train[:20], cmap='binary')
imshow(*x_train[:100], cmap='binary', size=(10, 10))

mnist_img

Sometimes, you want them in one row or in one column:

imshow(*x_train[:15], cmap='Purples', rows=1)
imshow(*x_train[:24], cmap='Greens', columns=4)

mnist_rows_cols

score 2 · Answer 9 · answered Jan 22 '17 at 15:11

Somehow related to this question (and since I was directed to this answer when I was trying to solve it), I was able to solve a similar problem by simply typing the full file-path when calling Image(). In my case, I had to choose a random image from different folder paths stored in a list your_folder and display them.

import random, os 
for i in range(len(your_folder)):
   ra1 = "../"+your_folder[i]+"/"+random.choice(os.listdir(your_folder[i]))
   image = Image(ra1)
   display(image)

you should use `os.path.join` or `pathlib.Path` to assemble paths in an os-agnostic way. — funky-future, Jan 22 '17 at 15:39

score 2 · Answer 10 · answered Nov 13 '17 at 14:59

from matplotlib.pyplot import figure, imshow, axis
from matplotlib.image import imread

mypath='.'
hSize = 5
wSize = 5
col = 4

def showImagesMatrix(list_of_files, col=10):
    fig = figure( figsize=(wSize, hSize))
    number_of_files = len(list_of_files)
    row = number_of_files/col
    if (number_of_files%col != 0):
        row += 1
    for i in range(number_of_files):
        a=fig.add_subplot(row,col,i+1)
        image = imread(mypath+'/'+list_of_files[i])
        imshow(image,cmap='Greys_r')
        axis('off')

showImagesMatrix(listOfImages,col)

based on @Michael answer

score 1 · Answer 11 · answered Apr 22 '19 at 09:02

The answers in this thread helped me: Combine several images horizontally with Python

The problem of using matplotlib was the displayed images' definition was really bad. I adapted one of the answers there to my needs:

The following code displays the images concatenated horizontaly in a jupyter notebook. Notice the commented line with the code to save the image if you'd like that.

import numpy as np
import PIL
from IPython.display import display

list_im = ['Test1.jpg', 'Test2.jpg', 'Test3.jpg']
imgs    = [ PIL.Image.open(i) for i in list_im ]
# pick the image which is the smallest, and resize the others to match it (can be arbitrary image shape here)
min_shape = sorted( [(np.sum(i.size), i.size ) for i in imgs])[0][1]
imgs_comb = np.hstack( (np.asarray( i.resize(min_shape) ) for i in imgs ) )

# save that beautiful picture
imgs_comb = PIL.Image.fromarray( imgs_comb)
#imgs_comb.save( 'combo.jpg' )    

display(imgs_comb)

score 0 · Answer 12 · answered Sep 13 '18 at 06:05

based on @ChaosPredictor answer

from matplotlib.pyplot import figure, imshow, axis
from matplotlib.image import imread

def showImagesMatrix(list_of_files, col=10, wSize=5, hSize=5, mypath='.'):
    fig = figure(figsize=(wSize, hSize))
    number_of_files = len(list_of_files)
    row = number_of_files / col
    if (number_of_files % col != 0):
        row += 1
    for i in range(number_of_files):
        a=fig.add_subplot(row, col, i + 1)
        image = imread(mypath + '/' + list_of_files[i])
        imshow(image, cmap='Greys_r')
        axis('off')

then

from pathlib import Path
p = Path('.')
num_images = 30
list_of_image_paths = [str(x) for x in list(p.glob('../input/train/images/*'))[:num_images]]

showImagesMatrix(list_of_image_paths)

# or with named args
showImagesMatrix(list_of_image_paths, wSize=20, hSize=10, col=5)

score 0 · Answer 13 · answered Sep 12 '22 at 11:49

I used @dval suggestion to display network graphs build with graphviz, and it works directly (no need to create image)

from IPython.display import display
dot1 = Digraph()

# Add nodes
dot1.node('1')
dot1.node('3')
dot1.node('2')
dot1.node('5')

# Add edges
dot2= dot1.copy()
dot2.edges(['12', '13', '35'])
 
display(dot1,dot2)

enter image description here

Display multiple images in one IPython Notebook cell?

13 Answers13

Horizontal layout

Short answer

Long answer

Linked

Related