I'm looking to keep my JavaScript file size to a minimum while needing to embed some binary data. Is there a method that's more efficient than base64 for storing this data inline? Ideally, I'd like to find a way to store it byte-for-byte without bloating my file too much.
4 Answers
Honestly, you might be looking at this the wrong way. Sending a JS file over HTTP already ties it to specific MIME types, which can limit your options for saving space. While you could invent a new encoding using unicode symbols, it might end up being more trouble than it's worth. The most efficient method would be to keep binary data in its own separate files, served with the right MIME types, and pull it in using fetch or XMLHttpRequest. If you want to include it in your build, that might require a bundler with a plugin designed to handle such files.
If you really need to embed binary data directly in your JS file, base64 is probably your best option. It might be a bit bulky, but it’s widely supported. You could create a custom encoding with a different character set, but it would probably complicate things more than necessary. Honestly, if it's feasible, think about keeping the binary data in a separate file and loading it when needed instead.
Another approach is to implement a compression layer on top of your data. You could use something like base64 (or an ArrayBuffer), then compress that data using a method like zipping or run-length encoding (RLE). Just keep in mind you need to figure out if the space gained from compression outweighs any additional overhead it introduces!
Have you thought about using an ArrayBuffer? It's a good option for working with binary data directly in JS.
I actually want it to be part of a locally opened HTML page, so keeping everything in one file would be ideal!