在 HTML 或 CSS 中图像加载速度更快吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6716262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do Images Load Faster in HTML or CSS?
提问by GreatestSwordsman
If I load an image using this html on my sidebar
如果我在侧边栏上使用此 html 加载图像
<img src="http://fc06.deviantart.net/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
如果我将它放在我的 style.css（在标题中调用）的侧边栏上，它会加载得更快/更慢吗？
.image {
width: 200px;
height: 200px;
background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}<div class="image"></div>回答by pixelfreak
This can easily be verified using Firebug (under Net), Chrome Developer Tools (under Network), Fiddler or any other HTTP sniffer you prefer.
这可以使用 Firebug（在 Net 下）、Chrome 开发者工具（在 Network 下）、Fiddler 或您喜欢的任何其他 HTTP 嗅探器轻松验证。
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 imgit'll be downloaded immediately and will block rendering even if it's invisible.
如果您将图像作为背景图像放入 CSS 中，则只有在实际使用该类且可见时才会下载该图像。如果你把它放在一个img里面，它会被立即下载并且会阻止渲染，即使它是不可见的。
In the end they are both as fast if you are counting the speed at which the image loads per se. The realquestion is if the perceivedperformance 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 animatebackground-image than img
- 图片不是内容
- 它不可打印
- 您可以使用精灵来减少 HTTP 请求的数量（从而提高性能）
- 它是较慢的动画背景图像比IMG
回答by sagi
If you put them in the CSS file, then they will only start downloading once the CSS file itself has been downloaded. This might make the CSS approach slightly slower. Other than that, it should be the same.
如果你把它们放在 CSS 文件中，那么它们只会在 CSS 文件本身被下载后才开始下载。这可能会使 CSS 方法稍微慢一些。除此之外，应该是一样的。
回答by DSharper
Browser will start downloading image as soon as it read image url in HTML putting image url in css file it will end up downloading when that class or CSS rule is applied.how ever I strongly encourage you to use CSS spritesfor including images in your web pages.
浏览器将在读取 HTML 中的图像 url 后立即开始下载图像，并将图像 url 放入 css 文件中，当应用该类或 CSS 规则时，它将最终下载。但是我强烈建议您使用CSS 精灵在您的网络中包含图像页。
30 tricks to optimize images in web pages
回答by Two-Bits
One argument for css images being faster is that web applications that make use of many small images can combine them into one large tiled image and use css to clip the source image file according to the bounds of the contained subimage. Reducing the number of round trips to the server to fetch additional images can greatly increase the load times of such applications. In fact, google uses this idea in many of it's own applications such as gmail, though it can be an arduous task to manage manually.
css 图像更快的一个论点是，使用许多小图像的 Web 应用程序可以将它们组合成一个大的平铺图像，并使用 css 根据包含的子图像的边界来剪辑源图像文件。减少往返服务器以获取额外图像的次数可以大大增加此类应用程序的加载时间。事实上，谷歌在它自己的许多应用程序中使用了这个想法，比如 gmail，尽管手动管理可能是一项艰巨的任务。
回答by stefanz
I made a small test using YSlow addon from mozilla.
我使用 mozilla 的 YSlow 插件做了一个小测试。
Without any css reset, any jquery/javascript & other things, i got the results
没有任何 css 重置，任何 jquery/javascript 和其他东西，我得到了结果
Using I had this structure inside
使用我里面有这个结构
<div id="wrap">
<img src="images/5.png" alt="" />
</div><!--/wrap-->
and the YSlow had told me that the page were loaded in 0.149 s
YSlow 告诉我页面是在 0.149 秒内加载的
Using background:url()
使用背景：url()
Then I put my image as background on div called "wrap" and the result was bit faster, the average of loading time being around 0.125 s.
然后我将我的图像作为背景放在名为“wrap”的 div 上，结果速度更快，平均加载时间约为 0.125 秒。
At this test i used a png image which has 10.5 KB (200px X 200px).
在这次测试中，我使用了一个 10.5 KB (200px X 200px) 的 png 图像。
By the way, you have to think when to use or when to use in a tag(like span/div etc). To have a professional and nice strucutre you have to use tag only for content images. The simples way to see is to disable the css. If you have the needed content (like galleries, logos, avatar & so on) without css this mean you used the right way. It's unuseful to load some things like images with round corners and other design stuff using tag, nevermind if it's going to be a bit faster. Think that a person who has a slow connection maybe will use css-less version, so for him is unuseful to load your with a small corner of a box. He only wants to see content, not stupid things when his bandwidth is slow and limited.
顺便说一句，您必须考虑何时使用或何时在标签中使用（如 span/div 等）。要拥有专业且漂亮的结构，您必须仅对内容图像使用标签。最简单的查看方法是禁用 css。如果您有需要的内容（如画廊、徽标、头像等）而没有 css，这意味着您使用了正确的方式。使用标签加载一些像带圆角的图像和其他设计内容的东西是没有用的，不管它是否会更快一点。认为连接速度较慢的人可能会使用 css-less 版本，所以对他来说，用盒子的一个小角来装你是没有用的。当他的带宽缓慢且有限时，他只想看到内容，而不是愚蠢的东西。
