Well let's see, you have your canvas 👩‍🎨, you have encoded the output to base64 jpeg... Stop! Before you make a huge massive string which actually adds more weight as base64 maybe think about formats for a moment. .webp is Google's darling image format which promises to see large reductions to overall size with lossless quality, in practical terms it might make the image a tiny bit more blury but honestly I can't tell, even with my glasses on 👓.

https://developers.google.com/speed/webp

So because I googled it I know and so will you, you can set a canvases dataURI format to webp, effectively counteracting the bloat in theory. But by how much I'm not certain 👨‍🔬 having niether the will to do so. This is a theoretical post because I'm lazy today.

Okay you have a lovely big optimized string, what if you could stage it in such a way that this base64 image didn't appear in the Dom? What if it looked more like a URL?

Enter: URL.createObjectURL(blob);

https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

Boom, this works.

Okay but what if my browser doesn't support webp?

David Walsh to the rescue!

https://davidwalsh.name/detect-webp

So that's cool isn't it, I had less time to explain all this, this time was a fast train.