img标签浏览器工作原理、负载分布及Google Photos API流量疑问

一、img标签的浏览器工作机制 #

当浏览器解析HTML页面遇到<img>标签时，会独立发起一个HTTP/HTTPS请求，目标就是该标签src属性指定的图片URL。拿到图片资源后，浏览器会将其渲染到页面的对应位置，同时会依据浏览器的缓存规则决定是否缓存该图片——如果后续页面再出现同URL的<img>标签，会直接调用缓存，不用重复请求。

二、我方服务器与图片服务器的负载分配 #

假设我方服务器通过API返回图片URL：

• 我方服务器负载：仅负责提供包含<img>标签的页面内容，或者返回图片URL的API响应。这些内容都是文本格式，体积极小，完全不需要处理图片的存储、下载、传输等工作，因此在图片相关的负载上几乎没有压力，只承担自身常规的服务运行负载。
• 图片所在服务器负载：需要接收浏览器发起的所有图片请求，负责存储图片文件、处理请求逻辑、传输图片资源，承担所有和图片分发相关的带宽、存储、计算负载。

三、Google Photos API场景下的流量问题 #

如果使用Google Photos API返回的谷歌托管图片URL作为<img>的src，图片大小为4MB：

• 我方服务器不会产生这4MB的下载流量。因为图片请求是浏览器直接向谷歌服务器发起的，流量仅在浏览器和谷歌服务器之间产生。
• 我方服务器产生的流量只有API接口返回图片URL的那一小段文本，体积可以忽略不计。

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