Image Converter for ObsidianMD

Making image management inside Obsidian slightly more convenient.

https://github.com/xRyul/obsidian-image-converter/assets/47340038/63a0646b-29ec-4055-abfc-55d31e07b2f7

Features

Supported image formats: WEBP, JPG, PNG, HEIC, TIF

• 🖼️ Convert: Automatically convert dropped/pasted images into WEBP, JPG or PNG

• 🗜️ Compress: Reduce file size by specifying Quality value between 1-100

• 📏 Resize images (destructive and non-destructive)

  • Automatically read image dimensions and apply it to the image link e.g.: apply image width to |width or specify any custom size.
  • Resize by dragging edge of the image, or with Scrollwheel (e.g., CMD+Scrollwheel)
    
    
  • Resize original image (width, height, longest edge, shortest edge, fit, fill)

• Align (left, right center) and wrap text around images without any custom syntax in your links:
  
  

• Image annotation and markup tool. Draw, write, scribble, annotate, markup on top of images right inside Obsidian.
  
  
  
  

• ✂️ Crop, rotate, and flip images
  <
  

• 📁 Custom File Management and Renaming:

  • Rename: Use variables (e.g., {noteName}, {fileName}) to auto-rename images List of Supported Variables
  • Output: Organize images into custom output folders with variables.List of Supported Variables

• 🌍 Pure JavaScript implementation that works completely offline. No external APIs or binary dependencies (such as ImageMagick, Cloudinary, FFmpeg, sharp, etc.) required - keeping it lightweight, portable and secure.

Other

• 🔄 Batch Processing: Convert, compress, and resize all images in a note or across the entire vault.
• 🔗 Compatibility with other markdown editors: Ability to have Markdown links for images, and Wiki links for all other links.
• 🖱️Custom right click context menus:
  • Copy to clipboard
    
    
  • Copy as Base64 encoded image
  • Resize original image you have just clicked upon
    
    
  • Delete image from vault - removes image and its link from the vault

📚 Documentation

• Settings overview
• Basic usage examples
• Annotation tool
• Crop tool
• List of supported variables and use-case examples
• How to compress images without quality loss - empirical analysis of image format vs image quality vs file size
• Optional PNG optimization (pngquant): see docs/pngquant.md

How to install

1. Downlaod main.js, styles.css, manifest.json files from the latest release page.
2. Creane new folder inside VaultFolder/.obsidian/plugins/ named obsidian-image-converter . If plugins folder doesn't exist, then create it manually.
3. Move downloaded files into /obsidian-image-converter folder.
4. Enable the plugin in ObsidianMD.

🐛 Issues & Support

Found a bug or need help? Open an issue

If you find this plugin useful, your support keeps this project alive and growing:

📜 License

MIT License - see LICENSE

🙏 Credits

• Original inspiration from musug's plugin
• FabricJS for annotation capabilities