You are probably reading this information on data URIs in HTML because you have some concerns about improving the performance of your website in any way that you can. Why not, it is one of the factors the likes of Google use to determine page rank.
The good news is that using data URIs is one way to improve the speed of your website if used properly. This guide will show you how and when to use this HTML feature.
Why Data URIs?
Depending on the design of your website these resources may start to take their toll and slow down a website’s load time significantly. One major reason why this happens is that of the several requests made to the server to pick up these resources.
Reducing the number of requests, therefore, shaves off a couple of milliseconds if not seconds from the load time. Using data from URIs can play a big part in this process.
Where to Use Data URIs?
Before you are able to use these URIs you need to know what the official format looks like. The format of data URIs consists of the scheme, the optional media type, the optional base64 extension or character-set, and the data as seen below:
data:[<mime type>][;base64][;charset=<charset>],<encoded data>
To illustrate the above here is an example of the code. It is an image of this arrow:
Where not to use Data URIs
These URIs are ideal for use when the files are not too large such as is the case with images. There is a trade-off in that when your image is small enough to warrant removing it from the queue of HTTP requests.
For maintainability, it is not ideal for one to convert all images in a website to base64 format. It just complicates matters when you want to edit your HTML code or make a change to the image. The process does not stay rosy anymore.
How to Base64 Encode Images
You can either use online tools such as this one or you can also encode theme dynamically using PHP like so:
<?php echo base64_encode(file_get_contents("images/arrow.png")); ?>