Images encoded with Base64 with a given string length appears weird in editor but kills the post render on the site

[burgatshow]

Dear Developers,

I tried to put an image into one of my posts encoded with base64. The image is encoded from PNG to Base64 using macOS

base64 -i input.png -o output.png.txt

command.

The image converted and successfully edited in the related post image block by entering HTML editor and replaced the img src="" with the following:

<figure class="wp-block-image aligncenter"><img src="data:image/png;base64,<base64 long string>" alt="Alternate text" /></figure>

When I switched back to preview mode, the image successfully displayed in the editor, however the post when published is broken.

I have some screenshots from my blog site as well as the image as base64 file.

[burgatshow]

Original large PNG

[burgatshow]

Large PNG as Base64

[burgatshow]

Small PNG

[burgatshow]

Small PNG as Base64

[burgatshow]

Screenshots I made with the issue