Added image compression when pasting to reduce file size #114
Conversation
- Add automatic image compression before renaming - Configurable compression settings (format, quality, dimensions) - Smart resizing for large images from high-DPI displays - Format conversion (PNG to JPG) for better compression - Size reporting showing bytes saved - Fully backward compatible, compression disabled by default - Updated README with compression documentation - Version bumped to 1.7.0
- Add comprehensive image compression with format conversion (JPG, WebP, AVIF) - Maintain aspect ratio while resizing to configurable max dimensions - Smart format selection based on browser support - Quality settings for each format (JPG, WebP, AVIF) - Format selection directly in rename modal - Preserve original plugin functionality - only compress when format is changed - Fix link replacement after format conversion - Prevent double modals during compression process - Compatible with Obsidian's attachment folder settings - Comprehensive settings UI with sliders and dropdowns Features: - Canvas-based compression maintaining aspect ratio - Browser compatibility detection for AVIF/WebP - Configurable quality settings per format - Smart format selection with auto-detection - Manual format selection in rename modal - Seamless integration with existing rename workflow Technical improvements: - Event handling improvements to prevent duplicate processing - Enhanced link replacement for format-converted files - Proper file reference management during compression - Debug logging for troubleshooting
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @innovinitylabs, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request addresses the issue of large image file sizes, particularly from high-resolution screenshots, by integrating advanced image compression capabilities directly into the plugin. The changes enable users to significantly reduce the storage footprint of their Obsidian vaults and improve performance, while maintaining control over image quality and format. The new features are optional and seamlessly integrate with existing workflows, providing a robust solution for managing image assets efficiently.
Highlights
- Advanced Image Compression: Introduces comprehensive image compression features, allowing conversion to JPG, WebP, or AVIF formats, smart resizing, and quality controls to significantly reduce file sizes.
- Smart Format Selection: The plugin can now automatically detect browser support for modern image formats (WebP, AVIF) and select the optimal format for compression.
- Batch Compression: A new command has been added to allow users to compress all existing images within their Obsidian vault at once, applying configured compression settings.
- Enhanced User Interface and Settings: The rename modal now integrates format selection, and a comprehensive settings UI has been added for configuring all compression options, including quality settings for each format and maximum dimensions.
- Technical Improvements: Implemented canvas-based compression, browser compatibility detection, proper link replacement after format conversion, and enhanced debugging/error handling for image processing.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a significant new feature for image compression, including format conversion to JPG, WebP, and AVIF, resizing, and quality controls. The implementation is comprehensive, adding new settings, modal options, and core logic for handling image processing. The code is well-structured, but I've identified a few areas for improvement regarding type safety, handling of asynchronous operations, and code clarity. Additionally, there are some version number inconsistencies across project files that should be addressed.
- Modal now respects output format setting from plugin settings - When set to 'auto', uses smart format selection based on browser support - When set to specific format (jpg/webp/avif), uses that as modal default - Path preview updates immediately to show selected default format - Added comprehensive debugging for format selection logic - Prevents user confusion by showing expected format from settings Behavior: - Settings 'auto' + smart selection enabled → defaults to best supported format - Settings 'webp' → modal defaults to WebP - Settings 'jpg' → modal defaults to JPG - Compression disabled → always keeps original format - Maintains 'Keep original' option for user choice
✅ Add proper TypeScript typing: - Add isProcessingCompression as class property instead of using type assertions - Remove all (this as any) casts for better type safety ✅ Improve timing mechanism: - Replace setTimeout with immediate flag clearing after file operations - More deterministic approach prevents race conditions ✅ Fix filename construction logic: - Construct final filename with correct extension in modal - Cleaner separation of concerns between modal and rename logic ✅ Consistent versioning: - Update package.json to match manifest.json version 1.7.0 - Eliminate version number inconsistencies Technical improvements based on automated code review: - Enhanced type safety throughout compression flow - More robust file processing flag management - Clearer filename handling logic - Consistent project versioning
… workflow 🎯 UX Improvement: - Move focus setting to end of modal creation to prevent focus stealing - Add setTimeout(0) to ensure focus happens after all DOM elements are rendered - Add text selection so users can quickly replace the suggested name - Restore quick 'paste + Enter' workflow for fast image renaming This fixes the issue where format dropdown was stealing focus from the rename input field, preventing users from quickly pressing Enter to accept changes.
|
changed focus to rename box as in original so can quickly press enter and move on |
- Add two new command palette commands for batch conversion - 'Batch convert image formats' for selective conversion with patterns - 'Batch convert all images to optimal format' for instant optimization - Create ImageBatchConversionModal class with format selection and preview - Implement proper link updating in notes after batch conversion - Support pattern matching by name and extension for selective conversion - Maintain existing compression settings and quality options - Add confirmation dialogs to prevent accidental bulk operations - Ensure converted files are properly renamed and deduplicated - Fix link update issue that was leaving broken references in notes
|
added bath image conversion, now my requirement is fulfilled and i can reduce the size of my notes blaoted with 4k pngs. thanks for this |
- Replace simple string replacement with global regex replacement - Add replaceAllLinksInEditor method to handle all link occurrences - Handle URL encoding variations (%20 vs spaces) in link paths - Use escaped regex patterns to handle special characters in filenames - Ensure all instances of converted file links are updated in notes - Fix issue where PNG to WebP conversion left broken links in markdown
- Study original plugin's batch rename implementation for optimal solution - Remove complex custom link replacement logic in favor of Obsidian's built-in system - Use renameFile() with replaceCurrentLine=false to let Obsidian handle ALL link updates - Simplify batch conversion logic to match proven original batch rename pattern - Remove unused replaceAllLinksInEditor method and manual link text variables - Ensure consistent behavior with original plugin's reliable link updating mechanism
- Replace generateNewName() with extension-only changes in batch conversion - Keep original basename and only change file extension for format conversion - Prevent file order changes that break link references in notes - Ensure batch conversion only changes format, not the entire filename - Fix issue where similar filenames with suffix changes caused link breaks - Maintain consistent file ordering and proper link updates
- Remove all renaming logic from batch conversion process - Keep exact original filename and only change file extension - Use app.fileManager.renameFile() directly for simple extension changes - Let Obsidian automatically handle all link updates in notes - Separate batch conversion (format only) from batch rename (name changes) - Ensure batch conversion only does format conversion, not filename modification
- Add manual link updating since compressToFormat deletes original file - Capture original link text before compression/deletion - Update links manually after creating and renaming new file - Add updateLinksInActiveFile method for global link replacement - Fix issue where Obsidian couldn't auto-update links for deleted/recreated files - Ensure all link references update correctly in notes during batch conversion
|
without the modal the conversion doenst work, will try and add that feature too if i have time this weeekend |
I have been pasting screenshots from my 4k display on retina mode and it bloated the whole obsidian setup.
🚀 Advanced Image Compression & Format Conversion
This PR adds comprehensive image compression features while preserving all existing functionality of the original plugin.
✨ New Features
🔧 Technical Improvements
🎯 User Experience
📊 Benefits