DEV Community

Cover image for Optimizing Excalidraw: Simple File Size Reduction Tactics
Omar Hussein
Omar Hussein

Posted on

Optimizing Excalidraw: Simple File Size Reduction Tactics

Excalidraw is a versatile and user-friendly platform for creating diagrams, sketches, and collaborative drawings. As with any software, users and developers are constantly looking for ways to enhance its performance and efficiency. In this post, I'll explore my recent contribution to Excalidraw that addresses a crucial issue and significantly improves the file size of drawings.

The Issue:

Excalidraw users may have encountered a common concern regarding the size of save files, libraries, and the clipboard. Issue #7169 on the Excalidraw GitHub repository highlights the problem, pointing out that even small drawings could result in file sizes as large as 612K. The issue context notes that, upon inspecting the .excalidraw file with a text editor, the JSON structure is "prettified," contributing to the larger file sizes. The user suggests that minifying the .excalidraw files could save substantial space without sacrificing usability.

The Contribution:

The proposed solution comes in the form of a modification to the JSON.stringify function, ensuring that the output to the file does not include unnecessary spacing, essentially minifying the JSON. This change results in a notable reduction in file size for save files, libraries, and when copying to the clipboard.

To put this improvement into perspective, a simple test file exhibited a reduction from 31.4kb to 17.1kb. User reports indicate that the reduction becomes even more significant as drawings increase in complexity. For instance, the original issue mentioned a file size reduction from 612K to 296K when using the jq -r tostring command to minify the .excalidraw file. Notably, the minified file still opens seamlessly in the browser.

Reasons to Merge:

The pull request containing this modification presents compelling reasons to merge the changes into the Excalidraw codebase:

Reduces Size on Local/Cloud Storage:

Minifying the .excalidraw files leads to a substantial reduction in file size, addressing the concern of large storage requirements. This optimization not only benefits individual users but also contributes to more efficient cloud storage solutions.

Faster Saving on Slow Connections:

The reduced file size directly translates to faster saving, especially for users with slower internet connections. This improvement enhances the overall user experience by minimizing the time required to save and load drawings.

Conclusion:

Excalidraw continues to evolve, thanks to the active contributions of its community. The recent pull request to minimize the size of .excalidraw files is a example of how user feedback and developer expertise come together to enhance the platform's performance. By addressing the issue of inflated file sizes, Excalidraw becomes an even more efficient and user-friendly tool, catering to the diverse needs of its growing user base.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️