28

如果我在侧边栏上使用此 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" />

如果我把它放在我的 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>

4

5 回答 5

35

这可以使用 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 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
于 2011-07-16T08:44:54.483 回答
5

如果您将它们放在 CSS 文件中，那么它们只会在 CSS 文件本身被下载后才开始下载。这可能会使 CSS 方法稍微慢一些。除此之外，它应该是相同的。

于 2011-07-16T08:30:06.037 回答
2

浏览器将在读取HTML中的图像 url 后立即开始下载图像页。

优化网页图像的 30 个技巧

适用于 Web 开发人员的 Yahoo 性能规则

于 2011-07-16T08:43:24.640 回答
1

css 图像更快的一个论点是，使用许多小图像的 Web 应用程序可以将它们组合成一个大的平铺图像，并使用 css 根据包含的子图像的边界来剪辑源图像文件。减少到服务器获取额外图像的往返次数会大大增加此类应用程序的加载时间。事实上，谷歌在它自己的许多应用程序（如 gmail）中都使用了这个想法，尽管手动管理可能是一项艰巨的任务。

于 2011-07-16T08:43:50.333 回答
1

I made a small test using YSlow addon from mozilla.

Without any css reset, any jquery/javascript & other things, i got the results

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

Using background: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.

At this test i used a png image which has 10.5 KB (200px X 200px).

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.

于 2011-07-16T19:10:31.373 回答