CODEWITHSUNDEEP
phpimagefilecachingbrowser-cache
ProgrammerGirl
ProgrammerGirl

Reputation: 3223

How to take advantage of Image caching while keeping track of when images have changed?

On one of my sites, I simply store my users images as '1.jpg' in their user folder. This means that whenever they change their profile pic, the filename stays the same.

I've been wanting to take advantage of image caching so that the same old pic doesn't get downloaded over and over again whenever a user's profile is viewed and re-viewed, but at the same time, I want my users' browsers to download the new one if it has changed.

How could I do this in PHP?

Upvotes: 0

Views: 225

Answers (3)

ProgrammerGirl
ProgrammerGirl

Reputation: 3223

Answered here: https://webmasters.stackexchange.com/questions/32481/is-it-worth-it-to-change-my-entire-user-images-file-structure-to-take-advantage

One commonly used solution is to make your image URLs look something like this:

http://www.example.com/path/to/images/1.jpg?v=123456

Here, /path/to/images/1.jpg is the actual URL path of the image, while ?v=123456 is just a dummy query staring tacked onto the end of the URL. The query string can be anything — a version number, a timestamp, a hash of the image content — as long as you change it whenever the image changes, and keep it the same when it doesn't.

The trick is that the web server, when asked to serve such a URL, will ignore the query string, since the URL in fact points to a static file. But to the user's browser (and to any proxies in between), URLs with different query strings will be completely different, and so any change to the query string forces the browser to reload the file.

Thus, you can configure your web server to send Expires and Cache-Control HTTP headers to allow indefinite caching, safe in the knowledge that you can force a reload by changing the query string. One way to do that, if you're using Apache with mod_expires, is to put an .htaccess file in your image directory with the lines:

ExpiresActive On
ExpiresDefault "access plus 1 year"

This technique is used by many popular websites. For example, if you look at the HTML source of this very page, you'll find that the style sheet for it is loaded from a URL like this:

http://cdn.sstatic.net/stackoverflow/all.css?v=7cd8ea9d6f1e

Here, the ?v=7cd8ea9d6f1e is a dummy query string just like I described above; you can confirm that by changing it and seeing that it indeed still returns the same file.

Upvotes: 0

A Person
A Person

Reputation: 1350

E-Tagging, Last-modified, basically headers that enable browsers to decide if a resource, i.e the profile pic, has changed and whether or not to download it from your server or retrieve it from cache.

Might I suggest using php to call the picture instead of directly linking it?

<?php $lmt = filemtime($_GET['file']); $etag = md5($lmt); header('Content-type: application/x-javascript'); header("Cache-Control: max-age=3600"); header("Last-Modified: ".gmdate("D, d M Y H:i:s", $lmt)." GMT"); header("ETag: ".'"'.$etag.'"'); if(@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $lmt || trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) { header("HTTP/1.1 304 Not Modified"); exit; } ?>

Content then would be loaded below this code segment

Upvotes: 0

parapura rajkumar
parapura rajkumar

Reputation: 24433

The simplest fix would be that each user's profile pick is assigned a random name GUID.jpg. Whenever they change their profile pic assign them a new GUID.

Now you can server this profile pic with instructions to clients to cache it forever.

Upvotes: 2

Related Questions