title: How to "correctly" detect mime type of a WEBP image using Javascript
body: <p>I am writing a Google Chrome plugin which among other things will detect the format of images on a given web page. </p>
  
  <p>Consider a html image such as:</p>
  
  <p>This:</p>
  
  <pre><code>&lt;img style="-webkit-user-select: none;margin: auto;" src="https://media.volkswagen.com/vw-122-my2020/iris?COSY-EU-100-1713VV%25lXm0kYNazzSU9mu0fO7ANiyyJ1vTvsd2SMppEKhjTtKSK8CgQ2MM8H2Lvyr0Q%25UOVggAa5hP4KYwqeQeOOnxvyyJ8H3WDZ4HvCJii8YMNCoo0gZrnZlO4O6bLKKFNMbTggAcEvvFHOu5ZxxHlZkPF%25uAnW07ZZU8pVfXLibIIrsJYUF7xhCCtBvyrm3xLLyH0kYbAwh88WTU9j%25I4bBMdfAA2Zjeqz5qMZKMI7UbSK8C7g1AbNCxDAONX4jTLrr9UOXs3OTMttOWqF55PH4w99deVCZZsoHRiiIVBNffQ00q22Ucp%25nn4h1EuugO4q00zJSYFF3ZhUxxcGfDBBhqCKTTkRkJWWHrqDGGK60cJJMgEhllvPvwEELE5jVVbVlPXXYNgottOQpv55PSSI99dKF7ZZsnQ9iiIVsXffQbVP22UdIVnn4yLOuug9fq00z49YFF3yEkxxc8RqBBhJLdTTklRzWWHrrgGGKOqjJJMFIyllvRFnEEL6AaVVbamRXXYezGttOWDJ55Pjaw99d2gQZZsn5UiiI1ZZffQoKr22UrX0nn4ty9uugmUr00zbluFF3lTkxxcfmhBBhLPRTTkiB%25WWHWsDGGK0BQJJMFWhllvKdYEELxAEVVbXBYXXYrSAttOUtv55P5OI99dJ5UZZsonUiiIuHwffQXmP22UjWnnn4Bb2uugm3c00zj7AFF3FhsxxcGAjBBhpcdTTkdT1WWHur4GGK46jJJMRI%25llvqRkEELAY6VVbco1XXY69mttOUue55PHVS&amp;amp;width=420"&gt;
  </code></pre>
  
  <p>Or this:</p>
  
  <pre><code>&lt;img width="320" src="https://www.gstatic.com/webp/gallery/1.sm.webp" alt="WebP Image" border="1"&gt;
  </code></pre>
  
  <p>Both links point to an image of .webp format however, the issue is that the first link (despite linking to a .webp image) when evaluated by my program returns a mime type of image/png (it should be image/webp). </p>
  
  <p>In order to determine the mime type of images I am using the <a href="https://github.com/sindresorhus/file-type" rel="nofollow noreferrer">file-type library</a>. This library detects the mime type of an image from its source by comparing its file signature with a list of <a href="https://en.wikipedia.org/wiki/List_of_file_signatures" rel="nofollow noreferrer">magic numbers</a>. This technique is outlined here <a href="https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload">How to check file MIME type with javascript before upload?</a></p>
  
  <p>The code is as follows:</p>
  
  <pre><code>const fileType = require("file-type");
  
  const imageLinks = [
  "https://media.volkswagen.com/vw-122-my2020/iris?COSY-EU-100-1713VV%25lXm0kYNazzSU9mu0fO7ANiyyJ1vTvsd2SMppEKhjTtKSK8CgQ2MM8H2Lvyr0Q%25UOVggAa5hP4KYwqeQeOOnxvyyJ8H3WDZ4HvCJii8YMNCoo0gZrnZlO4O6bLKKFNMbTggAcEvvFHOu5ZxxHlZkPF%25uAnW07ZZU8pVfXLibIIrsJYUF7xhCCtBvyrm3xLLyH0kYbAwh88WTU9j%25I4bBMdfAA2Zjeqz5qMZKMI7UbSK8C7g1AbNCxDAONX4jTLrr9UOXs3OTMttOWqF55PH4w99deVCZZsoHRiiIVBNffQ00q22Ucp%25nn4h1EuugO4q00zJSYFF3ZhUxxcGfDBBhqCKTTkRkJWWHrqDGGK60cJJMgEhllvPvwEELE5jVVbVlPXXYNgottOQpv55PSSI99dKF7ZZsnQ9iiIVsXffQbVP22UdIVnn4yLOuug9fq00z49YFF3yEkxxc8RqBBhJLdTTklRzWWHrrgGGKOqjJJMFIyllvRFnEEL6AaVVbamRXXYezGttOWDJ55Pjaw99d2gQZZsn5UiiI1ZZffQoKr22UrX0nn4ty9uugmUr00zbluFF3lTkxxcfmhBBhLPRTTkiB%25WWHWsDGGK0BQJJMFWhllvKdYEELxAEVVbXBYXXYrSAttOUtv55P5OI99dJ5UZZsonUiiIuHwffQXmP22UjWnnn4Bb2uugm3c00zj7AFF3FhsxxcGAjBBhpcdTTkdT1WWHur4GGK46jJJMRI%25llvqRkEELAY6VVbco1XXY69mttOUue55PHVS&amp;amp;width=420",
  "https://www.gstatic.com/webp/gallery/1.sm.webp"
  ]
  
  const xhr = new XMLHttpRequest();
                  xhr.open('GET', "https://cors-anywhere.herokuapp.com/" + imageLinks[0] // or imageLinks[1]);
                  xhr.responseType = 'arraybuffer';
  
                  xhr.onload = () =&gt; {
                      var arrayBuffer = xhr.response;
                      if (arrayBuffer) {
                          var byteArray = new Uint8Array(arrayBuffer);
                          imgTypeInfo = fileType(byteArray);
                      }
                  };
                  xhr.send();
  </code></pre>
  
  <pre><code>console.log(imgTypeInfo) // This should return image/webp for both imageLink[0] and imageLink[1]
  </code></pre>
  
  <p>However unfortunately </p>
  
  <pre><code>console.log(imgTypeInfo) // This actually returns image/png for imageLinks[0] and image/webp for imageLink[1]
  </code></pre>
  
  <p>Does anybody have any idea why this might be?</p>
  
  <p>For additional context, I have added a link to the github repository <a href="https://github.com/Rajeev-Gill/phd-seo-tools/tree/phd-seo-tools-v1.3" rel="nofollow noreferrer">here</a></p>