Skip to Content

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.

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.

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.

Edit menu of the jupyter notebook

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

Image inserted using the edit menu

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.

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:

Image as would appear on a Jupyter Notebook

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.

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:

Image inserted using html in the markdown

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

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:

Image inserted using the code cell

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.


Subscribe to our newsletter for more informative guides and tutorials.
We do not spam and you can opt out any time.


Author

  • Piyush

    Piyush is a data scientist passionate about using data to understand things better and make informed decisions. In the past, he's worked as a Data Scientist for ZS and holds an engineering degree from IIT Roorkee. His hobbies include watching cricket, reading, and working on side projects.