Skip to content

Latest commit

 

History

History
47 lines (33 loc) · 1.13 KB

images.md

File metadata and controls

47 lines (33 loc) · 1.13 KB

Compressing

Compress/optimize all images uploaded to the site to reduce site load time as well as site build time.

[TODO: Include tool in site infrastructure for optimizing images]

Centering

Ways to center an image, while allowing it to be responsive:

![...](path/file.ext){: .mw-100}
{:.text-center}

The previous example must be preceded and followed by a blank line so that the text-center class is applied to the paragraph that will be wrapping the image.

This one adds padding after the image too:

<div class="text-center mb-4">
  ![...](path/file.ext){: .mw-100}
</div>

If you know that your image will fit within the page as rendered on your smallest target device, then you can use the following:

![...](path/file.ext){:width="160px" .d-block .mx-auto}

Alt text

If an image is not decorative and not just used as a visual guide, specify alt text following the alt text style guide. This goes in the initial [] using Markdown syntax.

![AnimatedBuilder widget tree](/path/widget_tree.png)