A 24-bit color stored in base64 gets stored in 4 characters. Your default 20x30 map, multiplied by 4 bytes, is still just 2400 bytes. That fits in a URL, quite comfortably, at least as far as browsers are concerned.
If you want to pack tighter, a palettized serialization would work fine here. Since you don't have a gradient tool or anything else that can span colors, you have a bound on the amount of information being put into the image by the fact the human is only clicking so many times and can only put so much effort into it.
Basically, store each 24-bit color at the beginning with a tight mapping (4 bytes each with a base64), put an end-marker on the palette set, store the map size, then store the palette entry of each of the width x height triangles. If the user uses less than 256 colors, the default 20x30 size you bring up will end up as 4 times colors + 800 bytes, and that's before you do things like bitpacking ("I see the palette only has 8 colors in it so I only need three bits per cell") or any simple RLE you may be inclined to.
(I'd paste in the example of a Christmas tree a friend drew, except it's, uh... a lot. But the source code might help as a starting point. The OP's URLs wouldn't be as huge since it has a much coarser grid.)
But if you're up for it, please make a PR! :-D