How to Embed Images in Markdown

How to Embed an image in markdown

To embed images in Markdown, use the following syntax:

![Alt text](URL)

• Alt text: Text displayed if the image cannot be shown.
• URL: Path to the image. For local images, could use relative file path or full path of the image. Ensure the path is correct relative to the Markdown file.

Example:

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

Embed an image as Base64 string in markdown file

To embed an image directly in the Markdown file using a base64 string:

![Alt Text][identifier]

[identifier]: data:image/png;base64,YOUR_BASE64_STRING

Example with a base64 string:

Benefits and Drawbacks of Embedding Images as Base64 Strings

• Benefits

  1. Self-contained: No need to manage separate image files.
  2. Portability: Easier to share a single file without missing images.
  3. Reduced HTTP Requests: Fewer requests needed to load a page.

• Drawbacks

  1. File Size: Increases the Markdown file size.
  2. Readability: Less readable and harder to edit.
  3. Performance: Large base64 strings can impact performance.
  4. Compatibility: Not all Markdown viewers support base64-encoded images.