Disable cache for some images

html

cache-control

http-headers

cross-browser

byAlex Kataev·Aug 12, 2024

Prevent specific images from being cached by the browser using a query string with a distinct element such as a timestamp attached to the image URL, like this:

document.querySelectorAll('img.nocache').forEach(img => {
  // Cache? Where we're going, we don't need cache!
  img.src += '?_=' + Date.now();
});

This line of code appends a unique parameter to each img with the class .nocache, tricking the browser into loading a fresh image every time.

Deploy cache control effectively

Effective cache management integrates techniques that not only bypass cache, but also know when to use it purposefully. Here's what to consider when disabling cache for images:

1. Using cache-control headers

Leverage Cache-Control: no-cache and similar headers in your web server configuration for specific images. These directives instruct the browser to validate the content before using a cached copy. How to set these headers depends on your web server, for instance Apache or Nginx.

2. ETags for conditional caching

Implement ETags for conditional requests, allowing the server to only send an image if it differs from the browser's cached version. For enabling ETags on specific image types, modify .htaccess or the respective server configuration.

3. Server-side tendency to cache

Ensure your server isn't persisting images against your will. Update your server or language-specific (like PHP) settings and use no-store options to bypass server-side cache.

4. Coping with browser diversity

Given that browsers may be inconsistent in how they handle cache directives, be prepared. Include a variety of cache-related headers to cater to different browsers. Cache-Control: no-cache, Pragma: no-cache, and Expires: 0 usually comprise a good starting point.

Script-implemented cache management

For cache control that adapts to the situation, JavaScript offers a variety of dynamic options.

5. Dynamic URL updates

Use JavaScript to inject unique URL parameters, such as a random string or timestamp. This essentially updates the src attribute of selected images to bypass server's cache directives.

6. Avoid caching cached JavaScript

Ensure that your cache-busting JavaScript code is not cached. Place the script in a non-cached file or embedded in the HTML to avoid cache-induced stalemates.

7. Query strings: Use wisely

While appending unique strings to all images guarantees freshness, it can also lead to performance degradation. Be judicious with using randomness, applying it selectively only to high-churn images.

Implementing HTTP headers effectively

HTTP headers offer a flexible way to manage cache. However, their effectiveness may vary.

8. Server capabilities matter

Ensure your web server is capable and configured to comprehend headers and manage cache accordingly.

9. Headers and revalidation

Use Cache-Control, Pragma, and Expires headers to hint to the browser, keeping in mind that these are tips, not orders. Headers such as no-cache direct the browser to revalidate with the server before using the cached copy.