Internet Explorer Flicker Fixes
By default, whenever IE encounters an image during the course of rendering an HTML page it checks the server for an updated version of the image - even when it has a recently downloaded cached copy available. This can result in a noticeable flicker when viewers navigate around a site. The problem is at its worst with background images. Client-side solutions to the problem that use JavaScript have been suggested but do not always work reliably. Here we present two server-side alternatives that always work.
The .htaccess Fix
By far the most elegant solution - on webservers running Apache - is to use .htaccess. The instructions required are shown below
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/gif A2592000
Explanation - The commands above simply tell Apache to inject an Expires: entry into the header in the response being sent back to the web browser. image/* A2592000 sets the expiry date to be 2592000s (30 days) from the time the image in question was accessed. With this information available IE does not make any pointless attempts at checking the server for image updates each time it encounters an image.
The PHP Fix
Should you not have access to the .htaccess file - or are quite simply hosted on a server that does not provide the feature - an alternative is to use a PHP script to access images. To do this simply change the source attribute from src="imagepath.imagename.ext" - where .ext is png, jpg etc - to src="scriptpath.imagename.php" and then write imagename.php as shown below
$exp = time() + 2592000 ;
$exp = gmdate ( "D, d M Y H:i:s", $exp );
header ( "Expires:". $exp. " GMT" );
header ( "Content-type:image/png" );
$img = @imagecreatefrompng ( "imagepath" );
imagepng ( $img );
?>
Explanation - As with the .htaccess solution we inject an Expires: entry into the server response header. The expiry time is set to 30 days from the current server time expressed as GMT. With that done the image file in question is loaded and echoed back to the server. Typically, the image file will not be located in the same directory as the PHP script so the correct path to the file must be specified. Remember to replace the imagecreatefrompng and imagepng keywords with appropriate equivalents should your image type be different.
Two important points to make here
- Firefox, Opera and Safari make a good attempt at interpreting badly formed Expires strings. IE, true to form, falls flat on its face if the string varies from the one generated by the PHP listing here.
- IE's failure to use cached information extends beyond image files - it makes no attempt to use cached stylesheet, .css or script, .js files either. It is well worth considering .htaccess fixes to stop this from happening. Experimental stylesheets and scripts should be served up from another location so your viewers don't end up using cached, expiry-stamped versions that have become obsolete.
For a demonstration of IE flicker effects and how server-side fixes can be used to prevent them see here.
