For the last several years I've just stripped images that users copy and paste to my contenteditable. But as the horrors of mobile continue, it's something that happens more and more often and ends up confusing the less savvy user.

When they do paste it, I end up with something like:

<img src="data:image/jpeg;base64, blahblahblah...">

I know that I could add a style to that tag to limit the width and height, but that's not enough. The real problem is when they paste an image that ends up being like 5MB! When, if it was resampled to 500px wide, it would be more like 50kb.

Any suggestions on where I should even start?