How an image get converted by base64 algorithm?

Question

After I read in https://en.wikipedia.org/wiki/Base64 about how the word Man gets converted into TWFu by using the base64 algorithm, I was wondering how an image get converted by the same algorithm, after all this conversion takes bytes ,divide them into groups of 6 and then looking for their ASCII value.

My question is, how an image becomes a base64-encoded string? I want an answer that describes the flow from when we save the image in our computer until it becomes a base64-string.

Terms that I hope will be explained in the answer are: pixels/dpi/ppi/1bit/8bit/24bit/Mime.

Answer 1

Base64 isn't an image encoder, it's a byte encoder, important distinction. Whatever you pass it, whether it be a picture, an mp3, or the string "ilikepie" - it takes those bytes and generates a text representation of them. It has no understanding of anything in your pixels/dpi/ppi/1bit/8bit/24bit/Mime list, that would be the business of the software that reads those original bytes.

Per request I want an answer that describes the flow from when we save the image in our computer until it's become 64base string.

To get to a base64 representation:

• Open paint and draw a smiley face.
• Save that smiley face as smile.png
• Paint uses its png encoder to convert the bitmap of pixels into a stream of bytes that it compresses and appends headers to so that when it sees those bytes again it knows how to display them.
• Image is written to disk as series of bytes.
• You run a base64 encoder on smile.png.
• base64 reads the bytes from disk at the location smile.png refers to and converts their representation and displays the result.

To display that base64 representation in a browser:

• browser is handed a resource encoded with base64, which looks something data:image/png;base64,blahblah...
• Browser takes the image/png part and knows that the data following it will be the bytes of a png image.
• It then sees base64, and knows that the next blob will need to be base64 decoded, before it can then be decoded by its png decoder.
• It converts the base64 string to bytes.
• It passes those bytes to its png decoder.
• It gets a bitmap graphic that it can then display.

Answer 2

every image is consists of many pixels, the number of pixel is determined by the image resolution.

image resolution - the number of pixels in a row & number of rows. for example image with resolution of 800x600 has 800 pixels in a row & 600 rows.

every pixel has bit depth - the number of bits represent pixel. for example with bit depth of 1 every pixel is represent by one bit and has only 2 options (0 or 1 - black or white).

image can saved in many different formats. the most common are bitmap , jpeg, gif. whatever format is used an image always displayed in computer screens as bitmap (uncompressed format). every format is saved differently.

• jpeg- is a 24 bit (bit depth) format. when you stored the image it work in compressed form and you loss some of the image data.

• gif- up to 8 bit (bit depth) format. a gif image can be optimized by removing some of the colours in its palette. it is a lossless format.

Answer 3

Just throwing this in for the Bytes clarification :

• "The word MAN gets converted into TWFu by using the base64 algorithm, I was wondering how an image gets converted by the same algorithm, after all this conversion takes Bytes, divide them into groups of 6 and then looking for their ASCII value."

• "My question is, How an image becomes base64 string?"

correction : MAN becomes TUFO. It is actually Man that becomes TWFu as you've shown above.

Now onto the clarification...

The byte values (binary numbers) of the image can be represented in hex notation, which makes it possible to process those same bytes as a string. Hex has a range from 0 up to F which means.. ranging 0 to 9 then it's A = 10 up F = 15. Giving 16 possible values.

Hex is also called Base16.

• Bytes conversion to Base64 is simply : Numbers converted from Base16 to Base64.
• The Hex range of 0 to F is within Base64 valid chars and so can be written as Base64.

For example :

• The beginning 3 bytes of JPEG format are always ff d8 ff
• The same as Base64 is : /9j/ ...(see examples at these link1 and link2)

You can test by :

• Open any .jpg image in a downloaded free Hex Editor. You can also try online Hex editors but most won't Copy to clipboard. This online HEX viewer will allow Select/Copy but you have to manually remove all those extra minus - in copied hex text (ie: use the Find & Replace option in some text editor), or skip/avoid selecting them before any copy/paste.

• Go to this Data Converter and re-type or copy/paste as many bytes (from starting FF up to any X amount) into the [HEX] box and press decode below it. This will show you those bytes as Base64 and even tells you the decimal value of each byte.

Answer 4

When you upload any file in a html form using <input type="file>" it is transferred to server in the exactly same form as it is stored on your computer or device. Browser doesn't check what file format is and traits it as just block of bytes. For transfer details see How does HTTP file upload work?