how to update images embedded in css or js files

Question

The CSS files that I am using load some images like this:

eg: main.css:  
.nav{  
background-image:url("/www/images/bg.png")  
}

<link href="/www/css/main.css?version=1.2" type="stylesheet" />

CSS File is loaded in the HTML as shown above.

I know there is an approach that adds a query string like "?version=1.2" to force the browser to load the css file from the web server not from cache. But my problem is that this works ok for css file, but does nothing to the embedded images.

So what can I do to make the browser download the images embedded in the css or js files when I edit the images, but the names stay the same?

I would like not to: 1. change the image name 2. disable caching

thanks

score 0 · Answer 1 · answered Mar 17 '12 at 13:03

0

May be use chrome incognito to make browser get the images every time ?

answered Mar 17 '12 at 13:03

pshirishreddy

746
6
20

Francois · Answer 2 · 2012-03-17T13:10:44.730

0

Can you use .htaccess file on your hosting (with mod_expires)?

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType image/png "access plus 1 minutes"
</IfModule>

EDIT: I saw your edit. Your question is that you want to force client to refresh images when you update them on server, without disabling browser cache?

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType image/png "modification plus 1 seconds"
</IfModule>

edited Mar 17 '12 at 13:10

answered Mar 17 '12 at 13:04

Francois

10,730
7
47
80

thanks. mod_expires is apache module, however,we just use tomcat as web server only. what should i do with tomcat? – explorer Mar 19 '12 at 03:45

score 0 · Answer 3 · answered Mar 17 '12 at 13:06

0

Adding a query string to the url like ?version=2 only prevents caching when the url changes every time, for instance image.png?random=123, where the value of random is different every time the page loads. The unique url forces the browser to re-fetch the image every time since the url doesn't match the url of the cached image.

Since you're wanting to use a static URL, I would suggest setting your HTTP server settings to send a header to the browser not to cache images. Let me know if you need help with that.

answered Mar 17 '12 at 13:06

Anthony

36,459
25
97
163

thanks for your suggestion. but browser should load the cache images unless images had been changed, just for reduce the traffic and also speed the load procedure. so cache images is necessary. do you have any other ideas thanks? – explorer Mar 19 '12 at 03:51
If the url of the embedded image has changed (say from `?v=1` to `?v=2`, this will trigger the browser to re-fetch. The only way to be sure the browser will pull from the cache until the image has changed is to change the URL or have the server (via htaccess file) send cache directives based on the modified date of the image (which I think someone else covered in their answer). – Anthony Mar 21 '12 at 02:29

score 0 · Answer 4 · edited May 23 '17 at 12:11

Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick. http://code.google.com/speed/page-speed/docs/module.html

It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.

Stolen from this post How to force browser to reload cached CSS/JS files?

how to update images embedded in css or js files

4 Answers4