Markdown cheatsheet and Reference: Using Images

Markdown cheatsheet and Reference: Using Images

Last updated:
Table of Contents

A Markdown version such as github's GFM (github-flavored markdown) is assumed

Makdown image

Use ![alt-text](http://example.com/image.png)

Center image

To center an image horizontally, use an img tag (you can embed pure HTML into markdown) and wrap with within p p tag:

<p align="center">
  <img src="http://www.example.com/path/to/img.png">
</p>

Use relative image from github repo

Use raw=true and use a relative path in an img tag (you can embed pure HTML into markdown):

<img src="relative/path/to/file.png?raw=true">

Custom image size

By default, images take all horizontal space available (a typical Github README div has roughly 840px in width at most)

Use an img tag (you can embed pure HTML into markdown) and set height or width attributes

<p align="center">
  <img src="http://www.example.com/path/to/img.png" height="150">
</p>