Recently I embarked on a journey to explore the benefits of Base 64 encoding for Images and Image search using this technique. In this blog I would like to share my experience. Hope this helps.

Base64
A better mechanism to transport binary data is not by streaming the bits and bytes over the cable in a raw format. This is because the media files are made for streaming text. There are some protocols that may interpret your binary data as control characters or your binary data can be changed because the protocol that is used to transport this data may think that you have used a special character sets.

Although, this is one of the disadvantages, users started encoding the binary data into characters. Base64 happens to be one of the basic types of encodings. Essentially each 6 bits of the input is encoded in a 64 character alphabet. The “standard” alphabet uses A-Z, a-z, 0-9 and + and /, with = as a padding character. So in essence, Base-64 encoding is a way of taking bunary data and turning it into text so that it’s more easily transmitted in things like e-mail and HTML form data.
Base64 is often used in cryptography is not a security mechanism. Anyone can convert the Base64 string back to its original bytes, so it should not be used as a means for protecting data, only as a format to display or store raw bytes more easily.
Example: Base-64 maps 3 bytes (8 x 3 = 24 bits) in 4 characters that span 6-bits (6 x 4 = 24 bits). The result looks something like “TWFuIGlzIGRpc3Rpb…”. Therefore the bloating is only a mere 4/3 = 1.3333333 times the original.

Image to Base64 String:
“Web Performance”, this can be very critical to our application design. Steve Souders has dedicated his career talking about improving website performances. It’s embedded in my head that extra HTTP requests add a lot of additional overhead, and we should explore new ways to dramatically decrease the load time of our web app. We explored Image Sprites, where we crammed a collection of images to put into a single image. A web page with many images can take a long time to load and generates multiple server requests, using image sprites will reduce the numbers of server requests and save bandwidth. The concept of image sprits is predominant in the Video Games industry. When it comes to viewing an image from sprites is to rearrange a “viewport” of sorts to view only specific pieces of that file at a time.
Although the “sprites” approach can save some resource time, since multiple requests have now been combined into one requests, but there were some drawbacks when it came to handling medical images such as “TIFF” files.
It was hard to maintain and update, increased memory consumption and bleedthrough [Nearby images visibly bleeding through other elements].

Base64 encoding images – Option to the Rescue:
You can embed an image as an inline HTML code using Base64 encoding.

Example:

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCAMAAABThmYtAAAAXVB”>

Java Code to Convert an Image to Base64 String:

private static String encodeImageToBase64Binary(File file){
 String encodedfile = null;
 try {
 FileInputStream fileInputStreamReader = new FileInputStream(file);
 byte[] bytes = new byte[(int)file.length()];
 fileInputStreamReader.read(bytes);
 encodedfile = Base64.encodeBase64(bytes).toString();
 } catch (FileNotFoundException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 } catch (IOException e) {
 // TODO Auto-generated catch block
 e.printStackTrace();
 }