Картинки

---
icon: material/image-frame
---

# Изображения

## Настройка

Добавьте в `mkdocs.yml`:

```yaml
markdown_extensions:
  - attr_list
  - md_in_html
  - pymdownx.blocks.caption

Лайтбокс (увеличение изображений)

Установите плагин:

pip install mkdocs-glightbox

Добавьте в настройки:

plugins:
  - glightbox

Использование

Выравнивание изображений

Используйте атрибут align для выравнивания:

По левому краюПо правому краю

![Заголовок](https://dummyimage.com/600x400/eee/aaa){ align=left }

Текст обтекает изображение слева

![Заголовок](https://dummyimage.com/600x400/eee/aaa){ align=right }

Текст обтекает изображение справа

Подписи к изображениям

Способ 1: HTML-теги

<figure>
  <img src="https://dummyimage.com/600x400/" width="300">
  <figcaption>Текст подписи</figcaption>
</figure>

Текст подписи

Способ 2: Специальный синтаксис

![Заголовок](https://dummyimage.com/600x400/){ width="300" }
/// caption
Текст подписи
///

Отложенная загрузка

Используйте loading=lazy для оптимизации:

![Заголовок](https://dummyimage.com/600x400/){ loading=lazy }

Светлая и тёмная тема

Показывайте разные изображения для разных тем:

![Для светлой темы](url-изображения#only-light)
![Для тёмной темы](url-изображения#only-dark)

```