# Image Converter for Obsidian: convert, compress and resize notes images offline

> An Obsidian plugin that converts, compresses, resizes, annotates and renames images inside the vault using pure JavaScript. No ImageMagick, no cloud API, no binaries to install.

**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.

- Repository: https://github.com/xRyul/obsidian-image-converter
- Stars: 837 · Forks: 69
- Language: TypeScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/xryul-obsidian-image-converter

## Image work done in the vault with no external binary or API

Most image tools for note taking assume a binary on your PATH or a service on the internet. This plugin takes the opposite position. The README describes a pure JavaScript implementation that works completely offline, with no external APIs and no binary dependencies such as ImageMagick, Cloudinary, FFmpeg or sharp. That decision shapes everything else: conversion happens in the browser context where Obsidian itself runs, files are written straight into the vault, and nothing about your images leaves the machine. The supported formats are WEBP, JPG, PNG, HEIC and TIF on the input side, with WEBP, JPG and PNG as the conversion targets. The project is MIT licensed and ships as a normal Obsidian plugin with a manifest.

## Conversion happens when the image is dropped or pasted

The core loop is short. Drop or paste an image into a note and the plugin converts it automatically into WEBP, JPG or PNG, depending on your settings. From there the same image can be compressed by giving a quality value between 1 and 100, resized, rotated, flipped, cropped, annotated, aligned, or renamed. What makes this worth a plugin rather than a one-off script is that the result is written into the vault and referenced from the note, so the whole chain stays inside Obsidian. The repository carries a docs directory with a settings overview, basic usage examples, an annotation tool page, a crop tool page, and a variables reference, which is where the details live that the feature list compresses into bullet points.

## Two kinds of resize, and the width that lands in the link

Resizing is the feature with the most moving parts, and the plugin draws a line between destructive and non-destructive changes. A destructive resize rewrites the original file. A non-destructive one keeps the file intact. There are also two ways to trigger a resize: dragging an edge of the image, or using the scroll wheel with a modifier such as CMD+Scrollwheel. The plugin reads the image dimensions automatically and writes the applied width into the image link, for example as a width value in the link, and you can also specify a custom size. For the original image, the available modes are width, height, longest edge, shortest edge, fit and fill. That list matters, because a screenshot that gets cropped to a longest edge rule behaves very differently from one cropped to fill.

## Annotation and markup sit on top of the image, powered by FabricJS

Beyond conversion and resizing, the plugin includes an annotation and markup tool where you can draw, write, scribble and annotate on top of an image directly inside Obsidian. The credit line in the README names FabricJS as the library providing those capabilities, and the package.json confirms fabric as a dependency, so the drawing layer is a canvas library rather than hand written drawing code. Crop, rotate and flip round out the editing set. A custom right click menu completes the vault level operations: copy to clipboard, copy as Base64 encoded image, resize the original image you just clicked, and delete an image from the vault, which also removes its link from the vault rather than leaving a broken reference behind.

## Renaming and filing with variables instead of one-off names

File management is where a note taking plugin stops being a viewer. The plugin can rename images automatically using variables such as noteName and fileName, and can organise images into custom output folders that also accept variables. The README links a variables reference guide under docs that lists every supported variable and gives use case examples, so the naming vocabulary is documented in more depth than the feature list shows. The practical value shows up on bulk imports, where the same image would otherwise land with a camera timestamp or a duplicate name, and where the destination folder has to follow the note structure. The guide is the file to read before configuring anything, since a badly chosen variable set can rewrite a large part of a vault at once.

## Manual install of three files, plus an optional pngquant step

Installation is manual and short. The README asks you to download main.js, styles.css and manifest.json from the latest release page, create a folder named obsidian-image-converter inside VaultFolder/.obsidian/plugins/ (creating the plugins folder first if it does not exist), move the three files into it, and enable the plugin in Obsidian. Contributors work from source instead, and the package.json scripts show the toolchain: esbuild bundles the plugin, eslint checks the TypeScript sources, and vitest runs the tests.

```bash
npm run build
```

```bash
npm test
```

One feature is deliberately left out of that offline promise. Optional PNG optimization depends on pngquant, and the repository documents it separately in docs/pngquant.md. It is an add-on rather than a requirement, but it is also the one part of the pipeline that pulls in an external tool.

## Conclusion

Image Converter suits Obsidian users who paste and drop many images into notes and want WEBP or JPG output, sizing and captions handled in the vault without uploading anything. It does not suit a workflow that depends on lossless quality guarantees, since compression is driven by a quality value and optional PNG optimization needs pngquant. Before installing, check that the three released files are copied into a folder named obsidian-image-converter under the vault's .obsidian/plugins/ directory and that the plugin is enabled there.

## FAQ

### How do I install the Image Converter plugin in Obsidian?

Download main.js, styles.css and manifest.json from the latest release page, create a folder named obsidian-image-converter inside VaultFolder/.obsidian/plugins/, move the files in and enable the plugin in Obsidian.

### Does the Obsidian Image Converter plugin need ImageMagick or an internet connection?

No. The README describes a pure JavaScript implementation that works offline with no external APIs and no binary dependencies such as ImageMagick, Cloudinary, FFmpeg or sharp.

### Which image formats can the Obsidian Image Converter handle?

WEBP, JPG, PNG, HEIC and TIF are supported for reading, and dropped or pasted images are converted automatically into WEBP, JPG or PNG.

### Can the Obsidian Image Converter rename and file images automatically?

Yes. Images can be renamed with variables such as noteName and fileName, and organised into custom output folders that also accept variables, with the full list documented in the variables reference guide.

### Does the Obsidian Image Converter plugin support batch processing?

Yes. The plugin can convert, compress and resize all images in a note or across the entire vault.

## Sources

- [Issues](https://github.com/xRyul/obsidian-image-converter/issues)
- [License: MIT](https://github.com/xRyul/obsidian-image-converter/blob/main/LICENSE)
- [README](https://github.com/xRyul/obsidian-image-converter/blob/main/README.md)
- [Releases](https://github.com/xRyul/obsidian-image-converter/releases)
- [xRyul/obsidian-image-converter on GitHub](https://github.com/xRyul/obsidian-image-converter)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/xryul-obsidian-image-converter