在img标签的src中引用图像文件与直接在图像标签中引用嵌入图像有什么区别？

Question

从服务器的角度来看，使用<img src=pathto.png />和<img src=data:image/png;base64,encodedpngdata... />是否有区别？

在src=pathto.png的情况下，服务器是否会对图像进行编码并将其发送给浏览器？

Answer 1

第一个示例通过指定其URI来引用外部资源。所以这会导致对该资源提出额外的请求来接收数据。

第二个示例也引用资源，但该资源的数据直接嵌入在URI中（请参阅data URI scheme）。所以不需要额外的请求。

这两种方法各有其优点和缺点：

     external embedded 
separate request (-)  ✓   ✗ 
cachable (+)    ✓   ✗ 
referencable (+)   ✓   ✗ 
compression (+)   ✓   ✗ 

• 外部资源数据
  使用外部资源的优点是，这样的资源可以被缓存并且不使在不同的文件中使用的要求每次出现该资源。
  缺点是它需要第一个额外的请求。

• 嵌入式资源数据
  所述资源数据嵌入直接到文档的一个优点是节省的附加请求。
  但是一个缺点是这些资源不能在一个文档或不同文档中多次出现时被缓存或引用。也不能使用deflate或gzip进行压缩。事实上，Base64编码会使系数膨胀4/3倍。

也是第一个规则的最佳实践Make Fewer HTTP Requests见加快您的网站。

Answer 2

链接到一个单独的图像需要第二个请求来获取图像，但允许它在多个页面上被缓存和重用，而不必再次发送数据。

直列Embeding它要求数据与包括图像（和多次如果图像是在页面使用一次以上）每个页面请求

Answer 3

在<img src="/path/to/image.png" />的情况下被发送时，服务器赢得't 编码的图像。浏览器将在单独请求上询问它，服务器将只转储一个短标题，然后转储文件的数据。在一个写得很好的HTTP服务器中，这是一个非常快速的操作，因为只涉及少量的处理。浏览器还可以缓存图像，以便以后不必检索图像（如其他人所说的）。

嵌入它内联将增加页面的权重，并且不可能单独缓存图像。