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 ![](img.png =200x100) but then the image does not appear.

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

Possible duplicate of [How to change image size Markdown?](http://stackoverflow.com/questions/14675913/how-to-change-image-size-markdown) — Waylan, Jan 11 '17 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. — rAntonioH, Nov 15 '17 at 21:32

score 116 · Answer 1 · edited Apr 01 '23 at 16:33

116

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.

edited Apr 01 '23 at 16:33

Connor

4,216
2
29
40

answered Aug 06 '19 at 21:54

MrFun

2,303
1
15
16

2

This should be the right answer, it works also with google colab using an url in the src tag – ego2509 Apr 04 '20 at 18:56
6

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 – Raunak Thomas Oct 26 '20 at 14:15
2

What I've found in Jupyter is that width DOES work but height DOES NOT. – SteveWithamDuplicate Apr 18 '22 at 19:59
Works for me, no need for `attachment:` and works without div – 27px Jun 11 '23 at 06:39

score 82 · Answer 2 · answered Feb 11 '17 at 20:34

82

You can use html directly

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

answered Feb 11 '17 at 20:34

Mark

1,374
11
12

4

I think this is the correct approach. Unfortunately [block attributes](https://kramdown.gettalong.org/quickref.html#block-attributes) (`{: width=200}`) are not supported by jupyter's markdown renderer. – Quantum7 Jan 18 '18 at 15:04
2

Great answer! Is is possible to set the height and width at the same time? – edesz Dec 11 '20 at 14:41
@edesz: yes: for example, use ``style="width: 400px; height: 300px;" `` in Mark's answer above – Quetzalcoatl Feb 17 '22 at 03:47
you can also use a percentage value for image width – Cam Cairns May 03 '22 at 08:34

pudepied · Answer 3 · 2018-03-07T11:47:39.490

60

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

edited Mar 07 '18 at 11:47

answered Mar 07 '18 at 11:28

pudepied

799
6
5

2

In Jupyter Lab I had success resizing with `width=200` but not the `style="width: 200px;"`. – webelo Jun 21 '18 at 13:59
2

The problem is that attachments are no longer recognized and exported to html, reveal, etc. when this syntax is used. – memeplex Jun 29 '19 at 23:44
1

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`). – ijoseph Sep 23 '19 at 15:52
3

Currently this works in colab, while the body of the answer doesnt. – Arthur Feb 12 '20 at 03:00

score 12 · Answer 4 · answered Sep 04 '20 at 16:11

12

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.

answered Sep 04 '20 at 16:11

Max Pierini

2,027
11
17

1

In contrast to html-tags this solution is preferable, as it allows to export the notebook to pdf (via latex) keeping the resized images. – Dominik Kern Oct 12 '22 at 09:20

score 9 · Answer 5 · answered Nov 01 '18 at 14:47

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.

score 2 · Answer 6 · answered Nov 09 '21 at 18:36

2

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>

answered Nov 09 '21 at 18:36

neves

33,186
27
159
192

Seems specific to JupyterLab, because in Jupyter notebook, this didn't work. – ions me Nov 26 '22 at 18:03

score 1 · Answer 7 · answered Jan 16 '22 at 10:08

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

answered Jan 16 '22 at 10:08

Srabon Bhowmik

21
1

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](/help/how-to-answer). – Community Jan 16 '22 at 10:43

Resize the image in jupyter notebook using markdown

7 Answers7

Linked

Related