163

I want to add the image in the Jupyter notebook and I want to have particular height and width. When I try to add the image using

![](img.png)

the code is adding the complete image but as per the image dimension and I don't have control over it. I try to use ![](img.png =200x100) but then the image does not appear.

Does anybody know of a way to add an image with pre-specified dimensions?

Improve this question
2
  • 2
    Possible duplicate of How to change image size Markdown? Commented Jan 11, 2017 at 20:58
  • In the future if you use ![alt] you will see "alt" appear and you know it is working, but that something in your link did not work. Commented Nov 15, 2017 at 21:32

10 Answers 10

Reset to default
136

If you're attaching your images by inserting them into the markdown like this:

![Screenshot.png](attachment:Screenshot.png)

Do this instead:

<div>
<img src="attachment:Screenshot.png" width="500"/>
</div>

Unfortunately, it doesn't work without the surrounding divs:

// this does not work
<img src="attachment:Screenshot.png" width="500"/>

PS I'm using jupyter_core-4.4.0 & jupyter notebook.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

This should be the right answer, it works also with google colab using an url in the src tag
Strange, it doesn't work for me, its simply giving blank. For some reason I guess its not loading the attachment. (I'm using the latest version of Jupyter notebook and python btw
What I've found in Jupyter is that width DOES work but height DOES NOT.
Works for me, no need for attachment: and works without div
When exporting to html the image is not shown anymore.
|
91

You can use html directly

<img src="image.JPG" alt="Drawing" style="width: 200px;"/>
Improve this answer

4 Comments

I think this is the correct approach. Unfortunately block attributes ({: width=200}) are not supported by jupyter's markdown renderer.
Great answer! Is is possible to set the height and width at the same time?
@edesz: yes: for example, use style="width: 400px; height: 300px;" in Mark's answer above
you can also use a percentage value for image width <img src="2D_affine_transformation_matrix.svg" width="90%"/>
63

Image control in Jupyter markdown is possible but the image needs to be preceded by "attachment" or it doesn't display.

<img src="attachment:image.png" width="400">

Cf. Simon Byrne.

With a url it works directly:

<img src=https://image.slidesharecdn.com/tensorflowppt-160408142819/95/tensorflow-4-638.jpg?cb=1460125744 width="500">
Improve this answer

4 Comments

In Jupyter Lab I had success resizing with width=200 but not the style="width: 200px;".
The problem is that attachments are no longer recognized and exported to html, reveal, etc. when this syntax is used.
Note that at least for me, I first have to paste by keystroke into a Markdown cell to create the ![](img.png) syntax, then replace that with the above. Otherwise, it can't seem to find the attachment source image (attachment:image.png).
Currently this works in colab, while the body of the answer doesnt. <img src="image.slidesharecdn.com/tensorflowppt-160408142819/95/…" width="500px"/>
15

You can also use Image module from IPython.display

https://ipython.org/ipython-doc/3/api/generated/IPython.display.html#IPython.display.Image

for example

from IPython.display import Image
Image(url='https://www.maxpierini.it/ncov/pics/ITA.png', width=200)

Use filename= instead of url= if the image is a local file.

Improve this answer

2 Comments

In contrast to html-tags this solution is preferable, as it allows to export the notebook to pdf (via latex) keeping the resized images.
In addition to Dominik's, this solution also integrates nicely with Jupyter/IPython. I already had to use IPython's display to inject Python variables into Markdown, so this was just one import away.
9

You need to use HTML as Mark showed you, since you cannot do it with ![](img.png) syntax. From John Gruber's website:

As of this writing, Markdown has no syntax for specifying the dimensions of an image; if this is important to you, you can simply use regular HTML tags.

Improve this answer

Comments

4

On Python 3.11, MacOS 14.0, this works in a markdown cell:

<img src="Screenshot.png" width="500"/>

But this doesn't:

<div>
<img src="attachment:Screenshot.png" width="500"/>
</div>

Versions used:

$ pip list|grep jupyter
jupyter                  1.0.0
jupyter_client           8.2.0
jupyter-console          6.6.3
jupyter_core             5.3.0
jupyter-events           0.6.3
jupyter_server           2.5.0
jupyter_server_terminals 0.4.4
jupyterlab-pygments      0.2.2
jupyterlab-widgets       3.0.7
jupyterthemes            0.20.0
Improve this answer

Comments

3

I'm using JupyterLab in a JupyterHub instance and the other answers didn't work for me. I've solved the problem with a <div> around my image. Here is my 400px width and right aligned image:

<div style="max-width:400px;margin-left: auto; margin-right: 0;">
    ![My Image alt text](image.jpg)
</div>

Keep newlines inside the div tag.

Improve this answer

2 Comments

Seems specific to JupyterLab, because in Jupyter notebook, this didn't work.
Great, because the image is kept when exporting to HTML (in contrast the <img> proposals). Note this works in JupyterLab only, when there are newlines after <div> and before </div>, see github.com/jupyter/notebook/issues/4504.
2

Though changing a drag-and-drop and drop image from:

![image.png](attachment:193ed9f1-3892-4fc5-b97a-d7d315b61e53.png)

to

<img alt="first image" src="attachment:193ed9f1-3892-4fc5-b97a-d7d315b61e53.png" width=500>

Will allow the image to be displayed and resized in the short term. I have found it breaks when exporting to HTML or PDF with nbconvert.

The following seems to work in Jupter Notebook Version: 7.2.1

<div style="max-width:500px;margin-right: auto; margin-right: 0;">
    
![image.png](attachment:193ed9f1-3892-4fc5-b97a-d7d315b61e53.png)
    
</div>

Both the lack of indentation and the empty line above the ![image.png] line seems to be necessary in my testing.

(this is similar to an answer here but with a refinement. I don't have the rep to comment so I'm posting it here as an answer as I believe this might help other users, and the OP)

Improve this answer

Comments

1

enter image description here

change this 'Code' to 'Markdown' as like the screenshot. Later add

<div> <img src="bar graph.png" alt="Drawing" style="width: 400px;"/></div>

you are done

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-1

  1. Ensure that the cell is in “markdown” format.

  2. Ensure that the image is located in the same folder as the .ipynb file being edited, and then execute the following code:

<img src="D4S9C3.png" width="500" height=400"/>
  • You must replace D4S9C3.png with the name of your image and the width and height values.

Note: If you are editing in VSC, you do not need to have the Visual HTML extension, but I am compiling with Anaconda (Python 3.13.7).

In this page comes the instruction:
https://www.geeksforgeeks.org/python/resize-the-image-in-jupyter-notebook-using-markdown/

Improve this answer

1 Comment

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.