Data Image base 64

Question

Could someone please explain how does this work?

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACDUlEQVR4Xu2Yz6/BQBDHpxoEcfTjVBVx4yjEv+/EQdwa14pTE04OBO+92WSavqoXOuFp+u1JY3d29rvfmQ9r7Xa7L8rxY0EAOAAlgB6Q4x5IaIKgACgACoACoECOFQAGgUFgEBgEBnMMAfwZAgaBQWAQGAQGgcEcK6DG4Pl8ptlsRpfLxcjYarVoOBz+knSz2dB6vU78Lkn7V8S8d8YqAa7XK83ncyoUCjQej2m5XNIPVmkwGFC73TZrypjD4fCQAK+I+ZfBVQLwZlerFXU6Her1eonreJ5HQRAQn2qj0TDukHm1Ws0Ix2O2260RrlQqpYqZtopVAoi1y+UyHY9Hk0O32w3FkI06jkO+74cC8Dh2y36/p8lkQovFgqrVqhFDEzONCCoB5OSk7qMl0Gw2w/Lo9/vmVMUBnGi0zi3Loul0SpVKJXRDmphvF0BOS049+n46nW5sHRVAXMAuiTZObcxnRVA5IN4DJHnXdU3dc+OLP/V63Vhd5haLRVM+0jg1MZ/dPI9XCZDUsbmuxc6SkGxKHCDzGJ2j0cj0A/7Mwti2fUOWR2Km2bxagHgt83sUgfcEkN4RLx0phfjvgEdi/psAaRf+lHmqEviUTWjygAC4EcKNEG6EcCOk6aJZnwsKgAKgACgACmS9k2vyBwVAAVAAFAAFNF0063NBAVAAFAAFQIGsd3JN/qBA3inwDTUHcp+19ttaAAAAAElFTkSuQmCC

And how does this generate an image and how to create it? I found this a lot of times in html.

Follow up question

How does this differ on a url as a src in terms of loading time and http request? does this make loading time faster? How would it scale if i am to use, say 50 images?

Also.

if this is better

in uploading, converting images to base64 and saving it on database rather than a url would make a site better?

Answer 1

You can use it like this:

<img alt="Embedded Image" src="data:image/png;base64,{base64 encoding}" />

It's used to generate new images, or to store images as plain text. You can read more about base64 encoding here on Wikipedia: http://nl.wikipedia.org/wiki/Base64

How does it work?

1. The characters are converted to binair
2. They take a group of 6 bits
3. The groups will be converted to decimal
4. For each decimal they take the number on the position n+1 which is in the base64 character table, the numbers variate between 0 and 63.

It does not always come out correctly, since the number of bits must be a multiple of 6. If this is the case, there will be, depending on the required number of additional bits, put 2 or 4 zeros at the end. If so, there will be added a = at the end.

Base64 character table

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Different languages and usage

PHP

<?php
base64_encode($source);
// Or decode:
base64_decode($source);

Python

>>> import base64
>>> encoded = base64.b64encode('data to be encoded')
>>> encoded
'ZGF0YSB0byBiZSBlbmNvZGVk'
>>> data = base64.b64decode(encoded)
>>> data
'data to be encoded'

Objective C

// Encoding

NSData *plainData = [plainString dataUsingEncoding:NSUTF8StringEncoding];
NSString *base64String = [plainData base64EncodedStringWithOptions:0];
NSLog(@"%@", base64String); // Zm9v

// Decoding

NSData *decodedData = [[NSData alloc] initWithBase64EncodedString:base64String options:0];
NSString *decodedString = [[NSString alloc] initWithData:decodedData encoding:NSUTF8StringEncoding];
NSLog(@"%@", decodedString); // foo 

Answer 2

The bit after the "base64," is a base64 encoded version of the binary png. Since your question is tagged PHP, here's how you would do that in php:

<?php
$img = file_get_contents('img.png');
echo "data:image/png;base64,".base64_encode($img);

Answer 3

How does it generate an image?

First off, the src of the image is recognized by the browser as a Data URI. It then tries to parse the Data URI (see how chrome(ium) does it here. The parser parses the URI, finds that it is a base64 encoded image and decodes it using a base64 decoder into a binary object. This is equivalent to any normal image file. This binary object is used subsequently while rendering the page.

How does this differ on a URL as a src in terms of loading time and HTTP request?

Since there are no HTTP requests made and the image data is already in memory data URIs should load significantly faster.

Does this make loading time faster? How would it scale if i am to use, say 50 images?

The page loading time? Depends. Base64 encoding string is about 2-3 times larger than the original string. That means more data is transferred with the page load. Also, data URI images are not cached in the browser! So that means it has a clear disadvantage if you have to show this image on different pages - because you have to serve base64 content every time! Instead you could have simply set cache headers on your image data types and simply served it once, and let the browser take the image from memory/cache in subsequent page loads. It really depends on your specific usage. But, you now know the intricacies of base64 encoded data URIs.

Summing it up

+

1. Easier to generate/store
2. Has a fixed charset
3. Smaller perceived loading times

-

1. More data transferred
2. Require decoding by the browser
3. No caching

Answer 4

Format: data:[<MIME-type>][;charset=<encoding>][;base64],<data>

This method is called data URI scheme, it is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources. It is a form of file literal or here document (is a file literal or input stream literal). This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.

Ref: http://en.wikipedia.org/wiki/Data_URI_scheme

Ref: http://en.wikipedia.org/wiki/Here_document