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.
100 Likes
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.
8 Likes
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.
2 Likes
I totally agree. Having to worry about downsizing images before uploading them to a note is hindering the speed of my note creation.
3 Likes
One approach, that appears to be relatively markdown friendly, could be to place attributes in the currently unused pretty link position.
![[graphic.png|{width=50%}]]
Or just recognize that something like curly braces contain attributes
![[graphic.png{width=50%}]]
Alt text could be supported like this
![[graphic.png{width=50%}|alt-text]]
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%}
or
![[graphic.png]]{width=50%}
This approach could easily allow alt-text
![[graphic.png|alt-text]]{width=50%}
As another option, I’ve seen something like this in the forums somewhere also.
![[<img width="80px">graphic.png]]
13 Likes
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.)
15 Likes
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 
2 Likes
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:  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);
}
9 Likes
+1 from me.
Meanwhile one can try some workaround techniques based on “overloading” image’s attributes in combination with CSS selectors as described here: https://www.xaprb.com/blog/how-to-style-images-with-markdown/.
+1
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
16 Likes
+1 for me as well. Would like to migrate my notes from Quiver, which uses this syntax for its markdown