在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

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

将其嵌入内联需要将数据与包含图像的每个页面请求一起发送（如果图像在页面中多次使用，则需要多次发送）

Answer 3

对于<img src="/path/to/image.png" />，服务器不会编码图像。浏览器将在单独的请求上请求它，服务器将只转储一个短标题，然后在线上转储文件的数据。在编写良好的HTTP服务器中，这是一个非常快速的操作，因为只涉及最少量的处理。浏览器也可以缓存图像，以便以后不必检索它（正如其他人所说的那样）。

嵌入内联会增加页面的重量，并且无法单独缓存图像。