Bug 31630 – Avoid downloading CSS background images that will never be visible

• Component: CSS
• Status: RESOLVED DUPLICATE

[Anthony Ricaud]

Created attachment 43437 [details]
Testcase

1. Open the attached testcase
2. Check in the Resources panel or in the Activity window

Actual result:
The image was downloaded

Expected result:
The image wasn't downloaded

Without this behavior, the CSS gradients are less useful since you still download a useless image.

Firefox3.6beta3 is not downloading the image.

[Darin Adler]

Hyatt has long been our "what images need to be loaded" strategist. In general there are images and stylesheets and other objects you might wish to not load that need to be loaded to support "preloading" behavior expected by websites or other correctness issues. But obviously, not loading things is *way* better for performance.

Hyatt, can you weigh in on this?

[Martin Klepsch]

Created attachment 44099 [details]
Shows how an with "! important" overwritten image gets loaded.

when forcing backgound-image: none; with !important any background-image declaration after that one should be ignored therfore the images should not get downloaded to the client.

[Martin Klepsch]

Created attachment 44100 [details]
Shows how an regulary overwritten image gets loaded.

this shows that images that are overwritten simply by a second background assignment are also loaded.

[Martin Klepsch]

(In reply to comment #1)
> Hyatt has long been our "what images need to be loaded" strategist. In general
> there are images and stylesheets and other objects you might wish to not load
> that need to be loaded to support "preloading" behavior expected by websites or
> other correctness issues. But obviously, not loading things is *way* better for
> performance.
> 
> Hyatt, can you weigh in on this?

i think it's okay to load images that are just not visible at the beginning (icons for js flash messages for example) but loading images that are overwritten by another property declaration is unneeded.
maybe i'm wrong but i've never seen something like this in js: 
removing a second property declaration in order to make the first declaration used by the browser to render the page.

[Hugues Lismonde]

I'll vote for this one too. Overridden background-image should never be downloaded, as Anthony said, it defeats the purpose of using graceful degradation with gradients, shadows, ... (but "invisible" background images should definitively be downloaded/prefetched).

[Dave Hyatt]

Yes, this is just a bug.  I think it's already been filed.

[Dave Hyatt]

*** This bug has been marked as a duplicate of bug 24223 ***