Is it possible to directly embed an image into a Markdown document?

Question

I know that I can display an image with the following syntax:

![](/imagepath)

However, is it also possible to directly embed an image into the document to share the Markdown document with the image file directly contained inside it?

Answer 1

Yes, it is possible, using data: URIs and base64. Terribly inefficient though:

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

Unfortunately Super User does not allow data: URIs, it would look like this:

Whether this will work of course depends on whatever you’re using to (pre)view the document. It has to support and allow data: URIs.

Answer 2

I did some tests and embedding usually works with online markdown editors like dillinger.io, jbt.github.io, stackedit.io, so this topic isn't so black and white as @Spiff wrote above.

This is a screenshot of two base64 blocks inserted by using 1) an internal reference and 2) a common image insertion (see the code below).

1) the referenced base64 block stops being parsed right at the point where 'a new chunk of image' starts, the green part ... So4Z4wxkXa7KukmKul2dDvd ...
2) by passing the block directly we get the whole image

code

1\)![png tester1][pngtester1] 2\)![png tester2](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABkCAYAAABJhSQPAAAACXBIWXMAAAsTAAALEwEAmpwYAAADf0lEQVR42u3dW2vTYBzH8eeUPDm0adN2adeddNMpo2ObXoypsDvFd+WbEfRSUUHvxIFOEXG7UEFR5xybulO3tU3XpF4JIiJ43Pw/v+8LKP3nQ54nIaTlC2fOXGKIfAKHANAI0AjQCNAI0AjQCNAI0AjQgEaARoBGgEaARoBGgEaARoBGgAY0AjQCNAI0AjQCNAI0AjQCNKARoBGgEaARoNE/T+EQHL4SwXhsCbnrKWvHU3bdV3rHV3rPlXrPkbqppY5tYXUkVx3JZSo4Z4wxkXa7KukmKul2dDvdd+Mk9ltJ7DeTGNAHXFML+Slnu6slnVkpOfm1og5bttC/8lmp4LwtuGhbzGo40t1kFs7ogyjljNV9ZS9V3OB11Su97XUrWLqJFFtcLEdu9vmRTPSq3+vDHk2oli3k66qXWzie7V8r6AIuxogty+/KbvbxydzActmJcNVNrIYW6uloED0ay4/i9opg64GlH4yHgwe57wL6L/YhtN17k4Xh95HT8z99b0D/xBl891Rx5DDuv4D+AzW1kHMThaFnRzOD//McgP5BT0aD6N5UYYzCLID+Th/ztnPzXFSr+ypDZSZAf3MvPF/LVw/7rRKgf6NtX9nXZsvjW1krS3E+QDPGXgz64e2ZngnKMxoPfXeqMPh0NBimPqex0G3FxfXZythKSZdMmNdI6B1XWlcu9J1uauGYMrNx0OuBpS9f7JsxbW6joD+EtnvlfHXaxFVMABnQpJZrk5GNgN51pDJxTzYKuiM5v3q+epoh2tA3zkUn91zpgpkw9P3xfHWp4pZBTBj6bcXNUnwCBeivatlCXpstY1+mDn1nuucYWIlDv+z3cm+qbi9YCUO3FRe3zkZTICUOPV8L+8BJHLruKevJiWAEnMSh5ybDI6AkDr2VUfbLAR/LNnXo+Vo4AEbi0E0t5IshH9DUoRdHggiEBkA/rOWPg5A49GpBeynHD+KRh148lsUjSOrQKWfs2dHMEPiIQ28ElgM6A6Df9Ho50BkA/arfw20VdeiUM7ZW1EXQEYduaIl3uk2A3sjhQswI6PWc7YHNAOjNwAK0CdBbGUAbAb3r4RUbI6BbWtpgMwC6rbgFNgOgv/z1DyIOLdJuF2wGQNud7j7YDIB24qQNNgOgM42kCTYDoPO7+w2wGQAd1gFtBHRxuw1oE6AL2/stsBkA7cVJB2w/32c7r8DNq/e3jAAAAABJRU5ErkJggg==)
1) the referenced base64 block stops being parsed right at the point where 'a new chunk of image' starts, the green part ... So4Z4wxkXa7KukmKul2dDvd ...

2) by passing the block directly we get the whole image
This was tested with http://tmpvar.com/markdown.html. I don't know how it behaves on github. The issue has been already well discussed.

This was tested with http://tmpvar.com/markdown.html. For the behavior on github, the issue has been already well discussed (and rejected).

Answer 3

GitHub, markdown-it and Google docs now support embedding images in Markdown.

The most convenient way to use this feature is to link to embedded images that will be included at the end of the document:

![Hello World][hello_world_img_base64]
Some other text.

Answer 4

Converting PNG to Base64-Markdown

In Bash, you can execute the following to convert the PNG file into a center-aligned base64 image respecting the Markdown's HTML format:

echo "<p align='center'><img src='data:image/png;base64,$(base64 <FILE.PNG> -w 0)'/></p>"

If you want the result to be copied directly into your clipboard (for easy pasting), you may pipe it to xclip:

echo "<p align='center'><img src='data:image/png;base64,$(base64 <FILE.PNG> -w 0)'/></p>" |xclip -selection clipboard

The resulting format to be pasted into your markdowns is as follows:

<p align='center'><img src='data:image/png;base64,[BASE64_IMAGE]'/></p>

Even if you markdown's size might grow significantly, embedding the Base64 format of your images directly into the markdown has the advantage of making them independant from external sources (e.g. you don't need to rely on an external website), as said above.

That way, each markdown becomes a standalone file, holding all the information locally by itself.

Converting GIF to Base64-Markdown

Note that this also applies against GIF images:

echo "<p align='center'><img src='data:image/png;base64,$(base64 <FILE.GIF> -w 0)'/></p>"

Answer 5

No, a Markdown document is just a text file, and text editors (even Markdown-savvy ones) wouldn't know what to do with a blob of binary image data in the middle of a text file.

There are methods like MIME and base64 to encode binary data into a text file in a sense, but most text editors and Markdown-renderers wouldn't know what to do with a MIME encoded document that contains a Markdown text part and a base64 encoded image part.