在img標簽的src中引用圖像文件和直接在圖像標簽中引用嵌入圖像有什么區別?

[英]What is the difference between referring to image file in src of img tag and referring to embedded image directly in image tag?


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

是否有使用之間的任何差異從服務器的角度?

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

在src = pathto.png的情況下,服務器是否只對圖像進行編碼並將其發送到瀏覽器?

3 个解决方案

#1


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來引用外部資源。因此,這將導致向該資源發出額外請求以接收數據。

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.

第二個示例也引用了資源,但該資源的數據直接嵌入到URI中(請參閱數據URI方案)。因此不需要額外的請求。

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.

    外部資源數據使用外部資源的優點是可以在不同文檔中緩存和使用此類資源,而無需請求每個資源的外觀。缺點是它需要第一個額外的請求。

  • 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.

    嵌入式資源數據將資源數據直接嵌入到文檔中的優點是保存額外的請求。但缺點是這些資源不能在一個文檔或不同文檔中的多個外觀上被緩存或引用。它也不能使用deflate或gzip壓縮。事實上,Base64編碼的大小將膨脹4/3倍。

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

另請參閱第一條規則“使用更少的HTTP請求以獲取加速網站的最佳實踐”。

#2


Linking to a seperate image requires a second request to get the image, but allows it to be cached and reused on multiple pages without having to send the data again.

鏈接到單獨的圖像需要第二個請求來獲取圖像,但允許它在多個頁面上進行高速緩存和重用,而無需再次發送數據。

Embeding it inline requires that the data be sent with every page request that includes the image (and multiple times if the image is used more than once in a page)

將其嵌入內聯需要將數據與包含圖像的每個頁面請求一起發送(如果圖像在頁面中多次使用,則需要多次發送)

#3


In the case of <img src="/path/to/image.png" />, the server won't encode the image. The browser will ask for it on a separate request, and the server will just dump a short header, then file's data on the wire. In a well-written HTTP server, this is a blazingly fast operation, since there's only a minimal amount of processing involved. The browser can also cache the image so it doesn't have to retrieve it later (as others have said).

的情況下,服務器不會對圖像進行編碼。瀏覽器將在單獨的請求中請求它,服務器將只轉儲一個短標題,然后在線上轉儲文件的數據。在編寫良好的HTTP服務器中,這是一個非常快速的操作,因為只涉及最少量的處理。瀏覽器還可以緩存圖像,以便以后不必檢索它(正如其他人所說)。

Embedding it inline will both increase the weight of the page, and make it impossible to cache the image separately.

嵌入內聯將增加頁面的重量,並且無法單獨緩存圖像。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/06/05/72f0168f23e07e84a15f1ca3ae226b12.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com