How to use Images in Markdown
Everyone has heard the cliché that a picture is worth a thousand words. Most of the content humans read include images. This quick post will teach you everything you need to know about embedding images in markdown.
When authoring content in markdown, you typically store images in a separate folder. Normally you will create this folder in the same folder as your markdown document and name it “images.”
Although it is possible to store images in the same folder and at the same level as your markdown content, it is often preferable to make a separate folder for your images.
Let’s imagine you have a folder called, MarkdownDemo with a Markdown document called, MarkdownImageDemo.md.
The first thing we want to do is create a folder that will contain the images that we want to display in markdown. The name of this folder is typically “media” or “images” or similar.
Name the folder images. Next, place an image into the folder. As our example we will save an image from a Word document into our images folder by right mouse clicking on the image.
At this point we now have an image in the images folder.
Remaining Steps in this post
1. A note about resizing
2. Next steps — Finishing the markdown
4. How to display images in a Markdown document — Understanding Syntax
5. Viewing the results — what the rendered markdown looks like
6. Tooling that can do this on one step — Markdown Conversion Toolkit for Word
A note about resizing
Generally speaking, the typical file format supported is either jpg or png. Then there is the issue of image size. Markdown does not fully support giving you the ability to specify image size in an easy way. Typically, this means it’s probably easier to size the image that looks best for the reader. You will want to avoid small or large images.
Although we consider this somewhat of an edge case, some implementations, like Mou and Marked 2 on the Mac let you indicate desired image size. In general, it is easiest to have the image in its correct size.
There are several ways to resize images depending on the operating system. Windows has products like the Photo Gallery or Microsoft Paint. If you are using Mac OS you can use Preview to resize an image. With Linux you can use GIMP or any number of command line utilities, like imagemagick.
How to display images in a Markdown document — Understanding Syntax
The syntax is quite simple. Notice in the document below we have a header on line 1. On line 3 we have a simple paragraph. And then on line 5 you can see the syntax that allows us to embed our image.
Viewing the results — what the rendered markdown looks like
Here is what the rendered content would look like on something like Github.com. If you were to hover your mouse over the image, you would see the words, “Image of W2M.”
Tooling that can do this on one step — Markdown Conversion Toolkit for Word
If you have a Microsoft Word document or any docx file that needs to be converted, all of these steps can be achieved with a single mouse click in an application.
http://wordtomarkdown.com
