How to load new images, when changed in a web application

Question

How to push new images in a web application, so that the cached is not taken? When I am having a new JS or CSS file, it's easy. Because they are in smarty templates, and I am having a version number in the URL (like a.js?v=9).

Now, the problem with images are: -

They are referred from the CSS files, and I can not have a version variable there.

So, how do you do it?

Answer 1

You could manually change the CSS file at the same time that you change the image file, put a "?v=1" onto the end of the image url.

You could also configure your server to send CSS files through the PHP processor, so you could stick some PHP code in there to set the "?v=8" query string on the image url.

Answer 2

As part of my build process, I append a querystring to javascript includes and image URLs that has the file's LastModified date/time as a long. This allows caching to work when it should, and automates something that is easy for the developer to forget.

Answer 3

In the middle between cleanest and easiest way, I would :

• In the CSS, point to images with URLs containing a distinct marker ; like "image.png?VERSION_NUMBER" (literaly)
  • this will allow the CSS file to be used while developping
  • To avoid any problem with cache, I would configure Apache (on the development machine) to indicate files should not be cached by the browser
• I would use some kind of "build process", that would replace this VERSION_NUMBER marker by the real version number in every CSS file (and possibly, JS, PHP, HTML, ... )
  • This would create modified files, containing the right version number
  • Those files would be the ones deployed to the webserver
  • Ideally, the VERSION_NUMBER could be the SVN revision of each file ; this way, only files really modified would have to be modified ; but also harder : for each file (each URL in the CSS file !), you have to determine it's revision number before replacing the marker !

If some browser don't cache images/js/css because of the query string, the marker could be included in the files' names.

And now that you have a "build process", you can also use it to make some other manipulations, like minifying JS and CSS files, for instance

As a side note : yes, creating and testing the build process / script takes some time ; it might be easier to server CSS files through PHP, using a variable in those to indicate the version number... But, for performances, serving CSS files (at least one per PHP page ; probably more !) wouldn't be that wise ; so, probably better to take a bit more time to write the build process...