Resize embedded content

I’d like to be able to adjust the size of images and videos . It’s not very convenient to have a a single image take up almost the entire width/height of a page.


I also would like this as well. In addition, being able to zoom into an image (as a pop up that darkens the background like it does here on the obsidian forum, would be handy.


This is very important feature for me as well. I used to take lots of screenshot of graphs and flowchart to fill my notes. In preview mode it fills the page. Totally inconvenient the user experience. If i can do this with css, someone can help.


:100: I totally agree. Having to worry about downsizing images before uploading them to a note is hindering the speed of my note creation.


One approach, that appears to be relatively markdown friendly, could be to place attributes in the currently unused pretty link position.


Or just recognize that something like curly braces contain attributes


Alt text could be supported like this


I’m linking this because it’s related and seems like pandoc has a reasonable approach, with the potential for additional utility

![[caption text]](graphic.png){width=50%}



This approach could easily allow alt-text


As another option, I’ve seen something like this in the forums somewhere also.

![[<img  width="80px">graphic.png]]

As the title says, it would be great if we could forcefully resize images so they don’t take up the whole screen. Right now, when simply copy+pasting images from the web, you need to download them, resize them in PS/Gimp, then paste them into obsidian.

Some markdown syntax that already works in other programmes is as follows:

![[plunger-cap.png =50%x50%]] // percentage
![[plunger-cap.png =400x400]] // pixels

where the first integer is width, second is height.

What do you think?

1 Like

In addition to syntax, as you propose, it would be great to also have a widget handle for dragging on the image and resizing it, while in Preview mode.

(And as I imagine it, that widget function would result in the Markdown syntax being updated in the Markdown source.)


Definitely a key feature

Note that it’s somewhat possible to do now by directly linking to the image and using HTML, e.g.,

<img style="width: 25%" src="app://local//[notebook dir]/obsidian/test1/48ubgp.jpg" alt="48ubgp.jpg">

but obviously this is not ideal.

Being able to provide a percentage or absolute width in particular is almost mandatory. Using the dev tools to set a global image preview size… not sustainable :wink:


By the way, you can just directly copy the URL of the image (right click, copy image address/copy image link), and reference it like a external link, but with a !.

This would be a great feature to add! I use Obsidian to take notes with images attached by pasting. There’s no need to actually compress the embedded image file, adjust the display width would be enough!

Another markdown app I use has a link style like this to specify image width: ![IMAGE](resources/92144EFF1B136A725B5E70B356019505.jpg =430) it looks a lot like what Obsidian does, only has the addition = width part.

Clearly need this feature

+1 on this feature. as a PhD student in engineering, I take notes of a lot of formulations, like integer programs and so on. I usually copy the formulation on my notes from a paper, or from the class notes/ppt file, but end up with a HUGE image in the middle of the notes.

I would love to resize it to match the Obsidian font size for example.

1 Like

+1 This feature would be super helpful!

Would love this as well.

Edit: @dubinindmitry has a very elegant solution for this in his Obuntu theme. To your obsidian.css, add:

/* Enlarge image on hover */
.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /*experiment with values*/
  transition: transform 0.25s ease;

.markdown-preview-view img:hover {
  -webkit-transform: scale(2); /* experiment with values */
  transform: scale(2);

+1 from me.

Meanwhile one can try some workaround techniques based on “overloading” image’s attributes in combination with CSS selectors as described here:


I use a lot of images when taking notes (ecology, biology etc.) and they get unreadable many times with images taking all space.

1 Like

+1 for this. Would to really helpful for a student like me.

+1 yes please would be very helpful

Image resize will be implemented in a future release


+1 for me as well. Would like to migrate my notes from Quiver, which uses this syntax for its markdown