4

I have PNGs in which for instance they are named "5021" rather than "5021.png" and for some images it is fine and displays like a normal image but others download automatically; I was told by someone who then stopped replying that I can add a rule into .htaccess so that the files are all viewed as images and none download.

Images are displayed with the format https://i.domain.com/<number> ex https://i.domain.com/5021

How do I do this or is there another/better way to do this?

3

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.

  • Thank you so much, works perfectly - added .png to all of the files on the webserver so now it works when called without a file exension. – Zed Sep 27 '15 at 23:24
  • "DefaultType" - You will need to use ForceType in Apache 2.3+ (DefaultType has been disabled in later versions). If the actual filenames don't have a file extension - as suggested in the question - then this (or manually setting the Content-Type header) would seem to be the only solution. (?) However, if you only need to remove the file extension from the URL and are free to rename the files whatever you like (preferred) - as appears to be the case in this instance - then you have choice. – MrWhite Sep 28 '15 at 8:14
  • @w3d, thanks for the heads up! I've amended the answer to address that issue. Thanks! – Simon Hayter Sep 28 '15 at 17:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.