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

Question

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?

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

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.

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

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

Answer 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)

Answer 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).

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