There's actually a few ways, take your pick...
You could use the method which involves doing nothing...
Most browsers nowadays can establish content-types without having an file extension, they will download the first few bytes and discover the type then process it within a blink of the eye. However, its not a perfect method.
Using JavaScript to remove file extensions locally
The below method is handy if you want to remove img, or extension actually on the page so you can embed using images using <img src="your-image-without-extension">
. However, not so handy if you want to use it on another site since only pages with this JavaScript will work.
$(document).ready(function (){
var regex = new RegExp("(.jpg|.png)$", "i");
var image = $("img").each(function (){
var src = $(this).attr('src');
if( src.search(regex) == -1){
var index = src.lastIndexOf('.') < 0 ? src.length:src.lastIndexOf('.');
$(this).attr('src',src.substring(0, index) + ".jpg");
}
});
});
Rewriting the extension using .htaccess
Using the .htaccess
you can rewrite your urls not to include the image file, using something like this should do the job:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.png [NC,L]
This method will allow you to use urls with, or without png. Locally and externally. Benefits of this is that you don't need to spend time renaming image files.
Setting Content-Type MIME via htaccess
Using either the httpd.conf or an htaccess file you can set the page content type like so:
.htaccess (copy into image folder)
ForceType image/png
or if in the httpd.conf file you could use,
<Directory /path-to-images>
ForceType image/png
</Directory>
Content negotiation with mod_negotiation
What Is Content Negotiation?
Content negotiation is a little-used feature of Apache and IIS that
transparently delivers the best variant of the same resource to
browsers. Browsers tell servers their preferences, and servers tune
their responses to select the best resource. Different languages, file
types, content encodings, and character sets can be automatically
delivered to different browsers based on browser-supplied preferences
sent in header requests. You can vary the following dimensions with
content negotiation:
Media type
Language
Content encoding
Charset
You could opt to use Content Negotiation with mod_negotiation which will negotiate what it feels is the best format, for example you have jpg, gif and png files then the URL without the file extension the server will negotiate which copy to use without adding it to the file extension.