Open In App

Resize the image in jupyter notebook using markdown

Improve
Improve
Like Article
Like
Save
Share
Report

Markdown is a lightweight and popular Markup language. It is very similar to HTML (HyperText Markup Language). Markdown is mostly used by data analysts and data scientists to make their Jupyter Notebook more attractive, readable, and to give a website-like feeling to their notebook.

Note: We can not use markdown directly into jupyter notebook because it doesn’t support HTML tag directly but however we can use with Markdown option for inserting/resizing images.

Markdown is used at creating/Inserting the following in the notebook:

  • Headings
  • Bold & Italic text
  • Mathematical Symbols
  • Blockquotes
  • Line Break
  • Horizontal Lines
  • Ordered Lists
  • Unordered Lists
  • Internal and External Links
  • Image
  • Video

Insert and resize an Image

Create a notebook or open an existing notebook of type Python3 in Jupyter Notebook. Change the cell type as Markdown as shown below. 

Insert an image using markdown language

We cannot change the size of the image using the markup, however, we can change its size using the HTML directly. We can use the img tag with width and height properties. We can specify either name of the image present in the local system or the URL of the image (link)

The syntax for img tag:

<img src=”imagename/url” width=”XXX” height=”XXX”>

Note: Make sure that the image you want to insert is in the same folder as jupyter notebook.

Run the cell by clicking the run button at the top or by keyboard shortcut shift+enter.

Example:

Python3




# this code is belong to markdown in jupyter
<img src="GFGImage.jpg" width="500" height="340">
<img src="GFGImage.jpg" width="200" height="500">


Output:

Explanation: Here we passed an image name that is in the local system to src and modified the width and height of an image.

Specifying the URL of image

Here we will use the image URL to insert the image in markdown.

Python3




<img src = https:GeeksforGeeks.svg/1200px-GeeksforGeeks.\
svg.png width = "200" height = "500" >


Output:

Explanation Here we passed URL which will be available at the top of your browser window of an image to src and specified the width and height of an image.


Last Updated : 08 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads