微信公众号中的图片是如何做到不让下载的呢？

Question

场景：

1. 使用电脑浏览器（如：chrome）打开一篇公众号文章，比如这篇：

   http://mp.weixin.qq.com/s?__b...

2. 随便右键下载一张图片到本地，发现只有一个7K的文件（并非图片文件）

3. 在浏览器调试工具中找到图片资源文件，在新窗口中打开并下载，看到还是一张7K的文件（并非图片文件）

   http://mmbiz.qpic.cn/mmbiz/v6...

请问这个技术是如何实现不让用户在浏览器中下载图片的？

Answer 1

以题主所发链接中标题图片为例,其链接为

http://mmbiz.qpic.cn/mmbiz/v6uP0lGcBZ5xKaBdWPcutsOUQmFxtuBy8rIYMUcoZnxyibweAMv6IDQNgibVibKcqricuer7vlOvh9xHOESYmvAzCw/640?wx_fmt=jpeg&tp=webp&wxfrom=5

右键保存到本地，发现文件名为“640”，无拓展名。

使用HEX查看器打开，结果如下

之前了解过一点图像文件格式相关知识，很多格式会在文件开始部分有标识符，相当一部分用格式名字的ASCII，所以"WEBP"四个ASCII字符引起了我的关注，因为我了解过，WebP是一种2010年发布的图像编码格式，由谷歌卖力推广。

而其之后的VP8则是另一种图像编码格式，WebP在VP8基础上发展而来

于是尝试将文件拓展名改为"webp"，使用chrome打开，发现就是该图片了。

---

顺便说一下，浏览器右键使用chrome的检查功能，发现img标签中有个属性data-backsrc。其值为:

http://mmbiz.qpic.cn/mmbiz/v6uP0lGcBZ5xKaBdWPcutsOUQmFxtuBy8rIYMUcoZnxyibweAMv6IDQNgibVibKcqricuer7vlOvh9xHOESYmvAzCw/0?wx_fmt=jpeg

data-* 用于存储页面或应用程序的私有定制数据。看属性名猜测是备用URL，看URL参数图像格式是JPEG，复制链接打开后果然是该图片的JPEG格式

因为WebP格式目前支持的浏览器相对较少，所以猜测在不兼容的浏览器上会使用jpeg文件。

尝试使用火狐打开该微信公众号链接并保存图片，发现保存的拓展名为jpg

才发现原来只要把webp格式链接末尾“&tp=webp&wxfrom=5”去掉就会变成jpg格式链接，装个逼的说：这个URL设计的不够好