Control Image Browser Caching

I had read that setting a browser cache expiration was a good thing to do.

The benefits are

  • Limits the downloading of the image
  • Governs how long before the image is re-downloaded

The cache time can be defined per image but

  • Extra to do per image
  • Parameters may not be available through the CMS’s interface
  • Easy to forget leading to inconsistency

What if we could set this globally?

Well the place to do this is back with our old friend the .htaccess file.

Shown below is an example of the addition to the htaccess file.

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

Decrease that value for the duration from access plus 1 year to access plus 1 day, or access plus 1 hour and its possible to force the refreshing of your clients’ browser whilst making updates to the new, or old site.

I had a client whose browser refused to respond to updated image files whilst making changes for review. The usual browser cache refreshing wasn’t working.

Finding the ability to add to the htaccess file caching control for the images made life so much easier, allowing me to demonstrate to my client the changes made and hence sign off of the project.

More info from the website server project, a website control panel company and a random website hosting company.

Apache Module mod_expires

Inmotion hosting add mod_expires to your htaccess

How to enable leverage browser caching for Apache in Plesk