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 see's 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 it's png decoder.
• It gets a bitmap graphic that it can then display.

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.

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.

• 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 see's those bytes again it knows how to display them.
• Image is written to disk as series of bytes
• base64 reads those bytes, converts their representation and display the result.

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 see's 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 it's png decoder.
• It gets a bitmap graphic that it can then display.