Smarter handling of embedded images

Feature requests
1

Use case or problem

I am annotating YouTube videos and trying to import my notes. These sometimes include embedded images - screen grabs. These display in the markdown as something like…

![Zozc!3.x_ZS of(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAUDBBAODg0ODQ0OEA0ODQ0ODQ4NEA8NDQ8NDw0NDR...

These display properly BUT they make editing the markdown IMPOSSIBLE because the markdown is completely overwhelmed by thousands of bytes of this stuff. The entire visible page is a continuous stream of bytes. This is what it looks like to me…

https://1drv.ms/u/s!AjaZ-t3uLVN_0N1316E8WdE--pdEXQ?e=i3Trng

Proposed solution

Few ideas:

  • Plug-in to export these embedded images into an “images” folder and replace embedded data with local link.
  • Format the markdown of these images (or any really long link) so they are collapsed by default. Don’t like the markdown files being huge though.
  • Preferred option is a built-in converter, not a plug-in, that notices these situations upon paste and offers to move the embedded images into another folder. Also when an image is embedded and you are previewing it, show a menu button near the image for “export this image” and “export all images in file”.

Current workaround (optional)

Delete the images

Related feature requests (optional)

5 Likes
2

+1 for this.

It would be awesome if links were shown as the title only, but when the cursor is inside the link, expand to show the full URL. Bear does this in a similar way and it keeps the markup looking very clean.

3

How do you even capture and embed them as base64? I mean not how to use the data object instead of a link, but what is your workflow to easily capture screengrabs from a video as a base64-encoded string?

4

This happens to me when pasting from OneNote.

5

I am bumping into this issue as well. My usecase is when working with charts in Google Sheets, downloading the chart as a PNG results in a horrible resolution. Clicking ‘copy chart’ and pasting the image gives a much better resolution but in Obsidian it results in a base-64 encoded link which totally kills the editing experience.

6

Copied files into vault from previous note systems (possibly TwiddlyWiki or Joplin).

7

:point_up: A good workaround is to use pandoc to extract the images to files and replace the link with a ref to the created file.

You can try it following this example (from a vault directory):

pandoc --extract-media ./media/ -s ds3231_pinout.md -o ds3231_pinout-pandoc.md
  • the destination directory for image files (./media) is created if absent
  • the -s option ensures that enventual front matter is preserved

To run this command on my vault folders, I used ripgrep to select all md files and pipe the list to xargs(1) which handles the loop:

rg -l 'data:image' | xargs -i pandoc --extract-media ./media/ -s {} -o {}

If you don’t want to install ripgrep you should get the same output with GNU grep:

grep -l -e 'data:image' *md