Data URI Scheme – Base64 encoding of static file – images, css, js

Posted: February 15, 2011 in Performance, Web Development
Tags: ,

Web Developers are following lot of techniques to speed up web page performance. Images are part of any modern webpage which gives good appearance at the cost of page performance.

Following are the few techniques that many uses now a days …

  1. Using sprites + css to avoid many images/http calls to single image/sing http call (SpriteME tool helps you to create sprites for you)
  2. Using efficent image formats instead of jpg, bmp. gif, png are lighter formats
  3. Storing images in cdn servers
  4. Avoid duplicate images across site pages and few more …

Base64 images using Data URL Scheme is another technique to reduce extra http calls to server.

Advantages

  1. Provides a way to include data in-line in web page itself
  2. It can be used with js, css & image files
  3. It saves extra http calls to server.
    Ex: if a web page needs 2 js fiels, 2 css files and 5 images then its like 9 http calls to server along with 1 call for web page itself i.e. total 10 calls.
    With Data URL format/Base64 you can just have 1 http call that is meant for web page which intern has all js, css and image information.

Take your best decision about using this as some image formats will take more size when representing in Base64 format. I tested with gif of 2KB changed to 3kb of Base64 string and 12kb of png file changed to 3kb of Base64 string. So it is important to use the right image format before applying Base64 logic as it saves extra http call but it will increase the network data size if we don’t use proper image format.

References:

  1. http://www.greywyvern.com/code/php/binary2base64
  2. http://en.wikipedia.org/wiki/Data_URI_scheme
  3. http://stackoverflow.com/questions/4881186/convert-image-to-base64-and-check-size – for C# code
  4. base64_encode, base64_decode functions in PHP
Advertisements
Comments
  1. Very nice post. I just stumbled upon your weblog and wished to say that I have really
    enjoyed surfing around your blog posts. In any case I will be subscribing
    to your feed and I hope you write again very soon!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s