What is the best way to load an image faster, either the .png/.jpg format or the data URI scheme?

Question

Does loading an image in the data URI format, make it load faster in the page? For example:background: url("data:image/jpg;base64,/someImageData")

Or does it load faster in the common .jpg or .png format? For example: background: url("wallpaper.jpg")

Answer 1

The time needed to render the image will be identical, but the time it takes to load may be different. Base64 encoding an image makes it about 37% larger than if you were to link to it via a url():

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size

However, while the image is larger and requires more bytes to be downloaded, you save the time of a talkback with your server to fetch the image with the url() method. There's no way to say for sure which loads faster - it will depend on the connection of your users. See this article on when it's a good idea to use base64 encoded images.

Answer 2

Data-uri s are about 37% larger in size, but there is something more important:

On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

So be carefull with this. And, as stated on caniuse.com, IE < 9 has significant total amount of data limit.