Markdown картинки 2026: полная шпаргалка по GitHub, Notion, HackMD и Obsidian
Лень читать? Три тезиса
- Базовый синтаксис
работает везде, где есть Markdown - Управление размером картинки — на каждой платформе по-своему. Это главная грабля
- URL должен быть прямой ссылкой на файл — Google Drive или Яндекс.Диск «шарилки» не работают
Ниже — полная шпаргалка.
Базовый синтаксис
Альтернативный текст: что показать, если картинка не загрузилась; зачитывает скринридерURL: прямая ссылка на файл
С заголовком (tooltip при наведении):
Reference-style (удобно, если одна картинка используется несколько раз):
![alt][logo]
[logo]: https://example.com/image.png "Подпись"
Управление размером — главная разница
По моей проверке шести популярных платформ, все делают по-своему.
| Платформа | Синтаксис | Пример |
|---|---|---|
| GitHub | Не поддерживает Markdown, только HTML | <img src="url" width="300"> |
| Habr | HTML-тег <img>, Markdown не меняет размер |
<img src="url" width="500"> |
| HackMD | После URL =ширина x высота |
 |
| Notion | Только UI (мышью) | Подтяните угол картинки |
| Obsidian | В alt ` | ширинаили |
| Typora | HTML или style zoom | <img src="url" style="zoom:50%"> |
GitHub
GitHub не поддерживает ни одного синтаксиса ресайза в Markdown. Только HTML:
<img src="https://example.com/image.png" width="400" alt="Описание">
GitHub принимает width, height, align в <img>, но блокирует style (в целях безопасности).
Habr
Habr-редактор тоже допускает HTML для ресайза. По умолчанию картинка масштабируется по ширине колонки (~720 px). Если нужна меньше — <img src="url" width="400">. Markdown-нотация в Habr ограничивается базой  — без изменений размера.
Кстати, Habr при публикации автоматически прокси́рует внешние картинки в habrastorage. Это удобно: ваша ссылка живёт в статье, даже если оригинал умер.
HackMD
HackMD использует собственное расширение: после URL добавляете =ширина x высота:
Только ширина (авто по высоте):
Это HackMD-specific — в других местах не работает.
Obsidian
В Obsidian размер пишется в alt-тексте:
Также поддерживается wiki-style линки на локальные файлы:
![[image.png|300]]
Notion
Notion импортирует базовый Markdown, но ресайз — только мышью через UI. Синтаксиса нет.
Ещё: Notion загружает внешние картинки к себе на CDN (prod-files-secure.s3.us-west-2.amazonaws.com). Источник становится неважен после импорта, но и обновлять картинку через оригинал уже не получится.
Совместимость разных источников
Не каждая ссылка работает на каждой платформе:
| Источник | GitHub | Habr | HackMD | Notion | Obsidian | Typora |
|---|---|---|---|---|---|---|
| Хостинг картинок (lpic.cc, ImgBB) | Работает | Работает | Работает | Работает | Работает | Работает |
| Картинка в репозитории GitHub | Работает | Работает | Работает | Работает | Настраивается | Работает |
| Google Drive / Яндекс.Диск «шарилка» | Нет | Нет | Нет | Авто-перезалив | Нестабильно | Нет |
| Dropbox sharing link | Нет | Нет | Нет | Авто-перезалив | Нестабильно | Нет |
| Base64 inline | Да | Нет | Да | Нет | Да | Да |
Главное: облачные «шарилки» (Drive, Dropbox, Яндекс.Диск) — не прямые ссылки на файл. Большинство Markdown-рендереров их не откроют. Нужен image hosting с честной прямой ссылкой на .jpg/.png.
Hotlinking: пустят ли вашу картинку «в гости»
Hotlinking — использование чужой картинки на своём сайте по прямой ссылке. Некоторые сервисы это блокируют (экономят трафик).
| Сервис | Hotlinking разрешён | Комментарий |
|---|---|---|
| Image hosting (lpic.cc, ImgBB) | Да | Основная функция |
| GitHub repos | Да (с лимитами) | При высокой нагрузке могут рейт-лимитить |
| Imgur | Частично (в РФ часто недоступен) | Блокировки провайдеров РФ |
| WordPress.com | Нет | Проверяет Referer |
| Большинство сайтов | Нет | Обычно блок на внешние ссылки |
Хорошие практики технического письма
Несколько правил, которые отделяют техническую статью от «картинка.jpg».
Alt-текст — не отписка
Плохо:
Хорошо:
Зачем alt нужен:
- Резерв, если картинка не загрузилась
- Скринридер читает его (доступность)
- Поисковики индексируют по нему (SEO — важно для Яндекс.Картинок)
Имена файлов
Плохо:
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg
Хорошо:
github-actions-workflow-config.png
npm-install-success-output.png
Через полгода сами не поймёте, что это за Screenshot-2026....
Формат
- Скриншоты, UI: PNG (чёткий текст)
- Фото, сложная графика: WebP или JPEG (меньше вес)
- Иконки, логотипы, диаграммы: SVG (не замыливается при зуме)
- Демо операций в движении: GIF или WebP-анимация (держите < 5 МБ)
Жать перед загрузкой — всегда
Вне зависимости от формата. Инструменты:
- Squoosh — от Google, в браузере
- TinyPNG — PNG/JPEG пакетно
- ImageOptim (macOS) — drag & drop с сохранением качества
Кросс-платформенный workflow
Если файл должен одинаково работать на всех платформах:
- Синтаксис: только базовый
, без платформенных расширений - Размер: подгоните до загрузки (600–800 px ширина), не полагайтесь на синтаксис
- Хостинг: lpic.cc или аналог с честной прямой ссылкой; не Google Drive
- Формат: PNG или WebP — максимальная совместимость
Учтите, что у lpic.cc нет on-fly ресайза и API-пакетной загрузки — для автоматизации смотрите в сторону Cloudinary или Imgur API (с поправкой на доступность в РФ).
Частые вопросы
Q1. Можно ли центрировать картинку в Markdown?
Чистый Markdown не умеет. GitHub — через HTML: <p align="center"><img src="url" width="400"></p>. HackMD поддерживает {:center}. Notion и Obsidian — через UI. Habr по умолчанию центрирует картинки, вставленные через редактор.
Q2. Можно ли использовать локальные картинки?
Да, через относительный путь: . Работает в Typora, Obsidian, VS Code. Для публикации в веб нужна загрузка на хостинг и прямая ссылка.
Q3. Почему картинка в GitHub README не показывается?
Три частых причины: (1) URL не прямая ссылка, а страница с авторизацией; (2) источник блокирует hotlink с GitHub; (3) относительный путь не соответствует структуре репо.
Q4. HackMD-синтаксис =300x работает в Notion?
Нет. =ширина x высота — HackMD-расширение. В GitHub, Notion, Obsidian не сработает. Для кросс-платформенности — готовьте картинку нужного размера до загрузки или используйте HTML <img> (GitHub и HackMD его поддерживают).
Q5. В чём разница между прямой ссылкой и ссылкой-шарилкой?
Прямая — URL, ведущий непосредственно на файл, обычно .jpg/.png/.webp на конце. Открывается в браузере как картинка. Шарилка — страница-обёртка (Google Drive, Яндекс.Диск), которая содержит картинку, но сама по себе HTML. Markdown-рендеру нужна прямая ссылка.