Image Format

Alignment Class

Similar to what is described in here, the syntax for inserting an image in your write-up is:

[![alt text](/path/to/image "hover text"){: .half}](/url/of/click)
{: .center}

The url/of/click should point to a href for this image’s parent <a>. Or just use the same as /path/to/image.
Append the {: .center} line to align the image at center.
Add the {: .half} class for image sizing. Here are the options:

Class	Description
`full`	One image per line. The image will be displayed with `width: 90%;`.
`half`	Two images per line. The image will be displayed with `width: 45%;`.
`right`	The image will be displayed with `float: right;` with a `width: 150px;`. You may need to add several `<br/>` to lengthen the page for the floating element.

Last but not the least, please process your image before committing:

Use .png or .jpg format.
Resize your image. Images are displayed with a fixed size thus ultra-high resolution images are unnecessary. All images should be 72 dpi for web browsing. Higher dpi is a waste of resources.
Optimize your image! Please use the tool ImageOptim to compress your image first. Screenshots usually have their size reduced by > 20%.

Place in a res/ folder inside your package folder. Images and other resources for a tutorial should stay with its package .md or .html files. This helps the repository organization.