我想要什么
目前我有一张4000x4000的png图片。使用tinypng.org后，它变成了一个288KB的文件。
现在我想要最快捷的方式来加载图像，将其放置在DOM中，并能够在上面绘制大量画布。
我测试了一些，结果让我大吃一惊。
我测试了什么
我做了3次测试，只检查了负载速度。
- （423ms）
<canvas> - （138ms）
<img> - （501ms）CSS
background-image
<img>标签是最快的。
问题
那么，使用<img>标记来显示一个巨大的（背景）图像，并使用一些肮脏的CSS来在上面绘制画布，这是不是一种糟糕的做法？
还是在我的情况下使用画布更好，不用担心加载时间更长？
好问题！这是相关的：什么时候使用IMG与CSS背景图像？
从那篇文章中，如果人们打算打印你的页面，你不会使用<img>——因为这会出现在打印上。这同样适用于<canvas>，使background-image成为逻辑解决方案。
你的背景图片是如何通过CSS添加的？它是内联的还是通过自己的样式表？如果它使用自己的样式表，在测试速度之前，您是否尝试过压缩CSS？
我想这也有关系：HTML或CSS中的图像加载速度更快吗？
我想从语义的角度来看您的情况：您想要显示什么？它是一个你想在上面画一些东西的图像吗？这是游戏板的背景图像吗？
IMHO:500毫秒在CSS背景的情况下并没有那么慢，加载一个网站总是需要几秒钟的时间。如果你关心图像的加载速度，可以使用<img>，但HTML可能会有点困难，因为你必须摆弄z-index和position。
我会选择CSS背景。