2

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

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

4

3 回答 3

7

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

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

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

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

  • 外部资源数据
    使用外部资源的优点是可以在不同的文档中缓存和使用这些资源，而无需对这些资源的每次出现都进行请求。
    一个缺点是它需要第一个附加请求。

  • 嵌入
    的资源数据 将资源数据直接嵌入到文档中的一个好处是可以节省额外的请求。
    但缺点是这些资源不能在一个文档或不同文档的多个外观上缓存或引用。它也不能使用 deflate 或 gzip 压缩。事实上，Base64 编码会使大小膨胀 4/3 倍。

另请参见加快网站速度的最佳实践的第一条规则减少 HTTP 请求。

于 2009-06-05T14:10:39.283 回答
4

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

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

于 2009-06-05T14:16:41.267 回答
3

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

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

于 2009-06-05T14:24:02.237 回答