Menu
Possible Duplicate:
embedding background image data into css as base64, good or bad practice
I was just browsing the source on my Google Chrome homepage and notices that images are base64 encoded in the CSS. What's the advantage of this? I'm tempted to think that it's just to reduce http requests, but since it's a local application it doesn't matter anyways, right? It could just load the image locally?
menu > [checked]:before {
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAARklEQVQYlWNgwA+MgViQkIJ3QKzEAFVpjEPBf5giJaiAMRYF72DWKSEJlKMpgNsgiCTxH5sCbG7AqgBZ4V2sCv7//08QAwAUfjKKBs+BFgAAAABJRU5ErkJggg==");
display: inline-block;
height: 9px;
margin: 0 5px;
vertical-align: 50%;
width: 9px;
}
206
It's only useful for very tiny images. Base64 encoded files are larger than the original. The advantage lies in not having to open another connection and make a HTTP request to the server for the image. This benefit is lost very quickly so there's only an advantage for large numbers of very tiny individual images.
The short answer is yes, unique binary/hex values will always encode to a unique base64 encoded string. BUT, multiple base64 encoded strings may represent a single binary/hex value. This is because hex bytes are not aligned with base64 'digits'.
Encoding to/from Base64 is completely lossless. The quality loss happens probably when you save it. To prevent that, use an ImageWriter directly ( ImageIO.
Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits). This means that the Base64 version of a string or file will be at least 133% the size of its source (a ~33% increase).
its a Data Uri Scheme and as far as I know, the only advantage is to save HTTP requests (as everything is loaded as one, rather than fetching images).
Why its on the google chrome landing page....well, google does like to show off and use the latest tech on everything.
116
I think Kirean is right, but to elaborate on the specific question title...
The binary image data is base64 encoded in the Data Uri so it can go in a text file. If the binary data was not base64 encoded it would look something like:
?PNG
IHDR ??FIDAT?c`???X???w@??Ui?C??"%??1?`?)! ??)?? ?$??ln??Y?]?
???O~2?ρIEND?B`?
It could include chars like " and the css parser might choke on it.
When it is base64 encoded, it will only include chars like:
0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+,=
No idea on why they chose to do it that way, maybe they didn't want extra image files to manage.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
