Cache Background Image

cache background image

I think you need to determine first if the issue actually is a caching issue or if it's caused by the size of your image. You could use a program like Wireshark or Fiddler to do this, but to be honest it's overkill for your need and you probably already have a browser with developer tools.

Here's how you determine where an image is coming from in Chrome (the other browsers are similar).

Open your developer tools and go to the "Network" tab.
Find "bg.png" in the list of network requests and click on it's name. Below is an example of having selected a stack overflow image from this page.

Google Chrome Image Retrieved from Cache

Notice that it says status 200 (from cache). The browser didn't need to go out to the server and rerequire that resource. It used the cache. If that "from cache" text wasn't there it wasn't reusing cached resources.

There is also the potential that you'll get a status code of 304. That means that the server said the image wasn't modified since the last request that you made. You do make the server trip in that case.

Ok, so my image wasn't in cache... now what?

There are a few reasons that this could occur.

You're request headers aren't set to tell the browser to cache the image (also found in that same "Headers" tab that you would have seen that Status Code if the browser actually went to the server for the image). You'll want to set cache-control and expires to something that makes sense for you. Cache headers can get a bit complicated you may want to browse through this caching tutorial document.
Is it SSL? If so not all browsers cache this but most modern browsers do. Set cache-control: public on these images (and also expires).

The real question here is how do you fix this? Unfortunately, that's entirely dependent on the server and/or the framework that you are using. As the OP is using Apache, they can find great documentation on the Apache module mod_expires to figure out how to tweak caching for their site.

Background images in css are not getting cached

could it be a forgotten "disable cache" option selected in the network tab in the dev tools ? Because it seems the server responds with the correct type of cache headers.

bust cached CSS background-images with Grunt

Versioning the CSS files are unfortunately not good enough for Cache busting assets, this would force the browser to fetch the new CSS file itself from the server. But since the browser caches your CSS files and your images as separate items, you will need to bust the images/sprites as well separately.

When the image follows ? background-image: url(../img/some-sprite.png?version=20130205), the browser is forced to make a new request. This is important to notice that it DOES make a new request if the ? is found.

If you do have some special interest towards it - Read this article to get to know more about Cache busting in LESS

https://www.bennadel.com/blog/2643-cache-busting-css-images-with-less-css.htm

For Cache busting with only Gulp & not editing your SASS
follow this

You could also use numerous npm packages like gulp-cache-buster etc.

If you want cache busting in your SASS you could follow this

Is the browser caching CSS background images?

In the scenario you describe, the browser will essentially reference the same image several times on one page, and this will almost certainly be cached.

Across different pages, the answer depends on the browser, and on the expiration headers your server sends will impact the caching behavior in conforming agents.

Cache Background Image