Image resize: Allow relative units, not just pixels (or Pandoc notation)

Feature requests
1

Use case or problem

We got an extended syntax for (embedded) image resizing—a good first step, but it only allows pixels as units.

Pixels are not a good unit for different screen sizes or even PDF printing, it would be preferable to be able to use relative units like %, em and rem.

Proposed solution

Add the possibility to specify %, em and rem as relative units, instead of just pixels. Maybe like so:

![[image.png|50%x50%]]
![[image.png|50%]]
![[image.png|70em]]
![[image.png|70rem]]

Since many of us are surely using Pandoc for post-processing Obsidian Notes into papers or books, it would even be better to (also?) support the Pandoc link_attributes notation:

![Image](image.png){#id .class width=50% height=50%}

Current workaround (optional)

<img src="app://local/home/user/Documents/vault/image.png" style="width: 50%;" />

This format actually sucks, since it breaks the idea of using relative links.

My alternative idea of simply using

<img src="image.png" style="width: 50%;" />

produces an error

GET app://obsidian.md/image.png net::ERR_FILE_NOT_FOUND

Related feature requests (optional)

https://forum.obsidian.md/search?q=image%20resize

18 Likes
2

I suppose this is the latest feature request for this, so I’ll chime in here instead of creating a new topic.

Use case or problem

The current image markup doesn’t allow specifying full-width images ![[image.png|100]]

Proposed solution

Implement something like ![[image.png|full-width]]? I don’t know what’s under the hood, probably not markdown-it-imsize but something like it.

Current workaround (optional)

A workaround I used is to add some custom CSS to the current theme:

/* Images:; Full width images for the whole note or declared through alt attribute selector overloading */
/* Usage (all images in the note): add to frontmatter `cssclass: full-width-images` */
/* Usage (specific image): embed with `![[image.jpg|Image description containing .full-width-image]]` */
.full-width-images.markdown-preview-view .image-embed img:not([width]),
.image-embed img[alt~=".full-width-image"],
.image-embed img[alt~=".full-width"] {
  width: 100%;
}

This workaround smells, because it’s a custom style that in fact does functionality (instead of presentation).

Another workaround is to drop to HTML and set relative units in the style attribute:

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

Or support inline <style> tags, but I assume since this isn’t supported by now there’s a good reason for it.

<style>img { width: 100% }</style>

![[example-image.jpg]]

etc. etc. etc.
3

I second this. PLEASE add resizing by percent.

5 Likes
4

Resizing by percent should probably take precedence over other additional units.

5

Commenting to +1 this. Especially useful for viewing my notes on mobile. Currently, my larger images that look fine on desktop are cut off the screen on mobile.

6

+1

My hacky workaround for now is using the following CSS snippet:

img[alt*="w90"] {
    width: 90%;
}

img[alt*="w80"] {
    width: 80%;
}

img[alt*="w70"] {
    width: 70%;
}

img[alt*="w60"] {
    width: 60%;
}

img[alt*="w50"] {
    width: 50%;
}

which then allows me to have an image like ![[myrelativeaddress|w50]] and that shows the image at 50% width etc

4 Likes
7

This is a particularly pertinent issue now, since Pandoc 3.1.7 just added support for Wikilink images. However, Pandoc doesn’t recognize image attributes combined with wikilinks, since Obsidian and other apps using wikilinks don’t support the image attribute syntax.

John MacFarlane (Pandoc creator) writes this in the issue I raised on Github: Link attributes on Wikilink images don't seem to work · Issue #9048 · jgm/pandoc · GitHub

I am reluctant to support a syntax that nobody supports. I don’t think you can provide such attributes on, e.g., GitHub wiki or Obsidian…

And my response:

I’m not entirely sure which syntax you are referring to. If it’s the wikilink image syntax, then didn’t you just add support for that?

If it’s the {width=50%} image size syntax, then my question is, isn’t that the default Pandoc image sizing/attribute syntax?

Or perhaps it’s the combination that you are reluctant about? If so, can you clarify why? If you support wikilink images, there should be some way to specify their size too, don’t you think?

And his response:

I meant the combination.
We could support it. But the point of the wikilinks extension was to allow interoperability with specific platforms that support this syntax, and they don’t support the use of image attributes with it…

Therefore, to ensure better compatibility with Pandoc, I second the need to either support Pandoc’s image attribute syntax, or to establish a more robust image resizing syntax with unit support that Pandoc could recognize. Preferably both.

Feel free to contribute on the Github issue above, and indicate your interest / support.

4 Likes
8

Adding my vote to this.

Yesterday I resized a bunch of images on desktop and in mobile they extend beyond the screen. It seems the pixel resizing as a hard limit doesn’t work well cross platform.

A percentage that works relative to the screen would be much better.

Hope to see something added soon.

1 Like
9

A must-have feature for Obsidian Publish - I want all viewers of my page to experience the same size of the image, regardless of their screen DPI. That’s why we need relative units like em or rem.

1 Like
10

Just wanted to add my +1 to this. I want to use custom images similar to how you would custom emotes, and it would be nice if they would adapt to changing font sizes like headings

1 Like
11

My workaround for these kind of issue is to create a css snippet for iPhone only, and then force image to display in certain width, overriding width param.

12

I like to +1 this

As someone who uses desktop and mobile there is no way to dynamically adapt image size without full scale (that is using a gigantic size so it caps on screen width)

1 Like