在img标签的src中引用图像文件和直接在image标签中引用嵌入图像之间有什么区别? [英] What is the difference between referring to image file in src of img tag and referring to embedded image directly in image tag?

问题描述

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

Is there any difference between using <img src=pathto.png /> and <img src=data:image/png;base64,encodedpngdata... /> from the perspective of the server?

对于src=pathto.png，服务器将仅对图像进行编码并将其发送到浏览器吗?

In the case of src=pathto.png will the server just encode the image and send it to the browser?

推荐答案

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

The first example references an external resource by specifying its URI. So this will result in making an additional request to that resource to receive the data.

第二个示例也引用了资源，但是该资源的数据直接嵌入URI中(请参见数据URI方案).因此不需要其他请求.

The second example does also reference a resource but the data of that resource is directly embedded in the URI (see data URI scheme). So no additional request is needed.

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

Both methods have its advantages and disadvantages:

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

• 外部资源数据
  使用外部资源的优势在于，可以在不要求该资源的每次出现的情况下，将这些资源缓存并用在不同的文档中.
  缺点是，它会接受第一个额外的请求.

  • External resource data
    The advantage of using an external resource is that such resources can be cached and used in different documents without making requests for every appearance of that resources.
    A disadvantage is that it takes that first additional request.

    嵌入式资源数据
    将资源数据直接嵌入到文档中的一个优点是可以节省额外的请求.
    但是缺点是，不能在一个文档或不同文档中的多个外观上缓存或引用此类资源.同样，它不能使用deflate或gzip压缩.实际上，Base64编码将使大小膨胀4/3.

    Embedded resource data
    An Advantage of embedding the resource data directly into the document is to save an additional request.
    But a disadvantage is that such resources cannot be cached or referenced on multiple appearances in one document or different documents. Also it cannot be compressed using deflate or gzip. In fact, the Base64 encoding will bloat the size by the factor 4/3.

    另请参阅的第一个规则减少HTTP请求加速网站的最佳做法.

    See also the first rule Make Fewer HTTP Requests of Best Practices for Speeding Up Your Web Site.

    这篇关于在img标签的src中引用图像文件和直接在image标签中引用嵌入图像之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！