A New Discovery?: Omitting File Extension in SRC attribute of IMG tag
-
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.
  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!
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
-
I put 3 images pencil.png, pencil.jpg and pencil.gif in a folder and put 3 IMG tags in HTML file.
  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.
-
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
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.
-
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?
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.
-
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.
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
-
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
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.
-
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?
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.
-
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?
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[^]
-
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[^]
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!
-
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?
Another new thing I found not related to this thread but related to image in HTML document. We can also use
IMAGEtag instead ofIMGtag:
is working in all modern browsers (IE 9, FF > 4, GC 14, Opera 11, Safari 5)
