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

Question

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

如果是src=pathto.png,服务器只是编码图像并将其发送到浏览器？

Answer 1

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

第二个示例也引用了资源,但该资源的数据直接嵌入到URI中(请参阅数据URI方案).因此不需要额外的请求.

两种方法都有其优点和缺点:

                        external    embedded
separate request (-)       ?           ?
cachable (+)               ?           ?
referencable (+)           ?           ?
compression (+)            ?           ?

• 外部资源数据
  使用外部资源的优点是可以在不同文档中缓存和使用此类资源,而无需请求每个资源的外观.
  缺点是它需要第一个额外的请求.

• 嵌入式资源数据
  将资源数据直接嵌入到文档中的优点是保存额外的请求.
  但缺点是这些资源不能在一个文档或不同文档中的多个外观上被缓存或引用.它也不能使用deflate或gzip压缩.实际上,Base64编码的大小将膨胀4/3.

另请参阅第一条规则,为加速您的网站制作更少的HTTP请求最佳实践.