How do I make the browser not store image caching with HTML or PHP?

Question

I am creating a web page that is practically only image, every day I change the images of the page but their name remains the same. The browser is storing a lot of cache and each time I update the images they do not change visually if you have already accessed the page in the browser.

Answer 1

Solution 1 - Serving images via PHP:

This is a solution to serve images in a way that does not remain in the browser cache, setting the appropriate headers via PHP:

<?php
   header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
   header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
   header( 'Cache-Control: no-store, no-cache, must-revalidate' );
   header( 'Pragma: no-cache' );

   header('Content-type: image/jpeg');
   readfile( 'minhaimagem.jpg' );
?>

Changing the minhaimagem.jpg for:

   readfile( '/caminho/para/imagem'.$_GET['img'] );

You can use Urls in this format, for example:

http://example.com/nocache.php/foto12.jpg

This is a simplification to illustrate the basic steps. Make sure to do an extra check in PHP to not give access to other server files.

Solution 2 - Changing SRC via PHP:

If images only need to be updated on your page, you can do the src thus:

echo '<img src="/link/para/imagem.jpg?'.date("YmdHis").'">';

In this way, every second query string of the links will change, forcing a reread, however, always pointing to the same file paths on the server.

Answer 2

I recommend using the filemtime(...) with the ?, similar to the example from @Bacco, it returns the last of the file update, so the cache will only be updated if there are even modifications in it:

<?php
//Pasta aonde ficam as imagens
define('ABSOLUTE_PATH', '/home/user/project/');
?>

<img src="/link/para/imagem.jpg?<?php echo filemtime(ABSOLUTE_PATH . 'link/para/imagem.jpg'); ?>">

And this way you can still benefit from the cache.

There is also the possibility to use a mod_expires Apache to set a cache time, for example a day from the last update.

First create a file called .htaccess in the folder where the images are located or at the root and place this content:

<IfModule mod_rewrite.c>
ExpiresByType image/gif "modification plus 1 day"
ExpiresByType image/jpeg "modification plus 1 day"
ExpiresByType image/png "modification plus 1 day"
</IfModule>

The ExpiresByType serves to set the file’s mimetype cache, in case I used image/gif, image/jpeg and image/png for the guys .gif, .jpeg and .png respectively. THE modification indicates that the cache is generated from the last file update, as in your case once a day you change the files, the plus 1 day adds a day to modification, so we’ll have a one-day cache.