Experiment: Why you should use “Cookie-Free” domain for static files and images

With this example I want to show how the usage of cookies can undermine effective image caching on websites.

Even though the image filename remains the same, technically, there is a possibility to change the images depending on the cookies the browser has stored.

With Apache, you can point a specific URL to be handled by a PHP script, by adding the following lines in .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^test.png$ /image-test.php [L]
</IfModule>

The PHP script image-test.php then parses the stored cookies and uses the value to modify the image content. In this case, we are getting the image from placehold.it with the text on it, which we can set by appending a URL parameter.

<?php
header("Content-type: image/png");
$currentValue = $_COOKIE['my-cookie'];
if (!$currentValue) $currentValue = 1;
setcookie('my-cookie', $currentValue + 1);
echo file_get_contents('https://placehold.it/300x300.png?text='.$currentValue);

Now open the URL https://www.yourwebsite.com/test.png in your browser. At each refresh you’ll get another image with another value. The filename remains the same and as you can see, the cache headers are set correctly.

If you keep refreshing this page, the image will change depending on the value of the cookie “my-cookie”

Conclusion:
The browser doesn’t know whether an image is static or is returned by a dynamic script like the one above. So each time, the cookies on your domain change, the browser will need to fetch the images again and again. Unless you’re images are dynamic and depending on cookies values, you should avoid loading them from the same domain, as the rest of your page.

Leave a Comment

Your email address will not be published. Required fields are marked *