I have made a web-page where I omit the file extension when I link to an image ( <img src="pic" /> instead of <img src="pic.png" /> for example).
This still causes my webserver to return the correct image since I have the 'MultiViews' option enabled, so the server looks for pic.* and chooses the most appropriate one to send back to the client - but in my case there is only ever one image so clients always get the same file no matter what.

I am doing this
a) to simplify maintenance - if I want to switch a GIF to a PNG or something like that I don't need to update all my pages and...
b) because using a little CGI I want to make the site themable. All the images' names have a common prefix, so to change a theme I just change the prefix and it refers to totally seperate bunch on images. However, equivaltent images in different themes may use different file formats which is why I'm avoiding the extensions

Ok, on to my problem. I set all of this up and it worked beautifully in Mozilla, Safari, Opera, IE (Mac version) and even iCab. Internet Explorer (windows version), however, reloads all of the images from the server on every page, every time. I use JavaScript rollover images on the page and even those reload every time you run the mouse over them. It appears to refuse to cache any of the images (whereas all the other browsers *do* cache them as usual). This obviously slows page loading for visitors and wastes my server's bandwidth.

I looked at my servers HTTP response headers (using wget) for the content-negotiated image files and they do have a few extra lines so I suspect that's what's causing it.
The old style response (when I request the file with the extension) is as follows (for http://yvette.twiddles.com/style/rose_home.png ):

1 HTTP/1.1 200 OK
2 Date: Sun, 11 Apr 2004 11:57:24 GMT
3 Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
4 Last-Modified: Thu, 08 Apr 2004 18:12:27 GMT
5 ETag: "6f1a-b89-4075960b"
6 Accept-Ranges: bytes
7 Content-Length: 2953
8 Keep-Alive: timeout=15, max=50000
9 Connection: Keep-Alive
10 Content-Type: image/png

Without the extension ( http://yvette.twiddles.com/style/rose_home ) I get:

1 HTTP/1.1 200 OK
2 Date: Sun, 11 Apr 2004 11:58:47 GMT
3 Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
4 Content-Location: rose_home.png
5 Vary: negotiate
6 TCN: choice
7 Last-Modified: Thu, 08 Apr 2004 18:12:27 GMT
8 ETag: "6f1a-b89-4075960b;407845ce"
9 Accept-Ranges: bytes
10 Content-Length: 2953
11 Keep-Alive: timeout=15, max=50000
12 Connection: Keep-Alive
13 Content-Type: image/png

Lines 4,5 & 6 are new and the ETag is slightly different. This must be what makes IE not cache the file.... but why???

I tried adding an 'Expires' date to the header but it made no difference.
Presumably this would affect any transparently content-negotiated content so I assumed others would have had the same problem but I could not find any mention of it on google, msdn or within apache's documentation.

Does anyone have an idea how I can fix this?

The site I'm working on is http://yvette.twiddles.com/ (it's for my girlfriend so excuse the cheesyness :P) Currently most pages still refer to images by their full names and hence behave well in IE - the only page I changed so far is the links page http://yvette.twiddles.com/links/ - visually it should have the same style as the rest but the images will always reload in IE.

Any help would be much appreciated!

Cheers!

-James

It may not be the extension that is causing the problem. I know that when you put the roll-over info in the page itself, IE (Windows) re-downloads the image from the server. However, if you put the rollover info into a JavaScript file, it pre-loads all of the images and won't reload them when you mouseover. Here’s an example:

Contents of the HTML page below:

<!-- This goes in the header -->
<SCRIPT LANGUAGE="JavaScript1.2" SRC="/js/rollover-menu.js"></SCRIPT>

<!-- This goes in the body-->
<A HREF="/news/"       onMouseOver="document.nav_top_news.src = nav_top_news1.src;" onMouseOut="document.nav_top_news.src = nav_top_news0.src;"><IMG NAME="nav_top_news" SRC="/img/nav_top_news-0.gif" WIDTH=121 HEIGHT=23 BORDER=0 ALT="News and Events"></A>
<A HREF="/customers/"  onMouseOver="document.nav_top_cust.src = nav_top_cust1.src;" onMouseOut="document.nav_top_cust.src = nav_top_cust0.src;"><IMG NAME="nav_top_cust" SRC="/img/nav_top_cust-0.gif" WIDTH=97  HEIGHT=23 BORDER=0 ALT="Customers"></A>

Contents of "/js/rollover-menu.js" below:

var nav_top_news0 = new Image();
nav_top_news0.src = "/img/nav_top_news-0.gif";
var nav_top_news1 = new Image();
nav_top_news1.src = "/img/nav_top_news-1.gif"

var nav_top_cust0 = new Image();
nav_top_cust0.src = "/img/nav_top_cust-0.gif";
var nav_top_cust1 = new Image();
nav_top_cust1.src = "/img/nav_top_cust-1.gif"

By the way, nice CSS positioning. Your hard core!
.

Originally Posted by ppedersen

It may not be the extension that is causing the problem. I know that when you put the roll-over info in the page itself, IE (Windows) re-downloads the image from the server. However, if you put the rollover info into a JavaScript file, it pre-loads all of the images and won't reload them when you mouseover. Here’s an example:

That's interesting - I didn't know that. But in my case the rollover code is in a seperate javascript file (and any pages other than the 'links' one where I'm trying testing the extension-less files work fine in IE and have the exact same rollover code) so I guess that's not the cause this time. I posted my question to another forum and someone else replied that they were having the same problem ( http://www.webmasterworld.com/forum47/1690.htm ) with content-negotiated material.

I recon I need to find a way alter the HTTP response header. Unfortunately apache's Header directive doesn't seem to do it. Any ideas?

Originally Posted by ppedersen

By the way, nice CSS positioning. Your hard core!
.

Cheers! DIVs rule!

-James

...well, if you were using PHP or ASP you could create a "default extension value in a config file and change it based on the template. For example:

PHP Code:

<?PHP
     $defaultImageExtension = ".gif";
 ?>

<IMG SRC="/img/imageName<?=$defaultImageExtension ?>">

Then the actual extension would then be written prior to being sent to the browser, and you would avoid the content negotiation problem.

But you may be doing things I am not aware of that would disallow that.

I'm using perl, but yeah - it'd be easy to add on an extension to the filenames. The trouble is the images that make up one of my 'themes' are not necessarily all of the same format. That's why I wanted to do all this trickery in the first place.
Perhaps I'll need to impose some limitation like that as a work-around for now.

Anyway, thanks for the tips!

-James

Yay!
I found a solution! I'm posting it here incase it's useful to anyone else.

Basically, I used a bit of mod_rewrite voodoo magic! :P

I created an .htaccess file in the directory with my images and added the following lines:
-----
Options -MultiViews

RewriteEngine on

RewriteCond /path/to/files/%{REQUEST_URI}.png -f
RewriteRule ^([^.]+)$ $1.png [S=2]

RewriteCond /path/to/files/%{REQUEST_URI}.jpg -f
RewriteRule ^([^.]+)$ $1.jpg [S=1]

RewriteCond /path/to/files/%{REQUEST_URI}.gif -f
RewriteRule ^([^.]+)$ $1.gif
-----

First I disable MultiViews since I'm gonna emulate it with mod_rewrite and don't want it to interfere.
Then I enable mod_rewrite and make three rules (one for each kind of image) - each rule has a condition that appends an extension (png, jpg or gif) to the requested file and checks if such a file exists. If so the rule is executed which appends the extension to the requested URL so that apache returns the desired file.

It works like a charm! ^_^

Now requesting a file from that folder without the extension returns the correct file but with normal headers that don't make IE go bezerk:

For example fetching http://yvette.twiddles.com/style/rose_home now returns:

HTTP/1.1 200 OK
Date: Tue, 13 Apr 2004 20:13:30 GMT
Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
Last-Modified: Thu, 08 Apr 2004 18:12:27 GMT
ETag: "6f1a-b89-4075960b"
Accept-Ranges: bytes
Content-Length: 2953
Connection: close
Content-Type: image/png

Hope this is helpful to anyone with the same problem!
Enjoy!

-James

Nice Work!