Reusing Base 64 code for the same image multiple times so that the output size does not increase

I am using base 64 code for images, so that the images can be packed along with the html5. However, the output HTML size increases in this process. I think that is mainly because the text code itself consumes more memory, and is repeated every time it is used.
Is their any way, I can reuse the code for an image used multiple times, so that it does not repeat itself in the js file generated ?

I tried experimenting with the Symbols and Persistant Symbol. But they too don’t make any difference.

Is their any way?


Maybe it would work if the Base64 data was saved as a JavaScript variable. Then, just change the innerHTML or background image of the elements.


Thanks. That seems to be a good idea. :slight_smile:

You also might find this little extension useful. It does it for you.


Hi MaxZieb,
That looks wonderful. Does that mean, when I use the Hype ImageBaseEncoder js file, all of my images will get converted to base64 ?

Here is an instruction video … while your are on local preview and output is enabled all images are rendered to the console. Then you just copy the ones you want to head HTML. You can disable console output once your done and in a live site the output is anyways disabled.

It worked great. Thanks.

However I faced a small problem. The console was truncating the base64 code, when I had multiple images in the project. Is their any way to solve this out ?

It was likely the browser truncating the console – try a different browser?