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.