如何检测 .png link 后面的 webp 文件？

Question

我有一些技巧link：
https://www.pwc.com.tr/tr/sektorler/Perakende-T%C3%BCketici/kuresel-tuketicileri-tanima-arastirmasi/kuresel-tuketici-gorusleri-arastirmasi-info-5en.png

link 中的最后 4 个字符意味着我们将获得 png 格式的图像，甚至 link 的 GET HTTP 请求也会带来 content-type 'image/png'。但是如果你尝试将它保存在浏览器中，你最终会得到 webp 文件格式

所以，问题是 - 如何通过程序检测到 link 背后的 webp 图像 'hidden' 看起来和行为（记住 headers！）就像 png 文件那只能使用http协议？

更新：我想指出的是，我确实从不同的环境中获取了 http get 请求，并在 headers content-type 中获取了 'image/png' 类型。例如使用 node.js 和 axios https://youtu.be/KiRrAVl67uQ

Answer 1

更新：服务器会根据请求的User-Agentheader检测客户端类型，对应的return不同Content-Type。这是有道理的，因为不是所有的客户端都支持webp。

因此，要获得image/webp类型的资源，您可以发送自定义User-Agent header并模拟为Chrome等。例如，在Node.js和公理：

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);
});

浏览器尝试将此图片保存为 .webp 格式，因为：在 HTTP 响应 header 中，Content-Type header 的值为 image/webp :

如何检测到 link 背后的 webp 图像 'hidden' 看起来像 png 文件...？

您可以检查 HTTP 响应 header 并找到 Content-Type 它是什么。

如何检测 .png link 后面的 webp 文件？

How to detect webp file behind .png link?

image

http

png

webp