Cache problems while getting images from server

Question

I am building an website in which various css-sprites are used. But my problem is when i do any changes in uploaded image sometimes it does not reflect on the client browser because sometimes pages and their data like css,images,javascripts are load from browser cache.

Please suggest me what to do in this case. Should i put these

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

in the HTML page ?

or there is any idea to resolve this problem ?

Answer 1

When I work with dynamic images in web pages, I always add a parameter with a random value at the end of the URL, to force the browser (especially IE) to retrieve the image fresh from the server.

image.jpg?v=<random num>-<random num>-<random num>-<random num>

Your image url will look something like

src="image.jpg?v=1234-5678-91011"

The random numbers I control via Javascript. Any random parameter value convention would work of course, this is just my preferred format. Hope this helps.

Answer 2

If the problem is only when developing the page:

You can use the key combination Ctrl+F5 on any modern browser which clears the page's cache and then refresh the page.

By doing this, any CSS script, Javascript script and Image file will be downloaded again from the server.

Answer 3

Ask your client to view your changes when reviewing in incognito mode on Chrome....this should resolve the problem...

https://support.google.com/chrome/answer/95464?hl=en

Answer 4

change the name of the picture each time you upload or add a random number to it

src="myimage.jpg?{somerandomnumber}" 

More info

HTML Cache control

or

tags to turn off caching in all browsers Useful HTML Meta Tags

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

your .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 days"
</IfModule>
## EXPIRES CACHING ##

Answer 5

You should also check the headers being sent by the page. Caching can—and is—a headache, because often HTML caching tags like the ones you have are handled differently when a browser faces server side caching headers.

The best way to check if you are a Unix/Linux machine such as Mac OS, Ubuntu or CentOS is to use curl with the -I parameter. For example here is the output of the curl -I when used to check Google:

curl -I https://www.google.com/

HTTP/1.1 200 OK
Date: Thu, 05 Jun 2014 04:59:23 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=926cae6eb35d6ed1:FF=0:TM=1401944363:LM=1401944363:S=QXyixlyAVYyBE4TK; expires=Sat, 04-Jun-2016 04:59:23 GMT; path=/; domain=.google.com
Set-Cookie: NID=67=DxR2KWNdGhQ_u3QCtFUK1TH4dTmef-FfFP67FZiKFDIFJqsdYMPo-3w3mqGD4Iag2t-c-ae1LiNrcX4JslRsxWYCqhBvu0g0tEUA4dKpb07keOkXsAG7uBLynWvN3wzA; expires=Fri, 05-Dec-2014 04:59:23 GMT; path=/; domain=.google.com; HttpOnly
P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
Server: gws
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Alternate-Protocol: 443:quic
Transfer-Encoding: chunked

Note the Expires: -1 which basically means the page will not be cached. Now check out the headers for the Google logo PNG image:

curl -I https://www.google.com/images/srpr/logo11w.png

HTTP/1.1 200 OK
Content-Type: image/png
Content-Length: 14022
Last-Modified: Wed, 09 Oct 2013 01:35:39 GMT
Date: Thu, 05 Jun 2014 04:56:40 GMT
Expires: Thu, 05 Jun 2014 04:56:40 GMT
Cache-Control: private, max-age=31536000
X-Content-Type-Options: nosniff
Server: sffe
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 443:quic

Notice how that image has more specific Cache=Control and Expires: settings.

So I would recommend you use curl -I with the content in question. There might be a server setting getting in the way of your HTML updates that can only really be overridden on the server level.