A New Discovery?: Omitting File Extension in SRC attribute of IMG tag

Nikunj_Bhatt

I accidently found a new thing that the extension (including the dot) of an image file can be omitted in the SRC attribute of IMG tag in HTML file. So

is valid and showing the image if the actual file name is "pencil.jpg". This trick worked on my computer on WAMP server (Apache) (http://localhost/example.htm), but it didn't worked when I opened the file directly in browser (file:///c:/wamp/www/example.htm). I have Win 7 Ultimate 32-bit with WAMP Server 2.0c installed. So, I checked it on Apache on Windows. Is it working on IIS or other server? Is it working on other OS?

Henry Minute

Does it also work if there are two different images 'pencil.png' and 'pencil.jpg' for example? Whether it does or not is extremely immaterial to the readability/maintainability of the resultant code. [Edit] This also strikes me as being more appropriately posted in Tips and Tricks[^] than in The Lounge. :) [/Edit]

Henry Minute Do not read medical books! You could die of a misprint. - Mark Twain Girl: (staring) "Why do you need an icy cucumber?" “I want to report a fraud. The government is lying to us all.” I wouldn't let CG touch my Abacus! When you're wrestling a gorilla, you don't stop when you're tired, you stop when the gorilla is.

Nikunj_Bhatt

I put 3 images pencil.png, pencil.jpg and pencil.gif in a folder and put 3 IMG tags in HTML file.

![](pencil)
![](pencil)
![](pencil)

Now it is showing 3 PNG images. So, I think, only the last image (ordered alphabetically) is get from the server. Also, thanks for suggesting to post it into tricks and tips section. I will do it after writing this reply.

Lost User

Although I'm not sure, it could be a browser feature rather than a server feature (or possibly both). You need to use HTTPWatch or Fiddler kind of tools to find out what file name is actually requested by the browser to the server.

Nikunj_Bhatt

I think, this feature is of browser rather than server. I tested this in all major browsers. I put 3 images pencil.png, pencil.jpg and pencil.gif in a folder and put 3 IMG tags in HTML file.

![](pencil)
![](pencil)
![](pencil)

This code shows 3 PNG images in Firefox and Internet Explorer; but Chrome, Opera and Safari are showing 3 JPEG images! If this feature is of server than the server would always send a same image from the 3 images to all browsers. But on the other hand, if this feature is of browsers then browsers must also be able to fetch the images from local disk, but this is not happening. This is becoming mysterious!

Luc Pattyn

what a load of BS. Why rely on an undocumented, probably accidental, behavior (which may change any time they choose), when all it takes to do things right is typing a few more keystrokes. This isn't useful, it most certainly is not worth a tip&trick, if it needs mentioning, then the Hall of Shame[^] is the right place. :omg:

Luc Pattyn [My Articles] Nil Volentibus Arduum iSad

Luc Pattyn

:thumbsdown:

Luc Pattyn [My Articles] Nil Volentibus Arduum iSad

AspDotNetDev

What we really need is files with single-character extensions: Todo@ Screenshot# Resume^ And when we start running out of special ASCII characters to use, we can start using unicode characters: Manifest字 Level1ƴ CanadaǤ Autoexecʬ

Somebody in an online forum wrote:

INTJs never really joke. They make a point. The joke is just a gift wrapper.

OriginalGriff

I'm with Luc on this one - never use undocumented features (otherwise known as "bugs"): you don't know if they will be fixed in the next minor version, meaning your site falls over and you don't know why. The fact that the behaviour is different in two browsers is enough to put me right off!

Ideological Purity is no substitute for being able to stick your thumb down a pipe to stop the water

Ravi Sant

:thumbsup:

// ♫ 99 little bugs in the code, // 99 bugs in the code // We fix a bug, compile it again // 101 little bugs in the code ♫

Nikunj_Bhatt

You are right that using this feature is dangerous in real websites, if this is a bug. But I think it is an undocumented feature, not a bug (I count "undocumented feature" and "bug" as two different things, because when I program I always aware that what my program can do and what not). Or it is documented but we are just not aware of it because our teachers weren't know about it when we were learning HTML neither we have read full HTML Language Specifications. If that was a bug, it wouldn't be in all browsers. Now, if this is a browsers' feature and they are aware of it than we should always use this. Because the extension in image file names are for us, to know which type of file it is. But browsers never check for the extension, it doesn't matter for the browsers. The only matters to the browsers is whether the image file is one of those types which browsers support or not, and they decide it by looking at pattern and info in bytes of the received file. When developing websites, we put different types of images in different folders. We put the web template's design in one folder, and create folders in which users may upload images later. For the images of the template's design, we are always aware that what type of images are there and what are their names. So, for these images, we can omit the image files' extension when using them in our website. Omitting extension can save lots of bandwidth especially on those sites where lots of images are used and many users are using that site on daily basis. A similar feature is practically used on very high basis in internet for tracking. You might be aware that to track how many users have opened a sent email, the senders put an image whose source URL looks something like this: http://example.com/track?id=1234 In this example, you can see that no extension is specified. There could be "php" or "asp" as an extension too for an image file.

Nikunj_Bhatt

I also checked using stylesheet as following:

div#bgimg { width:100px; height:100px; background-image:url(pencil) }

It is displaying the image as background in a 100x100 pixel sized Div.

OriginalGriff

nikunjbhatt84 wrote:

Now, if this is a browsers' feature and they are aware of it than we should always use this

That's kind of the point - we can't: if the behaviour is different for different browsers, then any gains made by saving four characters per image is going to be thrown away by having to work out which browser it is and using the correct image - either that or you have to have two or omore copies of the same image in all cases, which is a maintenance nightmare. If it is an undocumented feature, then you cannot rely on it at all - it could change behaviour or disappear tomorrow. Or you find another browser which does something else entirely. If saving characters is you main reason for using this, then remove all newlines, remove all comments, and only use single character names. Mind you, that is a maintenance PITA as well...

Ideological Purity is no substitute for being able to stick your thumb down a pipe to stop the water

Nikunj_Bhatt

OriginalGriff wrote:

which browser it is and using the correct image - either that or you have to have two or omore copies of the same image

Do you use 2 different types of images with same names? Look at your work dude.

OriginalGriff wrote:

If it is an undocumented feature, then you cannot rely on it at all

By saying Undocumented Feature, what I mean is undocumented in the browsers documents but documented in HTML Language Specification, and therefore it will not change except HTML6 arrives changes this (I also tested with HTML5).

OriginalGriff wrote:

remove all newlines, remove all comments, and only use single character names

These things are required for readability. In SRC attrib of IMG tag, we always put file name of an image, so readability doesn't matter here.

Nikunj_Bhatt

This code also works in HTML-5 document. I checked this on both Windows and Linux servers but it is not working on live servers. :( Totally confused. It is working on my computer having server of Apache and Windows 7 OS but it is not working on live Windows or Linux servers! It is also not working when the file is opened from local harddisk.

Pascal Ganaye

I believe it is not a bug but a content-negotiation feature of the apache server. I haven't used that but perhaps the server is able to match serve the file that the client requires depending on its abilities. It is turned on by default. http://httpd.apache.org/docs/2.2/content-negotiation.html[^]

Nikunj_Bhatt

Thanks for the link man :) The resource at there seems to be the reason behind omitting the file extension. But this feature depends on what the requesting browser can ACCEPT. I looked at the HTTP_ACCEPT headers, they are as following: FF: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 IE: text/html, application/xhtml+xml, */* GC: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Op: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 Sf: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Here we can see that FF, IE and GC have not provided anything regarding image accept type, while Op and Sf have given priority to PNG images. Now, FF, IE and GC have not provided any clue about image type than how the server decided to send PNG image to FF & IE and sent a JPEG image to GC? On the other hand, Op and Sf have image/png as first occurrence but they are displaying JPEG image! On the content negotiation page, there is some important text about selecting media type based on the Quality factor, which is supplied in the HTTP_ACCEPT header with the option "q". IE is not supplying the quality factor but other browsers are, and they are almost similar! Another thing that may apply to content negotiation is the Typemap file on server. This file lists media types and their Qualify (not Quality) Source factors (known as "qs") of most of media types. But it seems that that factor is not working here because if the qs factor is applied, the server would always send an image having the highest qs value; but this is not happening too!

Nikunj_Bhatt

Another new thing I found not related to this thread but related to image in HTML document. We can also use IMAGE tag instead of IMG tag:

is working in all modern browsers (IE 9, FF > 4, GC 14, Opera 11, Safari 5)