A short article on how to work with images so they display correctly in Obsidian and when published with Pelican.


This default Obsidian format, with drag and drop into the document, works in Obsidian, but not Pelican.

Obsidian Native: (doesn't work on this site)

![Obsidian](CleanShot%202022-01-05%20at%2019.30.59@2x.png) Obsidian


Obsidian knows where to find the image, whereas Pelican needs a path added to find the image. In this case /images/

Added Path:

![Added Path](/images/CleanShot%202022-01-05%20at%2019.30.59@2x.png) Added Path

Img Tag

But the images are 2x based on the image format and the Retina display it was captured from. It needs to be resized to 50% to display properly. There is not a size option available in Obsidian markdown. You can revert to a standard img html tag to make this work. However, the image will not display in Obsidian.

Use <img> tag:

<img src="/images/CleanShot%202022-01-05%20at%2019.30.59@2x.png" alt="alt text" title="image Title" width="50%"/>

alt text

1x with Path

The solution is to use images that are 1x sized. Or, set your screen capture tool to 1x, non Retina. This way the images will display correctly in Obsidian and when published with Pelican, with only the path being added manually to the file name.

1x with path added:



What automation tools are available in Pelican to automatically reformat and resize the images?

To be continued....