Content vs Style images

I was wondering, are images files which are used in content but also used as CSS backgrounds in the same HTML page cached separately ( multiple server calls) ? What about if they are used as content in :before/:after pseudo classes?

I mean if I had:

<style> .someClass{ background:url(test/image.gif); }/* this may or may not be used right away*/}

</style>
<style> .anotherClass:before{ content:url(test/image.gif); }/* this may or may not be used right away*/}
<img src='test/image.gif'>

Thanks ,as always for sharing your smarts :wink:

1 Like

In short, no - they don’t.

Browsers do not discern the source from which an image is referenced in the web page to determine cache habits. Browsers merely monitor the image url and connection requests. If a web page requests a connection for an image url that has been previously downloaded, it will use the cache. Browsers will download all images referenced in the CSS, regardless of pseudos.

Try downloading a web developer extension for your browser that monitors net connections. This kind of techie stuff is easily answered by observing what the browser is doing behind the scenes. I use firebug.

Is this true? (Or did you mean to add “when called for on the page”)

If I have a css file that references 10,000 background images but I am only displaying one of those images in the page how many images will the browser cache?

In a normal css file you have the background images for your whole site which could run into hundreds and hundreds over a large site. That means on first page load you could be waiting a few hours for the first page to load if all those images are to be loaded and cached.

I believe that most browsers only load and cache background images when they are called for display on the page (ignoring media queries for now as that is another kettle of fish and images may /may not be downloaded depending if the page fits the media query criteria). That means that if the image needs to be visible on the page (not display:none) then it will be loaded.

Otherwise why would we have bothered to create pre-loaded rollovers all those years ago.:slight_smile:

If your current page requires your css image to be displayed then it will be fetched. If you have a rule in your css that is not used on the page but that contains a reference to an image then it won’t be fetched or cached until the page needs it.

If in your html source you have an img tag then that image will be loaded (even if it is display:none - but may not if the parent is also display:none). Once that image has bee seen then you can of course call the same image as a background image via css without any delay (which was the way some people used to cache their css images to avoid rollover delays).

This is one of the reasons that responsive images were required because any image in the html gets loaded even if you hide it with css so smaller devices were always downloading the image anyway (in most cases).

1 Like

Well, important slippage there, no browsers don’t download all images in css files. All the images referenced in the CSS**/HTML** is what I meant to type. However my answer is still the same, no. In the example you gave, there is no separate caching of the images.

Yes I thought that was what you meant. :wink: just wanted to clarify as this was an old rumour that is obviously not true (although I believe very early versions of Safari did this which is why the rumour may have sprang up).

well this is where the spec seems ambigous to me, not to sound dense:

I am referring to an IMAGE that’s is used/displayed in a page. BUY ALSO if a CSS is cached SEPARATELY from the rest of the HTML SOURCE CODE.

so if my page contained had:

.someClass{ background:url('test.jpg'); height:100px;}

<img src="test.jpg>
<div class="someClass">ohai</div>

would the be two instances of test.jpg in the cache or or just one?

Browsers merely monitor the image url and connection requests. If a web
page requests a connection for an image url that has been previously
downloaded, it will use the cache. Browsers will download all images
referenced in the CSS, regardless of pseudos.

I figured that you meant USED/DISPLAYED and not merely in the CSS code. If I interpret that the browser monitors a URL IN ALL CASES, then I would assume the should be only one copy of the image in the cache, BUT browsers checked the CSS separately then it sounds as is if possible that there MAY be two?

Interesting. I’ve never given it much thought before, but now …

<html><head>
<title>image caching test</title>
<style type="text/css">
.background {
  background: url('http://localhost/test/images/facebook.png');
  height:68;
}
</style>
</head><body>
<div class="background"></div>
<img src="http://localhost/test/images/facebook.png" height="68px" width="68px" />
</body></html>

Firefox considers different “type” as different image files even with the same path?
I have thought that browsers used the path to determine “sameness” but now I wonder.

How many hits were there on that image?

True, I guess “Page Info” is the best to test this with.
Dev tools shows 2 GET requests.
1 for the page HTML
1 for the image

The browser will only cache the one image and can be checked without developer tools by simply loading an image in the html and then setting the same image url as a rollover to another element. There will be no delay on the rollover because the image was already cached unlike an image that had not yet been seen where you will see a delay on the rollover while it loads.

Excellent.
I conclude from pails answer that content images can be used in the CSS/vise versa and though of as a link to the same (cache) file?

As far as I can see it’s all about the url and if the url of the resource matches the url of the cached resource then a match is made and the cached resource used.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.