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.