Bug 31630

Summary: Avoid downloading CSS background images that will never be visible
Product: WebKit Reporter: Anthony Ricaud <rik>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: darin, hugues.lismonde, hyatt, laszlo.gombos, martinklepsch, mitz, simon.fraser
Priority: P2 Keywords: HasReduction
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Testcase
none
Shows how an with "! important" overwritten image gets loaded.
none
Shows how an regulary overwritten image gets loaded. none

Description Anthony Ricaud 2009-11-18 09:47:46 PST
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.
Comment 1 Darin Adler 2009-11-19 11:24:17 PST
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?
Comment 2 Martin Klepsch 2009-12-01 13:56:34 PST
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.
Comment 3 Martin Klepsch 2009-12-01 14:09:39 PST
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.
Comment 4 Martin Klepsch 2009-12-01 14:18:09 PST
(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.
Comment 5 Hugues Lismonde 2010-02-01 13:48:15 PST
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).
Comment 6 Dave Hyatt 2010-02-14 14:24:54 PST
Yes, this is just a bug.  I think it's already been filed.
Comment 7 Dave Hyatt 2010-02-14 14:26:42 PST

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