Giphy链接嵌入与直接访问的差异原理探究

问题背景 #

获取Giphy平台上的图片链接后，可通过以下方式嵌入图片：

<img src="https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif">

或部分论坛支持的标记：

[img]https://media.giphy.com/media/MDJ9IbxxvDUQM/giphy.gif[/img]

但如果直接在浏览器地址栏打开这个链接，却会显示一个包含图片和相关功能的HTML页面，而非直接展示GIF图。

实现原理 #

这个机制的核心是通过HTTP请求头的差异来判断请求场景，具体逻辑如下：

• 当链接被<img>标签（或类似图片嵌入标记）调用时
  浏览器发起请求时，会在Accept请求头中优先声明对图片格式的支持，比如：

  Accept: image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
  

  Giphy的服务器检测到这个请求头后，就知道这是图片容器的加载请求，会直接返回对应的GIF图片资源，同时将响应的Content-Type设置为image/gif。

• 当直接在浏览器地址栏打开链接时
  浏览器发起的请求，Accept头会优先包含text/html（代表期望获取HTML页面），比如：

  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
  

  服务器识别到这个头后，就会返回带有图片展示、分享、下载等功能的HTML页面，响应的Content-Type设置为text/html。

少数场景下，服务器也会结合Referer头辅助判断（比如判断请求是否来自其他网站），但最核心的区分逻辑还是Accept请求头的内容差异。

内容的提问来源于stack exchange，提问作者fx123