Base64 Images Advantages & Disadvantages

Base64 Images: To understand base64 images, first let’s understand why we need it. Web developers from all around the world is currently trying to minimise unusual data to maximise their website performance. Website performance can be optimised by reducing page size, reducing number of requests, position of scripts and stylesheets & many other factors affect webpage speed. Base64 method is used to minimise the server requests by integrating image data in HTML code.

Base64 method uses Data URI and its syntax is as below:

To integrate it in HTML you have to write html img tag code like this:

We can easily convert base64 images using online tool. To create Base64 encode using php or codeigniter dynamically checkout our tutorial on Codeigniter Create Helper which explains how to create and use base64 images in php.

We can also integrate base64 images inside stylesheet (background-image property).

Base64 images can increase performance?

If we encode all our websites small images, wrap them inside css or html code. Doing this will reduce the number of HTTP requests because client (browser) don’t have to issue separate request for images. That will definitely increase performance of website. Because most of page load time is taken for transferring data over internet. Not to process it on server.

Advantages of Base64 images:

• Removes separate HTTP Requests for image loading by wrapping encoded image code inside css or HTML.
• Image encoded data can be saved inside database and can generate image file. Just incase we lost image file copy.

Disadvantages Base64 images:

• Though Base64 increases performance but be careful. Doing so will increase image size approximately 20-25%. than what it is actually in its binary form. So more data has to be transferred on internet. For mobile devices it is a bit drawback.
• Even if we apply gzip compression, doing so will only decrease css file size to around 10-12%.
• IE6 & IE7 not supports Data URI which means base64 images will not be loaded in ie6 & ie7 browsers.
• If you apply base64 encoding to lots of medium sized images it will increase HTML content size or CSS content size. So browser has to do roundtrip to get full content.

Bookmark Link using:

You may also like:

WordPress Theme from HTML CSS Design Part 1 WordPress Theme from HTML CSS Design Part 2 Codeigniter create helper