In my case I would like to split images in two types:

• inline images, which are usually quite small and could be shown just in the text, like this one: ;
• and big images, which should be shown inside a paragraph aligned by center of the page:

Of course you can insert html img tag directly in the markdown file. But it’s not so cool as a plain markdown :)

Here is the markdown for the images above:

![Awesome-screenshot](https://streetturtle.github.io/images/awesome_scrnsht.png);
![insta-bears](https://streetturtle.github.io/images/insta-bears.jpg){:.center-image}

This approach will work with kramdown converter, redcarpet does not support this feature.

So idea here is to provide a css class just after the image in curly brackets with colon: {:<css-class-name>}. In my case .center-image defined like this:

.center-image
{
  margin: 0 auto;
  display: block;
}

And the output html would be:

<img src="http://localhost:4000/images/insta-bears.jpg" alt="insta-bears" class="center-image">

With this approach you can use as many image styles as you want just by defining css class and providing it after the image. You can read more about this kramdown feature in quick reference.

By the way those bears are from Madrid Zoo, I really recommend to visit them :)