在HTML或CSS中图片加载速度更快吗？

本文介绍了在HTML或CSS中图片加载速度更快吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如果我在侧边栏使用此html加载图片

< img src =fc06.deviantart /fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.pngheight =200pxwidth =200pxalt =image/>

它会加载任何更快/更慢，如果我改为放在侧边栏其中我的style.css是在标题中调用）

.image {width：200px; height：200px; background-image：url（'fc06.deviantart/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png'）;}

< div class =image>< / div> pre>

解决方案

这可以很容易地使用Firebug

如果您将图片放在CSS中作为背景图片，则图片将会只有在该类实际使用且可见 时才会下载。如果你把它放在 img ，它会立即下载，即使它不可见也会阻止渲染。

最后，如果你计算图像加载的速度，它们都是一样快。 真实问题是如果感知效果更好，因为图片下载的顺序可能会因您放置元素的位置而有所不同。

我会更担心其他方面。将图片设为背景图片意味着：

• 图片不是内​​容
• 您可以使用sprite来减少HTTP请求的数量（从而提高性能）
• 这是动画较慢背景图片比img

If I load an image using this html on my sidebar

<img src="fc06.deviantart/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

Would it load any faster/slower than if I instead put on the sidebar where my style.css (which is called in the header) has

.image { width: 200px; height: 200px; background-image: url('fc06.deviantart/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png'); }

<div class="image"></div>

解决方案

This can easily be verified using Firebug (under Net), Chrome Developer Tools (under Network), Fiddler or any other HTTP sniffer you prefer.

If you put the image in CSS as background-image, the image will only get downloaded when that class is actually used and visible. If you put it in an img it'll be downloaded immediately and will block rendering even if it's invisible.

In the end they are both as fast if you are counting the speed at which the image loads per se. The real question is if the perceived performance is better as the order at which the image gets downloaded might be different depending on where you place your element.

I would worry more about the other aspects though. Having the image as a background-image means:

• The image is not a content
• It is not printable
• You can use a sprite to reduce the number of HTTP requests (thus improving performance)
• It is slower to animate background-image than img