css - 哪种方式加载巨大的图像(canvas vs img vs background-image)？

Question

我想要什么

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

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

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

我测试了什么

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

• (423 毫秒)<canvas>
• (138 毫秒)<img>
• (501 毫秒)CSS background-image

<img>标签是最快的。

问题

那么，使用 <img> 是不是一种不好的做法？标记来显示巨大的(背景)图像并使用一些肮脏的 CSS 以便能够在其上绘制 Canvas ？

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

Answer 1

好问题!这是相关的:When to use IMG vs. CSS background-image?

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

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

这也是相关的，我想:Do Images Load Faster in HTML or CSS?