How to read the image type from an URL?

Question

I encountered something very strange:

As you see the second last picture has jpg format but it's being displayed as png type. (This is the Network panel in Chrome.)

How can I get this png file type with JavaScript? (How can I get it's MIME type)?

Are you manually getting the image in JavaScript or is it an img tag? — ste2425, Sep 13 '16 at 07:27
Possible duplicate of [Accessing the web page's HTTP Headers in JavaScript](http://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript) — Xotic750, Sep 13 '16 at 07:38

Paul-Jan · Accepted Answer · 2016-09-13T07:26:54.590

2

You check the content-type response header. The appropriate value is listed in the Chrome network debugger. Alternatively, you can look it up on one of the many lists on the internet.

Assuming you are using jQuery

$.ajax({
  url: "[image url]",
  success: function(response, status, xhr){ 
    var contentType = xhr.getResponseHeader("content-type") || "";
    if (contentType === "image/jpeg") {
      // do something with jpg
    }
    if (contentType === "image/png") {
      // do something with png
    } 
  }
});

If you are using plain javascript use XMLHttpRequest.getResponseHeader() in stead.

edited Sep 13 '16 at 07:26

answered Sep 13 '16 at 07:16

Paul-Jan

16,746
1
63
95

Ah, you don't have code to retrieve the image yet? I've added that to the answer. – Paul-Jan Sep 13 '16 at 07:25

score 0 · Answer 2 · answered Sep 13 '16 at 07:28

Send a HEAD request and look at the content type.

var url = '/url/to/your/file.jpg',
    xhttp = new XMLHttpRequest();

xhttp.open('HEAD', url);
xhttp.onreadystatechange = function () {
    if (this.readyState == this.DONE) {
        console.log(this.getResponseHeader('Content-Type'));
    }
};
xhttp.send();

How to read the image type from an URL?

2 Answers2