
Probably better Stack Overflow answer by Dave Markle: On the right, that same image base64 encoded with all safe characters. On the left, the data of a PNG, which includes characters that have the potential to screw up HTML. I’m not a huge expert here, but as far as I understand, base64 is safe for use in something like HTML or CSS because it only uses 64 characters known to be safe in those formats. image/png), semicolon, then the data of that file.įor a raster image like a PNG, the data of that image needs to be in base64 format. Essentially you just tell it what content type it is (e.g.

The format that you use in a data URI can vary. It’s a really nice way of including a resource that would have otherwise been a separate HTTP request.
