Настройка размера изображений в Markdown (ширина и высота)

Почему базовый синтаксис  не поддерживает размер

Классический синтаксис Джона Грубера ![Описание](image.png) намеренно минималистичен: в нем вообще нет параметров ширины или высоты. В результате при вставке скриншота высокого разрешения (Retina или 4K) картинка распахивается на всю ширину экрана или вовсе вылезает за границы печатной страницы PDF.

К счастью, спецификация CommonMark разрешает бесшовную интеграцию HTML-тегов прямо в тело Markdown-документа.

Изменить размер картинки markdown width: использование тега img

Самый надежный и кроссплатформенный способ, как изменить размер картинки markdown width — заменить стандартную скобочную запись на тег <img>:

<!-- Фиксированная ширина в пикселях -->
<img src="screenshot.png" alt="Панель настроек" width="450" />

<!-- С ограничением по высоте -->
<img src="logo.svg" alt="Логотип проекта" height="80" />

Браузер и PDF-генераторы автоматически сохраняют пропорции изображения: если вы указали только width="450", высота пересчитается пропорционально без сплющивания.

Так размер задается на GitHub, GitLab и в Obsidian. В превью Labkeeper картинка стоит по центру и сохраняет свой размер. Атрибут width учитывается, пока картинка не упирается в ширину колонки; height перекрывается правилом height: auto, а стили в атрибуте style не применяются. Точный размер в PDF задают в LaTeX-проекте командой \includegraphics[width=0.5\textwidth]{chart.png} в LaTeX-сегменте, а картинку из Markdown-сегмента сервер ставит по центру шириной 0,65 текста.

Пример в редакторе: две копии логотипа с атрибутами width="100" и width="300". На GitHub они получились бы разного размера, а в превью Labkeeper ширины 100 и 300 сохранятся, пока колонка не уже картинки.

Подгонка изображения md html: адаптивные проценты (width="50%")

Для адаптивных документов и мобильного чтения идеальна подгонка изображения md html через относительные единицы измерения:

<!-- Занимает ровно половину ширины полосы чтения -->
<img src="chart.png" alt="График" style="width: 50%; max-width: 600px;" />

При таком подходе на смартфонах картинка красиво масштабируется, а на десктопе не растягивается до гигантских размытых размеров. В превью Labkeeper картинка стоит по центру и сохраняет свой размер. Атрибут width учитывается, пока картинка не упирается в ширину колонки; height перекрывается правилом height: auto, а стили в атрибуте style не применяются.

Центрирование иллюстраций и подрисуночные подписи

Чтобы выровнять уменьшенное изображение строго по центру страницы и добавить красивую подпись курсивом (по аналогии со стандартами оформления скриншотов программ в отчете ГОСТ):

<p align="center">
  <img src="architecture.png" width="60%" alt="Архитектура сервиса" /><br>
  <em>Рисунок 1 — Структурная схема микросервисов</em>
</p>

Расширенный синтаксис в Obsidian, Kramdown и Pandoc

Obsidian понимает компактный синтаксис пайпа: ![Скриншот|400](image.png), а kramdown, Pandoc и Quarto — атрибуты в фигурных скобках: ![Скриншот](image.png){width=400px}. Это не часть CommonMark и GFM, поэтому на GitHub и в превью Labkeeper размер так не меняется, а атрибуты в скобках выводятся обычным текстом.

Если картинка нужна в PDF точного размера, используйте LaTeX-проект и команду \includegraphics в LaTeX-сегменте; оба пути получить PDF разобраны в инструкции по экспорту Markdown в PDF.

Практические советы