哪种方式加载一个巨大的图像（画布vs img vs background-image）？

Question

我想要什么

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

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

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

我测试了什么

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

• （423ms）<canvas>
• （138ms）<img>
• （501ms）CSS background-image

<img>标记最快。

问题

那么，使用<img>标签显示一个巨大的（背景）图像并使用一些脏CSS来绘制画布是不是很糟糕？

或者在我的情况下使用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?

Answer 2

我会考虑从你的情境的语义角度来看：你想要展示什么？它是一个你想要画一些东西的图像吗？它是游戏板的背景图片吗？

恕我直言：如果CSS背景为500毫秒并不是那么慢，加载网站总是需要几秒钟。如果您关心图片的加载速度，请使用<img>，但HTML可能会有点困难，因为您必须摆弄z-index和position。

我会采用CSS背景。