Map with leaflet and custom data layers - render to image?

We are using OSM (recently) to provide relatively large maps with custom layers based on the municipalities of Europe (image shows an example). One of the issues we have is that the data to be transmitted is simply huge: The largest I've seen is example MUC "percentage" with 30MB mapdata via JSON, that takes a while to "load".

Some of our users sit in regions where "high speed internet" still is a dream or need access "on the road" with bad connectivity. In order to reduce the size, the best would be, if we could create the map on the server, save it to an image file (PNG preferred) and then just deliver the resulting image as a "placeholder" or preview in the dashboard, clicking to "activate" the interactive map. We tried several approaches, but failed. The closest was PhantomJS, but that also failed on the larger maps (timeout problem, difficult to cover up for). The "common" functions render/safe the maps, but not our layers, which makes it useless for our need or do we (I) miss anything here? Individual Screenshots for more than a thousand possible maps is also not an option.

As I believe that might be a more "common" problem... Any ideas anyone?

Thanks a million!

Juergen (newbie)