Do Images Load Faster in HTML or CSS?

前端 未结 5 531
生来不讨喜
生来不讨喜 2020-12-08 07:45

If I load an image using this html on my sidebar



        
相关标签:
5条回答
  • 2020-12-08 08:14

    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.

    0 讨论(0)
  • 2020-12-08 08:15

    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.

    0 讨论(0)
  • 2020-12-08 08:24

    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 sprites for including images in your web pages.

    30 tricks to optimize images in web pages

    Yahoo Performance rules for web developers

    0 讨论(0)
  • 2020-12-08 08:26

    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
    0 讨论(0)
  • 2020-12-08 08:34

    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.

    0 讨论(0)
提交回复
热议问题