perf: Optimize large image handling with blob URLs #23
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add image-utils.ts with base64 to blob URL conversion - Update ImageModal to use blob URLs instead of data URLs - Update BaseNode loadImage to use cached blob URLs - Add LRU cache for blob URLs with automatic cleanup This significantly improves performance when viewing 4K images by: - Converting base64 strings to blob URLs which are more memory-efficient - Caching blob URLs to avoid repeated conversions - Reducing browser memory pressure that caused page reloads Co-Authored-By: Behnam & Claude Code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes performance issues when viewing large (4K) generated images that caused:
Root Cause
Large images stored as base64 strings (10-20MB+) were being passed directly to
<img>tags as data URLs. This caused:Solution
Convert base64 strings to Blob URLs which are much more memory-efficient:
Changes
src/lib/image-utils.ts: Utility functions for base64 to blob URL conversion with LRU cachingImageModal.tsx: Uses cached blob URLs instead of data URLsBaseNode.ts: Uses blob URLs for image preview loadingTest plan
Behnam Ebrahimi