Grow your CSS skills. Land your dream job.

Does webpage loading also load unused images from the CSS?

  • # February 17, 2010 at 3:47 am

    To reduce the number of HTTP request for a particular web page I sprite them into one. I am using one CSS file which is being used in other pages also including different images on those pages. While loading one page it will load all the images in the respective page, but what about unused images which are included in other pages. Will they also get loaded while loading of CSS? Or do i create separate stylesheet for different pages.

    What will be the better solution for this.

    Your feedback are appreciated.
    Thanks

    # February 17, 2010 at 6:19 am

    An interesting question!

    Sprite images will load the whole image and then only displays the parts of the image you tell it to. Therefore unused parts are still loaded but not displayed.

    You could split the big sprite up into smaller sprite depending on how many are unused when you load a page. Maybe have a main sprite for the whole site and then smaller ones on pages where they are required. I did that with my portfolio. Background and main images were in one sprite. Dates for the blog were in another

    # February 18, 2010 at 8:16 am

    You didn’t get my point friend. I mean to say that if one css file loaded by browser, does it also load the images witch are not even included in the page. I might have made it complex to understand. Let me put this way,

    Suppose i have included two images in one CSS file,
    http://www.mywebsites.com/images/1.jpg and
    http://www.mywebsites.com/images/2.jpg

    image 1.jpg is being is used in page1 and image 2.jpg is being used to page2. If I open page1 in browser. Will it also load image 2.jpg while loading CSS.

    # February 18, 2010 at 3:42 pm

    No. If it worked the way you are suggesting, that would mean that every time you load a page, the browser will upload every image on the site, and that’s just now how it works. It will only call what images the html, css, or javascript on that specific page specifically call for

    # February 18, 2010 at 11:42 pm

    I think the question is :

    Code:
    #div-on-current-page {
    background: url(image.jpg);
    }

    #div-NOT-on-current-page {
    background: url(image-different.jpg);
    }

    So for the current page, will it load image-differnet.jpg, or not? Indeed it is an interesting question. I’m fairly sure it does NOT load the image if it doesn’t need it.

    # February 18, 2010 at 11:47 pm

    My logic was same too. But just wanted to make sure as I am working on a very important project. Thanks noahgelman and chriscoyier, your reply assured me.

    # February 22, 2010 at 8:13 am

    After testing my website using Pingdom Tool, i found that it is taking unused CSS elements into account while calculating page speed. There are some images which are not used in a particular page but still counted by Pingdom tool just because they are included in the same CSS file.

    Either this tool is wrong or my assumption, have to figure out. What will be your take on it (chriscoyier, noahgelman )?

    Kindly reply.
    Thanks

    # February 22, 2010 at 1:15 pm

    A page will NOT load an item in your CSS file that it isn’t using.

    You can easily test this by uploading a 5mb image to your server, calling it in your CSS file but NOT using that specific class on any page. This image should not load (you would notice hang time on a 5mb file loading).

    This is my understanding, feel free to prove me wrong!

    # February 23, 2010 at 12:34 am
    "TheDoc" wrote:
    You can easily test this by uploading a 5mb image to your server, calling it in your CSS file but NOT using that specific class on any page.

    You didn’t get my point. The thing that you just explained need a small correction as per my question, you meant "NOT using that specific class on any page." I used the class in some other pages.

    OK, to make you understand better I elaborate it.

    There is one stylesheet

    <link rel="stylesheet" href="style.css" type="text/css" />

    Having two classes calling two different images.

    .image1 {
    background:url(image1.jpg);
    }

    .image2 {
    background:url(image1.jpg);
    }

    Now i have two pages webpage1.html and webpage2.html

    I am using class .image1 in webpage1.html and .image2 in page webpage2.html.

    Now my question is If I open webpage1.html, while this page getting loaded all the css (style.css) also be loaded so will it also load image2.jpg as it is in the same CSS file used by some other page (webpage2.html) but not by the existing page (webpage1.html)?

    My assumption was that it should not load image2.jpg. But while testing my website for page speed by using Pingdom Tool, I noticed that it is taking all images those are not even used by any particular webpage. If any webpage rendering also takes into account unnecessary loading of unused objects for a particular webpage used by some other webpage, then its better to create separate stylesheet for different type of pages.

    # February 23, 2010 at 12:55 am

    That’s exactly what I meant, sorry you didn’t understand.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".