How to embed image in jupyter notebook from a local file or web resource?

This tutorial guides you on how to insert or embed image in jupyter notebook from a local file or web resource and also using base64 encoding algorithm. Jupyter Notebook is a open-source software provides as easy-to-use interactive data science environment across many programming languages like Python.

Embed image in jupyter notebook

There are three ways to embed or add image in jupyter notebook. The first two ways are standard way that relies on external images i.e., either from local file or an image URL. Apart from these two ways, there is another approach called Base64 encoding method.

Let’s see all three ways of embedding image in jupyter notebook with an example for our understanding.

Way 1: Embed an image from a local file

To insert images from local machine you need to provide path to the local file. In this example, we will be using Image class from IPython’s display module as shown below.

from IPython.display import Image
Image("img/notebook.jpg")

Below is the screenshot which illustrate the same.

Note, there is a cons if you follow this way because the local file path provided may not work if you run the scripts in another system. Also you have to make sure that you have included all the images that you have used in the notebook using local file path.

Way 2: Embed an image from URL or web resource

This is another way of inserting images in jupyter notebook using image URL or web resource as shown below.

from IPython import display
display.Image("https://www.gstatic.com/webp/gallery/4.sm.jpg")

Below is the screenshot which illustrate the same.

Note, there is a cons to follow this way also as in this case, the image hosted by the provider may remove or change at anytime.

Way 3: Add an image to notebook by Base 64 Encoding

As you know, the first two ways depends on external resources. But in this way, we embed image as a text using Base64 encoding algorithm.

Base64 is a binary-to-text encoding algorithm for converting data including images as plain text, which is one of the most popular binary-to-text encoding schemes. It is commonly used in HTML, JavaScript, CSS and XML scripts.

You can use any online tool to convert images to Base64. Then copy the encoded image code and use Python standard base64 library to decode the same as shown below.

from IPython import display
from base64 import b64decode
base64_image_code ="/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKC/X/ANdqPrF/08LCwuD9V3yVh3uNX//Z"
display.Image(b64decode(base64_image_code))

That’s it. In this approach you no need to worry about external resources. And they are all available as image code within your jupyter notebook.

Hope it helped 🙂

How to embed image in jupyter notebook from a local file or web resource?

Embed image in jupyter notebook

Way 1: Embed an image from a local file

Way 2: Embed an image from URL or web resource

Way 3: Add an image to notebook by Base 64 Encoding

You’ll also like:

References