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?
You generally want to use them to enhance your website’s performance by reducing the number of HTTP requests made to your server. For a web page to display it has to load an array of resources including images, external CSS files, external JavaScript files, fonts, and of course the HTML source.
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?
There are generally three places you can use them. That is directly in the HTML, as a background image in your CSS, and finally in your JavaScript code.
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"));
?>Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.