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