How to force the browser not to cache images

Posted on 30 December 2019 15:02 by alv90

When I made my website, I ran into a big problem: because I often make modifications to my games and also change the visual theme, I have to update the images. However, the browser continues to show the old images, even if I overwrite the image files (due to the browser cache).

I did a search on the web, and the solution is simple: just append a code after the filename (for example the timestamp). Example:

<img src="test.png?134689">

1	<img src="test.png?134689">

But appending the code manually on each image is rather uncomfortable; moreover, when you change an image, you have to update the timestamp manually.

This script solves the problem: it automatically appends the timestamps on all images and also on links. It uses the PHP DOM extension to find images and links, then it modifies the attributes src and srcset for images, href for links.

Just include the script manipulate1.php before the html tag, manipulate2.php after the html closing tag. Enjoy!

manipulate1.php

<?php
ob_start();
?>

<?php

ob_start();

manipulate2.php

<?php
 
error_reporting(E_ERROR | E_PARSE);
 
function startsWith ($string, $startString) 
{ 
    $len = strlen($startString); 
    return (substr($string, 0, $len) === $startString); 
} 
 
function isAbsoluteUrl($url)
{
	$pattern = "/^(?:ftp|https?|feed)?:?\/\/(?:(?:(?:[\w\.\-\+!$&'\(\)*\+,;=]|%[0-9a-f]{2})+:)*
	(?:[\w\.\-\+%!$&'\(\)*\+,;=]|%[0-9a-f]{2})+@)?(?:
	(?:[a-z0-9\-\.]|%[0-9a-f]{2})+|(?:\[(?:[0-9a-f]{0,4}:)*(?:[0-9a-f]{0,4})\]))(?::[0-9]+)?(?:[\/|\?]
	(?:[\w#!:\.\?\+\|=&@$'~*,;\/\(\)\[\]\-]|%[0-9a-f]{2})*)?$/xi";
 
	return (bool) preg_match($pattern, $url);
}
 
function normalize_path($str){
    $N = 0;
    $A =explode("/",preg_replace("/\/\.\//",'/',$str));  // remove current_location
    $B=[];
    for($i = sizeof($A)-1;$i>=0;--$i){
        if(trim($A[$i]) ===".."){
            $N++;
        }else{
            if($N>0){
                $N--;
            }
            else{
                $B[] = $A[$i];
            }
        }
    }
    return implode("/",array_reverse($B));
}
 
function getURL() {
	if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on')   
         $url = "https://";   
    else  
         $url = "http://";   
    // Append the host(domain name, ip) to the URL.   
    $url.= $_SERVER['HTTP_HOST'];   	
	return $url."/";
}
 
function filemtime2($path) {
	if (!isAbsoluteUrl($path)) {
		if ($path[0]=='/') $path='.'.$path;
		$path2=normalize_path($path);
	}
	else {
		$url=getURL();
		if (startsWith($path,$url))
			$path2=substr($path,strlen($url));
		else return 0;
	}
	try {
		return filemtime($path2);
	}
	catch (Exception $e) {
		return 0;
	}
}
 
$time=time();
 
$ob=ob_get_clean();
ob_end_clean();
 
//echo $ob;
 
$html = new DOMDocument();
libxml_use_internal_errors(true);
$html->loadHTML($ob);
libxml_clear_errors();
 
$nodes = $html->getElementsByTagName('img');
foreach ($nodes as $node) {
    foreach ($node->attributes as $att) {
        if ($att->name == 'src') {
			if (strpos($att->value, '?') !== false) {
				continue;
			}
            $node->setAttribute('src',$att->value."?".filemtime2($att->value));
        }
        if ($att->name == 'srcset') {
			$a=explode(" ",$att->value);
			$src=$a[0]."?".filemtime2($a[0]);
			for ($j=1;$j<count($a);$j++) {
				if ($j%2==0)
					$src.=" ".$a[$j]."?".filemtime2($a[$j]);
				else
					$src.=" ".$a[$j];
			}
            $node->setAttribute('srcset',$src);
        }
    }
}
$nodes = $html->getElementsByTagName('a');
foreach ($nodes as $node) {
    foreach ($node->attributes as $att) {
        if ($att->name == 'href') {
			if (strpos($att->value, '?') !== false) {
				continue;
			}
			
			$a=explode(".",$att->value);
			$ext=$a[count($a)-1];
			
			if ($ext=="png" || $ext=="jpg" || $ext=="txt")
				$node->setAttribute('href',$att->value."?".$time);
        }
    }
}
 
echo $html->saveHTML();
 
 
 
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<?php

error_reporting(E_ERROR | E_PARSE);

function startsWith ($string, $startString)

{

$len = strlen($startString);

return (substr($string, 0, $len) === $startString);

}

function isAbsoluteUrl($url)

{

$pattern = "/^(?:ftp|https?|feed)?:?\/\/(?:(?:(?:[\w\.\-\+!$&'*\+,;=]|%[0-9a-f]{2})+:)*

(?:[\w\.\-\+%!$&'*\+,;=]|%[0-9a-f]{2})+@)?(?:

(?:[a-z0-9\-\.]|%[0-9a-f]{2})+|(?:\[(?:[0-9a-f]{0,4}:)*(?:[0-9a-f]{0,4})\]))(?::[0-9]+)?(?:[\/|\?]

(?:[\w#!:\.\?\+\|=&@$'~*,;\/\[\]\-]|%[0-9a-f]{2})*)?$/xi";

return (bool) preg_match($pattern, $url);

}

function normalize_path($str){

$N = 0;

$A =explode("/",preg_replace("/\/\.\//",'/',$str)); // remove current_location

$B=[];

for($i = sizeof($A)-1;$i>=0;--$i){

if(trim($A[$i]) ===".."){

$N++;

}else{

if($N>0){

$N--;

}

else{

$B[] = $A[$i];

}

return implode("/",array_reverse($B));

}

function getURL() {

if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on')

$url = "https://";

else

$url = "http://";

// Append the host(domain name, ip) to the URL.

$url.= $_SERVER['HTTP_HOST'];

return $url."/";

}

function filemtime2($path) {

if (!isAbsoluteUrl($path)) {

if ($path[0]=='/') $path='.'.$path;

$path2=normalize_path($path);

}

else {

$url=getURL();

if (startsWith($path,$url))

$path2=substr($path,strlen($url));

else return 0;

}

try {

return filemtime($path2);

}

catch (Exception $e) {

return 0;

}

$time=time();

$ob=ob_get_clean();

ob_end_clean();

//echo $ob;

$html = new DOMDocument();

libxml_use_internal_errors(true);

$html->loadHTML($ob);

libxml_clear_errors();

$nodes = $html->getElementsByTagName('img');

foreach ($nodes as $node) {

foreach ($node->attributes as $att) {

if ($att->name == 'src') {

if (strpos($att->value, '?') !== false) {

continue;

}

$node->setAttribute('src',$att->value."?".filemtime2($att->value));

}

if ($att->name == 'srcset') {

$a=explode(" ",$att->value);

$src=$a[0]."?".filemtime2($a[0]);

for ($j=1;$j<count($a);$j++) {

if ($j%2==0)

$src.=" ".$a[$j]."?".filemtime2($a[$j]);

else

$src.=" ".$a[$j];

}

$node->setAttribute('srcset',$src);

}

$nodes = $html->getElementsByTagName('a');

foreach ($nodes as $node) {

foreach ($node->attributes as $att) {

if ($att->name == 'href') {

if (strpos($att->value, '?') !== false) {

continue;

}

$a=explode(".",$att->value);

$ext=$a[count($a)-1];

if ($ext=="png" || $ext=="jpg" || $ext=="txt")

$node->setAttribute('href',$att->value."?".$time);

}

echo $html->saveHTML();

2 thoughts on “How to force the browser not to cache images”

David
on
15 November 2022 at 00:36 says:

Thanks! Can I use this in my plain simple HTML page (like I would use JavaScript) — or does PHP need to be installed or loaded somehow?

- alv90
  on
  25 November 2022 at 12:14 says:
  
  Hello,
  Thank you for posting! No, you need PHP so that the script can be executed.

2 thoughts on “How to force the browser not to cache images”

Leave a Reply Cancel reply