哪种方式加载一个巨大的图像（canvas vs img vs background-image）？ [英] Which way to load a huge image (canvas vs img vs background-image)?

问题描述

我想要什么

目前我有一个png图片 4000x4000 。使用 tinypng.org 后，它只是一个288KB的文件。

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

我测试了一些，结果吓到了我。 / p>

我测试的是什么

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

• （423ms）< canvas>


• （138ms）< img>


• （501ms）CSS background-image

< img> 标记是最快的。

问题

因此，使用< img> ; 标签来显示一个巨大的（背景）图像，并使用一些肮脏的CSS来绘制画布呢？

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

解决方案

这是相关的：何时使用IMG vs. CSS background-image？

在这篇文章中，如果打算打印您的页面，则不会使用< img> - 因为这将出现在打印。这同样适用于< canvas> ，使 background-image 逻辑解决方案。

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

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

What I want

Currently I have a png image of 4000x4000. After using tinypng.org it became just a 288KB file.

Now I want the fastes way to load the image, place it in the DOM and be able to draw a lot of canvas' on it.

I tested some and the results stunned me.

What I tested

I made 3 tests and check only the load speed.

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

The <img> tag is the fastest.

Question

So, is it bad-practice to use the <img> tag to display a huge (background) image and use some dirty CSS to be able to draw canvas on it?

Or is it better to use canvas in my case and don't worry about the longer load time?

解决方案

Great question! This is related: When to use IMG vs. CSS background-image?

From that article, if people are intended to print your page you wouldn't use <img> - as this would appear on the print. The same would apply to <canvas>, making background-image the logical solution.

How is your background image added through CSS? Is it inline or through its own stylesheet? If it's using its own stylesheet, have you tried compressing the CSS before testing the speed?

This is also related, I suppose: Do Images Load Faster in HTML or CSS?

这篇关于哪种方式加载一个巨大的图像（canvas vs img vs background-image）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！