Geek Answers Handbook

Image Database 64

Can someone explain how this works?

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 create an image and how to create it? I found this many times in html.

Follow up question

How is this different from url like src in terms of load time and HTTP request? does it speed up boot time? How will it scale if I use, say, 50 images?

also.

if it is better

when uploading, converting images to base64 and saving them in the database, and not in the url, is it better to make the site better?

+6
source share
4 answers

You can use it as follows:

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

It is used to create new images or to store images in plain text. You can learn more about base64 encoding here on Wikipedia: http://nl.wikipedia.org/wiki/Base64

How it works?

  • Symbols are converted to binair
  • They take a group of 6 bits
  • Groups will be converted to decimal
  • For each decimal number, they take a number at position n + 1, which is in the base64 character table, numbers range from 0 to 63.

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

Base64 Character Table

 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

Different languages ​​and uses

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'

Goal 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
+5
source

The bit after "base64" is a base64 encoded version of binary png. Since your question is tagged by PHP, here is how you do it in php:

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

How does it generate an image?

Firstly, the src image is recognized by the browser as a data URI . He then tries to parse the data URI (see How chrome (ium) does it here . The parser parses the URI, finds that it is base64 encodes the image and decodes it using the base64 decoder in the binary, which is equivalent to any normal image file. This binary the object is subsequently used when rendering the page.

How does this differ with a url like src in terms of load time and HTTP request?

Since no HTTP requests are made and image data is already in memory, data URIs should load much faster.

Does it speed up boot time? How will it scale if I use, say, 50 images?

Page load time? It depends. Base64 encoding string is approximately 2-3 times larger than the original string. This means that more data is transferred when the page loads. In addition, data URI images are not cached in the browser! So this means that it has a clear flaw if you need to show this image on different pages - because you have to serve base64 content every time! Instead, you could just set the cache headers on your image data types and just serve it once, and also let the browser display the image from memory / cache on subsequent page loads. It depends on your specific use. But now you know the intricacies of base64 encoded URIs.

Summarizing

+

  • Easier to create / store
  • Has a fixed encoding
  • Less perceived load time

-

  • More data transferred
  • Require browser decoding
  • No caching
+2
source

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

This method is called a data URI scheme , it is a Uniform Resource Identifier (URI) scheme that provides a way to include data in a string on web pages as if they were external resources. This is the form of a file literal or document (this is a literal literal or input stream). This method usually allows you to select individual elements, such as images and style sheets, in a single HTTP request, rather than in multiple HTTP requests, which can be more efficient.

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

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

+1
source

More articles:


All Articles