mkdocs/docs/MkDocs/mkdocs-material-3.md

# Material for MkDocs

https://squidfunk.github.io/mkdocs-material/



### Images

https://squidfunk.github.io/mkdocs-material/reference/images/

```yaml
markdown_extensions:
  - attr_list
  - md_in_html
```



```title="Image, aligned to left"
![Image title](https://dummyimage.com/600x400/eee/aaa){ align=left }
```

![Image title](https://dummyimage.com/400x300/eee/aaa){ align=left }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.



------



```title="Image, aligned to right"
![Image title](https://dummyimage.com/600x400/eee/aaa){ align=right }
```

![Image title](https://dummyimage.com/400x300/eee/aaa){ align=right }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

<p {: style="clear: both;"}>

```title="Image with caption"
<figure markdown>
  ![Image title](https://dummyimage.com/600x400/){ width="300" }
  <figcaption>Image caption</figcaption>
</figure>
```

<figure markdown>   
  ![Image title](https://dummyimage.com/600x400/eee/aaa){ width="300" }   
  <figcaption>Image caption</figcaption> 
</figure>

 ![Image title](https://dummyimage.com/600x400/eee/aaa){ width="300" }   

 

![](https://dummyimage.com/600x400/eee/aaa)



![aaa](/Users/bruno/Downloads/aaa.png)



```title="Image, lazy-loaded"
![Image title](https://dummyimage.com/600x400/){ loading=lazy }
```

![Image title](https://dummyimage.com/600x400/){ loading=lazy }