Data Image base 64 [duplicate]

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