How I handle attachments to my notes in Obsidian

How attachments work on a text based note

In Obsidian every attachment you add or paste to your notes create a “new file” that is, in fact, the file you have just added or pasted in your note.

This happens because Obsidian notes are text files, hence there is no way^[1] to have an image or a PDF file directly attached to your note. You have to have a link where you either link to or embed such a file in your note.

So, instead of making the image part of your note, Obsidian creates a reference to that file and when displaying the information to you it does what you asked for: 1) presents you a link, from where you can open the file in Obsidian or 2) displays the contents of the file directly in your note by embedding it in the position you added the instruction to do so.

This approach has some pros and cons, as everything in life. A quick list, as I see it:

Managing attachments

With the initial understanding made clear, here it is how I manage things.

In my vault I use folders, tags and links to connect notes. With that structure, I’ve set up Obsidian to add attachments in a subfolder of the current note folder. This allows me to keep all the contents of a note together 99% of the time, with the exception being when I reuse an image somewhere else. I could assign any name to that folder, and my choice was using 00attachments. I like it being at the top of the list of files.

Keeping all the contents together make it easier to share it with other people or to see it as a whole block of information. If I want to share my family notes with my wife, I simply share the folder and it is all in there. There’s no need to look for information elsewhere.

As attachments are independent files and are either linked to or embedded in a note, they don’t necessarily need to be local files. They might be stored in a cloud — like Onedrive, Google Drive, imgur, etc. — and work in the same manner they would if they were locally available as long as you have Internet connectivity available. And this allows for defining specific strategies according to the type of information and attachment.

For example, you might want your family information available all the time, including offline, but you might not have that need with recipes and taxes information, which you can have available as a file in the cloud.

Another thing is taking care so that you don’t duplicate your information. For that, I use the same strategy as I use for connecting notes: descriptive names, information based on their context and keeping attachments and notes always discoverable. Reusing images and other files must be addressed in the same manner as reusing information from notes.

Formatting images

The way Markdown works is by converting what you wrote to HTML and displaying that in your screen^[2]. With that, you can benefit from the other standard that goes together with HTML: Cascading Style Sheets — or CSS. These stylesheets exist to help separate information — your text — from presentation — how it appears on your screen.

You can format images directly at their <img> tag, that results from parsing the embedded link from a image after the note is processed by Obsidian, or by formatting other elements that contain such a tag. This second option also allows you to work more easily with captions, alternate texts, and the like. It is usually easier to do that through callouts as they add some container elements that can be used to format the image and additional text information.

One example of code for adding captions is reproduced from Discord below:

.callout[data-callout="caption"] {
    background-color: transparent;
    border: none;
    padding: 0 !important;
    margin: 0 !important;
}
.callout[data-callout="caption"] .callout-title {
    display: none;
}
.callout[data-callout="caption"] .callout-content {
    border-top-style: none !important;
}
.callout[data-callout="caption"] .callout-content p {
    text-align: center;
    font-style: italic;
    font-size: calc(0.9*var(--font-text-size));
}

To use it you create a callout with the caption type, with your image on the first line and the caption at the second line:

> [!caption|float-right-small]
> ![[image.png]]
> This is an example of an image embedded in this note that has a caption.

You can add extra formatting (such as the float-right-small in the example above) to it so that it is, for example, right or left aligned or has your text flowing around it. Anything that is supported by CSS can be used here^[3].

Plugins to make my life easier

While handling attachments, and with the time, I’ve started using some plugins to make my life easier within Obsidian:

1. Consistent Attchaments and Links — GitHub - dy-sh/obsidian-consistent-attachments-and-links: Obsidian plugin. Move note with attachments.^[4]
2. Image Converter — GitHub - xRyul/obsidian-image-converter: ⚡️ Convert, compress, resize, annotate, markup, draw, crop, rotate, flip, align images directly in Obsidian. Drag-resize, rename with variables, batch process. WEBP, JPG, PNG, HEIC, TIF.^[5]
3. Local Images Plus — GitHub - Sergei-Korneev/obsidian-local-images-plus: This repo is a reincarnation of obsidian-local-images plugin []which main aim was downloading images in md notes to local storage.^[6]
4. Binary file manager: this plugin automatically creates a markdown note for each attachment added to the vault. This allows for a better search pattern and information usage.

The first one keeps my attachments together with my notes, also renaming attached files and images when I move my notes around my vault.

The second one converts all attached images to the WEBP format, saving space in my vault without sacrificing the visibility and quality of images.

And, the last one, serves the purpose of downloading images from the rare pages I have clipped into my vault, so that I have the full contents locally available.^[6:1]

Conclusion

So, even though it is unusual for beginners to have an extra file per attachment, it brings many benefits and is one of the most natural ways to implement attachments in your notes. This is also how it happens in HTML, for example.

Attachment reuse is only possible because of that.