Insert Image in a Jupyter Notebook

Jupyter Notebooks offer a great way to experiment and document your work with text, code, equations, graphs, images, etc. all inside of a single notebook. In this tutorial, we’ll look at how to insert/embed an image in a Jupyter Notebook with examples.

If you prefer a video tutorial over text, check out the following video detailing the steps in this tutorial –

How to embed Image in a Jupyter Notebook?

There are a number of ways to embed an image. You can use the Edit menu on the menu bar, write markdown code, or write python code to insert an image inside a jupyter notebook.

1. Embed Image using the Edit Menu

Note that for this method you must have the image locally saved on your computer. The advantage of this method is that it “actually” inserts the image in your notebook and you don’t really have to worry if the original image gets deleted or modified. Also, this image is retained if you export the Jupyter Notebook as an HTML file which may not be the case with other methods mentioned below.

For this, first, convert your cell to a markdown cell and then go to Edit -> Insert Image which will open up a dialog box asking you to locate the image from your computer.

For example, the image below shows the output of using the above method to insert an image from the local machine.

2. Embed Image in a Markdown Cell

There are a number of ways to embed an image in a Markdown cell. You can directly embed it similar to how you embed hyperlinks in markdown, or you can use HTML inside markdown to locate and display the image.

Direct Embedding

This is similar to inserting a link in markdown. The following is the markdown code example to insert an image locally saved in your computer.

![Cat](images/no_regrets_cat.jpg)

Output:

Note that on some operating systems you may not be able to display an image if its filename has spaces. You can also use this method to display an image from a web URL, just use the image URL instead of its file location.

Using HTML in Markdown

This is similar to adding an image on a webpage using the img tag. The best part of using this method is that with HTML you can control the width and height of the image to your liking. For example, let’s display the same image above, but this time a little smaller.

Here's a **cat** for you <img src="images/no_regrets_cat.jpg" width=400 height=400 />

Output:

You can also use this method to display image from a web URL.

3. Embed image in a Code Cell

Images can also be embedded via a code cell. This method requires the usage of a function to display the image. You can also specify the width and height you want for the image in the notebook.

from IPython.display import Image
Image(url= "images/no_regrets_cat.jpg", width=400, height=400)

Output:

You can use this to display image from a web URL as well.

With this, we come to the end of this tutorial. We hope that it provided some value to you. The code examples and results presented here have been implemented in a Jupyter Notebook with a python (version 3.8.3) kernel.