Question

Why sometimes I send a image (or CSS, JS, etc) to FTP, they are not uploaded (or are cached)?

#container {
    background: url("../images/bg.jpg") no-repeat scroll 0 0 transparent;
    height: 895px;
    overflow: hidden;
}

But with // (../images//bg.jpg), I can see the new image

#container {
    background: url("../images//bg.jpg") no-repeat scroll 0 0 transparent;
    height: 895px;
    overflow: hidden;
}

Answer 1

It seems that the files ARE uploaded, but cached by the browser.

Try reloading with CTRL+F5 in Firefox/IE (other browsers may have different shortcuts) and you should see the fresh file always.

Resources (JS, CSS, and image files) are somehow more aggresively cached by the browser. While for HTML pages, you will generally have a new HTTP request every time you refresh, for resources, sometimes there will be no HTTP request generated at all. You may see it by looking e.g. at the Firebug’s Net Panel.

Caching is generally a very tricky topic, a lot depends on the server’s and browser’s settings and implementation.

Browser-caching is implemented generally via exact URL matching. So, http://someserver/bg.jpg and http://someserver//bg.jpg are two entirely different URLs. However, many HTTP servers will assume that you requested the same content, and will send the content of the bg.jpg file stored on your server root folder (you must see the difference between the URL, and the content linked with this URL).

If you visited the first URL, it will be cached by the browser. Then, after you upload a new version of the image, a lot depends on the browser implementation of caching, and the cache settings of the server that were sent when you downloaded ‘bg.jpg’ for the first time. For instance, the server settings sent in HTTP response header with the image could have been, that for the next say 1 hour, the image may be cached by the browser, and loaded directly from cache without even asking the server (the server settings may be configured that way to avoid unnecessary traffic).

The (a bit hacky, but quite frequently used) way to always get a ‘fresh’ version of the file is to add a current timestamp to the request (but it’s generally restricted to server-side generation, or in JavaScript scripts) — doesn’t make much sense in CSS.

So, at the time I write it, the script will ask the server for
http://someserver/bg.jpg?1334442703
but a few seconds later when I refresh the page, it will be
http://someserver/bg.jpg?1334442711

Most servers will discard the query string (string after ‘?’), and will simply return the same contents of bg.jpg file for both queries, but since the URLs for the images are different, none of the browsers should read the image from cache.