Reduce the number of request from the page by using base64 in CSS

Embedding images in CSS as base64 strings

  • Share

One of the major things that affects your page performance is the number of requests made from your page. Any external resource included on the page page makes your page loads slower.

Most commonly these are images. Every image on your page makes additional GET request to the server and affects page load time. One of the ways to resolve this problem is to use sprites. This is great if you are starting your project from the scratch and you have the skills or a designer which will create you a proper CSS to use these sprites.

At least for me (maybe because I am more developer than designer) these things were a headache. Especially, as mentioned before if there as existing project which performance need to be improved and usually those project have large number of images included on the page.

A nice thing that I first noticed at the initial version of Google image search is using base64 serialized images for the images on the page.

<img src="/media/31692/ok-48.png" />

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABLFBMVEUAAAB/f39VqlU/vz9VqlVItkhMskxFuUVItkhEqlVIqVRNsU1OsE5NsU1IrlBNsU1LrFJJrlBMrFJKrlBLrVFJr09NsU1OsE5Lr1BJsE5MrlBNrVFMrlBLsE5LrlFNrlBKrlBLsE5Kr09Lr09MrlBLr09Lr09LrlBMrU5LrVBMr09MrlBLrlBLr05Mr09KrVBLr05Lr05Kr05Lr09MrlBMrVBKr05LrVBMr09Mr05KrVBLrVBMr05Mr05KrVBMr05Kr05MrVBKr05Mr09MrVBKr05Mr05Kr05Kr05Mr1BOsFFPsVFQslJUtFNeullkvlxmwF1nwF1uxWFvxWJwxWJxxmKj5nuk5nyl5nyl53yo6X6p6X6w7oK28YW69IfD YvE o3I/I7I/Y7M/5D4qS5BAAAASXRSTlMAAgMEBgcKCw4PFRcaISMkJSYoKSwtLjEzNDxCSU5VVlxed3p7fYGYmZ goaWmra ztrm9vr/D2Nrd3t/g5ujq8/T29/j5 vz93jmVowAAAb9JREFUSMetlldbwjAUhitbBETAomxQtiiKCigiyPKIiAsVJ9r//x kSzqSNBd V0n7vk9PkvY8ZZj/iI0NR6Nh1kYFLyeLpyDlpJBwGOAbpQ6ocrETJOC fUCk7MXg5kwfkOmlTSjedQzYHK7o bUGEFL36PhzIKapMVwNMEhdVZX52IgHqChXnjHmAbYU 9 nEbqLZezT8AB7Mr9J5u6n19JoXRJKZP6be5OMovR dgx4jnsVjbZdEJIk/oHnuelQnMUFoUjNQ04QTql5qPK8nZ6HgXUusFj UeBfhopL/rkQVjLjEZGH0FyIKuZ3s/cRiYeIWridcZxsTFC8ICxKuvrkGdGY/PDjZw0vlKRY9PhLNjA8 Pg2B3oDxw8s/EGc6IwPDC8eHFMAnYHhISsICUAZTwgeYoLg6CAMJN S vkO6AwkD3npiwuC1kDzEJA/6rLmxg2a3/3rGt4eUKTjXjSmNI2QUnQ 05Exf7CkbK4rdSO 5lS3b0 TzJ 5GU1Wic o6fh5VRVC/U4GEdN2F7OfqSUGHc8e8rzcDD5ssa2mW/kAQ449nqteivCgmo3R/W9Y/aFIJOSzUMFG QVrkc0H RArYAAAAABJRU5ErkJggg==" />
    

This is a good way to reduce the number of requests, but in many cases page content is dynamic, so your images will not be cached that much and sooner or later the image serialized base64 content will be pulled from the server.

Note

Creating base64 image content is pretty easy and you can find a lot of the free online tools to do so. You can find a list of some of the free online tools for generating base64 image contents ate the bottom of this article

Better way t do this is to use serialized base64 images in a CSS it self as it cached a lot longer in a browser that a dynamic content of your page.

.img-back-url{
background-image: url("/media/31692/ok-48.png")
}

.img-back-base64{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABLFBMVEUAAAB/f39VqlU/vz9VqlVItkhMskxFuUVItkhEqlVIqVRNsU1OsE5NsU1IrlBNsU1LrFJJrlBMrFJKrlBLrVFJr09NsU1OsE5Lr1BJsE5MrlBNrVFMrlBLsE5LrlFNrlBKrlBLsE5Kr09Lr09MrlBLr09Lr09LrlBMrU5LrVBMr09MrlBLrlBLr05Mr09KrVBLr05Lr05Kr05Lr09MrlBMrVBKr05LrVBMr09Mr05KrVBLrVBMr05Mr05KrVBMr05Kr05MrVBKr05Mr09MrVBKr05Mr05Kr05Kr05Mr1BOsFFPsVFQslJUtFNeullkvlxmwF1nwF1uxWFvxWJwxWJxxmKj5nuk5nyl5nyl53yo6X6p6X6w7oK28YW69IfD YvE o3I/I7I/Y7M/5D4qS5BAAAASXRSTlMAAgMEBgcKCw4PFRcaISMkJSYoKSwtLjEzNDxCSU5VVlxed3p7fYGYmZ goaWmra ztrm9vr/D2Nrd3t/g5ujq8/T29/j5 vz93jmVowAAAb9JREFUSMetlldbwjAUhitbBETAomxQtiiKCigiyPKIiAsVJ9r//x kSzqSNBd V0n7vk9PkvY8ZZj/iI0NR6Nh1kYFLyeLpyDlpJBwGOAbpQ6ocrETJOC fUCk7MXg5kwfkOmlTSjedQzYHK7o bUGEFL36PhzIKapMVwNMEhdVZX52IgHqChXnjHmAbYU 9 nEbqLZezT8AB7Mr9J5u6n19JoXRJKZP6be5OMovR dgx4jnsVjbZdEJIk/oHnuelQnMUFoUjNQ04QTql5qPK8nZ6HgXUusFj UeBfhopL/rkQVjLjEZGH0FyIKuZ3s/cRiYeIWridcZxsTFC8ICxKuvrkGdGY/PDjZw0vlKRY9PhLNjA8 Pg2B3oDxw8s/EGc6IwPDC8eHFMAnYHhISsICUAZTwgeYoLg6CAMJN S vkO6AwkD3npiwuC1kDzEJA/6rLmxg2a3/3rGt4eUKTjXjSmNI2QUnQ 05Exf7CkbK4rdSO 5lS3b0 TzJ 5GU1Wic o6fh5VRVC/U4GEdN2F7OfqSUGHc8e8rzcDD5ssa2mW/kAQ449nqteivCgmo3R/W9Y/aFIJOSzUMFG QVrkc0H RArYAAAAABJRU5ErkJggg==")
}
    

This will indeed improve your page loading time as the CSS which is in most cases common for majority if not for all the pages of your website. However, you may notice that generating a base64 string from an image is not quite enough. Based on the previous examples you can notice the pattern to generate so called data URL which consists out of few parts as following:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Note

Using base64 instead of actual images reduces the number of requests made for page to load therefore reduces the time of loading

Thereare a lot of website offering to convert your image files to base64 string. In case you are working with .NET, the following few lines of C# code will do that for you.

public static string Base64(this Bitmap SourceBitmap, System.Drawing.Imaging.ImageFormat Format )
        {

            using (MemoryStream _MemStr = new MemoryStream())
            {
                SourceBitmap.Save(_MemStr, Format);
                byte[] imageBytes = _MemStr.ToArray();
                string base64String = Convert.ToBase64String(imageBytes);
                return base64String;
            }
        }
    

The drawbacks

As much as the base64 reduces the speed of page load it comes with some drawbacks on mobile devices especially:

  • base64 image needs to be translated when loading which consumes additional CPU power which affects the battery on mobile devices
  • if the CSS is not cached by the browser it will be loaded and pulled from the server along with page content in every page load
  • base64 content is a bit larger that original file, around 1.5 time of the original image file size

References

  • Share

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus