SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background images and download times

    I just did a speed test on a page with several images, and it looks like all the images used as CSS backgrounds for the (largish) site are being downloaded for each page with the external style sheet. I had used some large background images on a page or two, not thinking that those could affect download times on all pages.

    Can anyone clairfy how this works? I'm afraid new visitors to the site may now be suffering long download times as the site has expanded and new background images have been added via CSS. If this is the case, how do you handle it? Create separate CSS files for pages with large background images?

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having one css stylesheet feeding your images shouldn't be an issue when they download the page multiple times. The browser should be caching the images and the external stylesheet. Therefore, reducing load time.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Downloading a page multiple times isn't really the issue I'm concerned with. Say Page A has a large background image defined on an external style sheet, and Page B has a small one. Will a first-time visitor to the site who accesses only Page B experience slower load times for that page because all the background images in the style sheet (including the large one for Page A) are downloaded and not just those for Page B? I hope that's clearer

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I believe only the images that are called for on the current page will be loaded.

    Of course the whole stylesheet will be loaded and cached but the image will only be loaded and cached once the html code calls for it.

    This can be tested in css rollovers where a background image is swapped on hover. Initially the hover image may take a second or two to appear because it has not been seen yet and cached.

    Some styles sheets have reference to hundreds of images and if they were all loaded for every page then it would never load at all.

    Paul
    Edit:


    apparently safari has a bug that loads all the images metnioned in the stylesheet but other browsers don't.

  5. #5
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That's the way I thought it worked until I ran a page through an online test that measures download times. It listed every background image from the CSS file, even those not on the page tested. From your reply, I guess that's a quirk of the test and not the way browsers actually function.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •