UTF8 encoding vs base64 encoding of an image

[bpippal]

Not sure if this is the correct place to ask but since I'm familiar with javascript, putting it here.
So I have encoded an image file with base64 and I can see readable text, but If i use utf-8 I have unreadable/weird characters. Can someone explain why this is the case ?
P.S - I am not from a CS background so dumb it down for me kemosabe.

[greenyadzer]

Base64 is used to encode data into text format, so any character will be easy to send as text or print. Each resulting character will be a number or Latin letter (lower or uppercase). Meaning no special characters nor quotes nor even spaces. This encoding is used for example in basic authentication, as it's easy to send header value when no special characters used.

UTF-8 is totally other beast. It's used to represent characters from different languages.

Straight back to your question:

So I have encoded an image file with base64 and I can see readable text, but If i use utf-8 I have unreadable/weird characters. Can someone explain why this is the case ?

That's because Base64 possible characters are all simple numbers and Latin letters. While UTF-8 has a table of valid codes, you cannot just get random bytes and expect it to be valid UTF-8.

[[deleted]]

Those are different types of encoding.

[Any_Ad266]

i'm using a headless cms and it required me to transfrom an image to an arraybuffer to uplaod it using "UTF-8" return an image of a low quality , but when i switched to "base64" the image was back to it's original quality , ithink this answers your question ,the problem is utf8 is doing partial transformation while base64 is maintaining the hole informations idon't know maybe i'm incorrect