Loading a huge image (5mb) into svg background leads to pixelation and performance issues

Question

I have some issues with pixelation and the performance of SVG background images together with D3.js.

You can already see a running

Answer 1

As 5mb are too much for browser. I now tested it with 50% of width and height. So the picture is now just 2,33mb big.

And as you can see, it works now in Firefox and Chrome and the picture is loading in about 2 seconds. The performance is also okay.

But for sure I cannot zoom that much into the map anymore, otherwhise it get very pixeled. So I capped it at zooming 7x.

So the only other solution would be tiling images, but that would be way to hard to do for this project. And as I said this will kill the soft zooming.