13

我想要的是

目前我有一个 png 图像4000x4000。使用tinypng.org后，它变成了一个 288KB 的文件。

现在我想要最快的方式来加载图像，将其放置在 DOM 中并能够在其上绘制大量画布。

我测试了一些，结果让我震惊。

我测试的

我做了 3 次测试，只检查加载速度。

  • （423 毫秒）<canvas>
  • （138 毫秒）<img>
  • （501 毫秒）CSSbackground-image

<img>标签是最快的。

问题

<img>那么，使用标签来显示一个巨大的（背景）图像并使用一些肮脏的 CSS 来在其上绘制画布是一种不好的做法吗？

还是在我的情况下使用画布更好，而不用担心更长的加载时间？

4

2 回答 2

5

好问题！这是相关的：何时使用 IMG 与 CSS 背景图像？

从那篇文章中，如果人们打算打印您不会使用的页面<img>- 因为这会出现在打印件上。这同样适用于<canvas>，从而制定background-image合乎逻辑的解决方案。

你的背景图片是如何通过 CSS 添加的？它是内联的还是通过它自己的样式表？如果它使用自己的样式表，您是否尝试在测试速度之前压缩 CSS ？

这也是相关的，我想：图片在 HTML 或 CSS 中加载速度更快吗？

于 2013-02-21T09:45:44.530 回答
0

我会考虑从语义的角度来看你的情况：你想展示什么？它是您要在其上绘制东西的图像吗？它是游戏板的背景图像吗？

IMHO: 500 ms in case of CSS background is not that slow, it always takes a couple of seconds to load a website. If you care about the loading speed of the image, use <img>, but HTMLing could be a bit more difficult because you have to fiddle around with z-index and position.

I would take the CSS background.

于 2013-02-21T09:56:31.113 回答