Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Does webpage loading also load unused images from the CSS?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #28039
    manojgoure
    Member

    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

    #71096
    manojgoure
    Member

    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.

    #71113
    noahgelman
    Participant

    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

    #71144
    Chris Coyier
    Keymaster

    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.

    #71145
    manojgoure
    Member

    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.

    #71407
    manojgoure
    Member

    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

    #71431
    TheDoc
    Member

    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!

    #71446
    manojgoure
    Member
    "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.

    #71447
    TheDoc
    Member

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.