Resize the image in jupyter notebook using markdown

Question

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  but then the image does not appear.

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

Solution 1

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

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

These attachment links don't work:

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

DO THIS. This does work. Just add div brackets:

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

Hope this helps!

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

Solution 2

You can use html directly

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

Solution 3

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">

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Waylan]

Possible duplicate of How to change image size Markdown?

[rAntonioH]

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.

[Quantum7]

I think this is the correct approach. Unfortunately block attributes ({: width=200}) are not supported by jupyter's markdown renderer.

[webelo]

In Jupyter Lab I had success resizing with width=200 but not the style="width: 200px;".

[memeplex]

The problem is that attachments are no longer recognized and exported to html, reveal, etc. when this syntax is used.

[ijoseph]

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).

[Arthur]

Currently this works in colab, while the body of the answer doesnt. <img src="image.slidesharecdn.com/tensorflowppt-160408142819/95/…‌​" width="500px"/>

[ego2509]

This should be the right answer, it works also with google colab using an url in the src tag

[Raunak Thomas]

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

[edesz]

Great answer! Is is possible to set the height and width at the same time?

[Admin]

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.

[Quetzalcoatl]

@edesz: yes: for example, use style="width: 400px; height: 300px;" in Mark's answer above

[SteveWithamDuplicate]

What I've found in Jupyter is that width DOES work but height DOES NOT.

[Cam Cairns]

you can also use a percentage value for image width <img src="2D_affine_transformation_matrix.svg" width="90%"/>