Embed base64 image in markdown

2014-01-11

Today I come up an idea with embedded image inside markdown. When writing document with markdown syntax, we can embedded inline html code to enhance the content. It turns out that base64 images could also be embedded inside markdown document by using img tag. Below is an example showing HTML5 Logo using embedded base64 image (instead of external resources). However, be careful about this kind of inline base64 image. Size of document would be largely increased which would make your webpage slow even you only embedded a medium-size (100KB) image.

今天我想到了一個可以在 markdown 中嵌入圖像的作法。使用 Markdown 編寫文件時,我們可以使用 inline html 使文件更豐富。這也代表我們可以用 img tag 把 base64 影像放置在 Markdown 文件中。下面是一個利用 base64 影像來顯示 HTML5 Logo 的例子(而不需用到任何外部的影像資源)。不過在使用這種嵌入 base64 影像時要特別小心。即使你只是放了一個中等大小(100KB)的圖像,你的文件大小會增大很多,使得頁面要花上很多時間載入。