将巨大的图像（5mb）加载到svg背景会导致像素化和性能问题 [英] Loading a huge image (5mb) into svg background leads to pixelation and performance issues

问题描述

我有一些问题与像素化和性能的SVG背景图像与D3.js。

您可以在此处查看正在运行的示例： http://arda-maps.org/ages/first / 请不要共享，直到它仍然是阿尔法。

示例

我们以树为例。这是他们在浏览器中的样子：

正如你所看到的，他们可能不是最好的质量，但你几乎看不到任何像素。所以我使用这张图片（〜5mb），你可以看到在上面的链接，当你点击实验室图标（底部），并等待几秒钟...你可以看到他们在那里。

好的，但如果你放大你可以看到像素。它感觉（相比矢量视图）非常滞后，性能下降巨大。这里是网站上该区域的视图：

我还提到Chrome几乎崩溃，直到他还没有完成背景研究或其他。但在Firefox中运行得很好。

另一个子系统是至少在Firefox的缩放步骤7到19中，你不需要看到图像背景。但在矢量视图中，一切都很好。因为我不改变任何东西，这是另一个问题。但我找不到这个的原因= /

替代品

我知道我可以使用tile图像图形。但是这些是硬的，或者甚至不可能与向量视图组合使用，至少在D3.js.我知道Google地图和其他人都成功做到了。但是他们不像我这样使用来自topojson的数据。

最后，我想要一个可以在向量和图像视图中查看的地图。我也对任何创意/古怪的想法开放=）

非常感谢。

解决方案

由于5MB对浏览器来说太多了。我现在用 50％的宽度和高度测试它。现在的图片现在只是 2,33mb 大。<​​/ p>

正如您所看到的，现在可以工作 Firefox和Chrome，并在大约2秒钟后加载图片。效果也不错。

但是，我肯定不能放大地图了，其他的就变得非常像素化了。所以我把它放大7倍。

因此，唯一的其他解决方案是平铺图像，但这将是很难做到这个项目的方式。正如我所说，这将杀死软缩放。

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

You can already see a running example here: http://arda-maps.org/ages/first/ Please don't share until it's still Alpha. Thank you.

Example

So let's take the trees as an example. This is how they should look like later in the browser as well:

And as you can see, they might not be in the best quality but you can just hardly see any pixel. So I use this picture (~5mb) and as you can see in the link above when you click on the lab icon(on the bottom) and wait some seconds...you can see them there as well.

Alright, but if you zoom in you can see pixels. And it feels (compared to the vector view) very laggy and the performance drops immense. Here a view of that area on the website:

I also mentioned that Chrome nearly crashes before he did not yet finish the background risizing or whatever. But in Firefox it runs pretty well. So please test it in Firefox if possible.

Another subissue is that at least in Firefox in the zooming step 7 to 19 you don't see the image background. But in vector view all is fine. And since I do not change anything, this is another issue. But I couldn't find out a reason for this =/

Alternatives

I know I could use tile image graphics. But these are hard or maybe even not possible to use in combination with a vector view at least in D3.js. I know Google Maps and others are successfully doing it. But they don't use data from a topojson like I do for instance.

In the end I would like to have a map that can be viewed in vector and image view. I'm also open for any creative/quaint idea =)

Thank you very much.

解决方案

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.

这篇关于将巨大的图像（5mb）加载到svg背景会导致像素化和性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！