CSS Image Caching

Question

In terms of client-side image caching, is there a difference between the following:

**Option #1**
<div style="background:url('myimage.jpg');display:none;"></div>

and

**Option #2**
<div id="myimage"></div>

style.css
#myimage {
     background:url('myimage.jpg');
     display:none;
}

EDIT: I'm not sure if it matters but the above DIVs are first loaded on another page with style="display:none;"

Chris Hynes · Accepted Answer · 2009-03-25 21:07:04Z

4

No. Client caching is controlled by headers returned from the server in the request for the image, not the css.

As an aside, if you're looking for image caching, I highly recommend using a CDN. Amazon's CloudFront makes this easy and cheap.

answered Mar 25, 2009 at 21:07

Chris Hynes

10.3k2 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Konstantin Tarkus Over a year ago

Alison is asking about client-side caching which is different subject.

Chris Hynes Over a year ago

Client caching is controlled by the cache headers on the request. Yes, CDN != client caching, but it is also very useful in situations when you are worrying about caching because of perf.

Konstantin Tarkus · Accepted Answer · 2009-03-25 21:11:32Z

3

No. Also note that some browsers won't cache graphics ih hidden elements (regrardless of whether you hide them directly or hide one of their parent elements).

answered Mar 25, 2009 at 21:11

Konstantin Tarkus

38.6k14 gold badges137 silver badges123 bronze badges

1 Comment

NakedBrunch Over a year ago

Which browsers don't cache graphics in hidden elements?

Collectives™ on Stack Overflow

CSS Image Caching

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related