The 4 ways to insert images in Jupyter Notebook

You are building your notebook and would like to make it more informative and attractive with the inserted image. How to do this? In this post, I will show different approaches to inserting an image into Jupyter Notebook.

1. Drag and drop image to Markdown cell

The most user-friendly way to insert an image into Jupyter Notebook is to drag and drop the image into the notebook. It's possible only to Markdown cells. The image is encoded with Base64, and its text representation is included in the ipynb file. The animation below shows how you can do it:

2. Insert image from URL

Inserting an image that is available via URL is very simple. It can be done in the Markdown cell:

![alternatvie text](URL-to-image)

The example:

![convert notebook to web app](https://raw.githubusercontent.com/mljar/visual-identity/main/mercury/mercury_convert_notebook.png)

There are no quotes or double quotes in the URL. What is more, in the Markdown, you can use the HTML syntax:

<img src="URL-to-image" alt="Alternative text" />

You can also insert an image in the Python cell:

from IPython import display
display.Image("URL-to-image")

If your image is not available from the URL, you can use GitHub for this. Create some repository and upload an image file there (this can be easily done on the GitHub website). Then click on the image and click on the Download button. The GitHub will open a new tab with your image. You can use the URL address in the Jupyter Notebook.

3. Use local file

Instead of using the URL address, you can use local files, just pass the path to the file. It is important to remember that the image path needs to be a subpath of the notebook. For example, you can't pass the image from a different drive. You can use an image from the directory that is in the same directory as the notebook. You need to remember to add the image to the code repository.

For the Markdown cells:

![alternative text](path-to-image)

or

<img src="path-to-image" alt="Alternative text" />

For Python cells:

from IPython import display
display.Image("path-to-image")

Convert image to Base64

You can convert the image to Base64 text representation and use it to display an image. It can be done on one website, for example base64-image.de - upload your image there and copy the output data. You can use the output in the Markdown cell:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS ... the rest of data" />

or in Python cell:

from IPython import display
from base64 import b64decode
base64_data = "iVBORw0KGgoAAAANSUhEUgAABL ...  the rest of data "
display.Image(b64decode(base64_data))

This approach should be used for very small images (< 10KB). For large images the final string is very long and makes the Jupyter Notebook and text editors very laggy.

Summary

The images in the notebook make it more attractive. We can insert images into the notebook in many ways. My preferred way is to upload images to GitHub and add their URLs in the Markdown.