Search code examples
imagehttppngwebp

How to detect webp file behind .png link?


I have some tricky link:
https://www.pwc.com.tr/tr/sektorler/Perakende-T%C3%BCketici/kuresel-tuketicileri-tanima-arastirmasi/kuresel-tuketici-gorusleri-arastirmasi-info-5en.png

The last 4 characters in the link implies that we will get image in png format, and even GET HTTP request to that link brings the content-type ‘image/png’. But if you’ll try to save it in browser, you will end up with webp file format Save image...

So, question is - how one can detect that it really webp image 'hidden' behind the link that looks like and act (remember headers!) like png file via program that can use only http protocol?

Update: I want to point out that I did http get request from different environments and get 'image/png' type in headers content-type. For example using node.js and axios https://youtu.be/KiRrAVl67uQ


Solution

  • Update: The server will detect client type by request's User-Agent header, and return different Content-Type correspondingly. It makes sense, because not all client support webp.

    Thus, to get image/webp type resource, you can send custom User-Agent header and simulate as Chrome etc. For example, in Node.js and axios:

    const axios = require('axios');
    
    axios.request({
      url: 'https://www.pwc.com.tr/tr/sektorler/Perakende-T%C3%BCketici/kuresel-tuketicileri-tanima-arastirmasi/kuresel-tuketici-gorusleri-arastirmasi-info-5en.png',
      method: 'get',
      headers: {
        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36'
      }
    }).then(function(res) {
      console.log(res.headers); // content-type header is image/webp now.
    }).catch(function(err) {
      console.log(err);
    });
    

    Browser try to save this picture as .webp format because: in HTTP response headers, the Content-Type header's value is image/webp:

    enter image description here

    how one can detect that it really webp image 'hidden' behind the link that looks like and act like png file...?

    You can check HTTP response header and find what Content-Type it is.