Wednesday, 19 November 2008

IE6 does not cache my filtered pngs

When using png images as background, you need to apply a trick to make Internet Explorer 6 to display the background as transparent:

[source:css]

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://robcos.com/img.png', sizingMethod='crop');

[/source]

I realized though that if Internet Explorer caching setting is set to Every visit to the page, the png file is dowloaded multiple times if you have the same picture more than once in the same page and, in some cases, even ofter if you are doing some DOM manipulation.

The solution is to add the Cache-Control header to the http response serving the png.

In apache, you can for instance do it using the following directive:

[source:xml]

<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control: "private, max-age=21600"
</FilesMatch>

[/source]

after having loaded the module "headers".

See this nice post on how to do htaccess Caching

No comments:

Post a Comment