Як додати зображення в Markdown:знак оклику, alt-текст, шлях.

Синтаксис

![Alt text](path/to/image.png "Optional title")

• Alt-текст у квадратних дужках описує зображення для програм читання з екрана й показується, якщо картинка не завантажилась. Пишіть, що на картинці, а не «зображення».
• Шлях іде в круглих дужках. Якщо в ньому є пробіли, пишіть їх як %20 або візьміть шлях у кутові дужки.
• Title — необов'язковий текст у лапках, зазвичай він показується як підказка при наведенні.

Працює й посилальний стиль, він прибирає довгі адреси з тексту:

![Logo][logo]

[logo]: https://example.com/logo.png "DotMD logo"

Відносні шляхи й де лежить файл

Шлях без схеми відраховується від Markdown-файлу, а не від місця, де ви відкрили застосунок. Якщо файли розташовані так

docs/
  spec.md
  assets/
    flow.png

то зображення в spec.md — це ![Flow](assets/flow.png). З файлу на папку вище пишіть docs/assets/flow.png, а з папки нижче — ../assets/flow.png. На GitHub шлях, що починається з /, відраховується від кореня репозиторію. Зберігайте зображення поруч із документом, у папці assets, щоб під час перенесення папки переносилися й картинки.

Імена файлів зображень на серверах Linux чутливі до регістру, хоча Mac регістр не розрізняє; це часта причина, чому картинка працює локально й зникає в мережі.

Як задати розмір зображення

У самого Markdown розміру немає. Використайте HTML-тег img із шириною, а висота підлаштується за пропорціями:

<img src="assets/screen.png" alt="Settings window" width="400">

Ширина й висота задаються в пікселях, а відсоток, наприклад width="50%", працює в більшості застосунків. GitHub підтримує цей тег у README і коментарях. Деякі застосунки приймають розмір і в alt-тексті, наприклад ![Screenshot|400](assets/screen.png). Ця форма прийшла з Obsidian, і DotMD її розуміє, але інші застосунки покажуть |400 як частину alt-тексту, тому для файлу, який має працювати всюди, використовуйте HTML-тег. У комірці таблиці вертикальну риску треба писати як \|.

Вирівнювання та підписи

Вирівнювання та підписи — теж HTML. Щоб вирівняти зображення по центру, помістіть його в абзац з align:

<p align="center">
  <img src="assets/logo.png" alt="Logo" width="200">
</p>

Для підпису використайте figure із figcaption:

<figure>
  <img src="assets/flow.png" alt="Request flow" width="500">
  <figcaption>Figure 1. The request flow.</figcaption>
</figure>

Не кожен застосунок зберігає ці теги: GitHub зберігає більшість, а DotMD показує обидва. Якщо потрібен підпис, що працює всюди, поставте під зображенням рядок курсивом: *Figure 1. The request flow.*.

Клікабельне зображення та інші прийоми

Помістіть зображення всередину посилання, щоб на нього можна було натискати:

[![Build status](https://example.com/badge.svg)](https://example.com/builds)

Так роблять бейджі на початку README. Щоб показати іншу картинку в темній темі, використайте елемент picture із <source media="(prefers-color-scheme: dark)">, якщо застосунок це підтримує.

Alt-текст, розмір файлу та формати

Пишіть alt-текст так, ніби описуєте картинку по телефону: Settings window with the Sync option turned on каже більше, ніж screenshot. Для суто декоративного зображення залиште дужки порожніми, щоб програма читання з екрана його пропустила.

PNG підходить для скриншотів і діаграм, JPEG для фотографій, SVG для логотипів і лінійної графіки, і тримайте файли невеликими: скриншот на 6 МБ уповільнює README і репозиторій. Більшість застосунків показують анімовані GIF так само, як будь-яке інше зображення.

Чому зображення не показується

• Шлях неправильний. Перевірте його від папки Markdown-файлу та перевірте регістр в імені файлу.
• Немає знака оклику. Без нього вийде посилання, а не картинка.
• Неекранований пробіл у шляху.
• Локальний файл на сторінці в мережі. Шлях до файлу на вашому диску працює лише на вашому диску.
• Заблоковане зовнішнє зображення. Деякі застосунки не завантажують картинки з мережі, доки ви не дозволите.

Щоб побачити, як виглядатиме зображення, відкрийте файл у програмі, яка розбирає шляхи відносно документа. DotMD так і робить: зображення показуються не ширшими за колонку з текстом, HTML-тег із шириною враховується, а скриншот, вставлений у редакторі, зберігається в папку assets поруч із файлом. Читання безкоштовне.

Питання про зображення в Markdown

Інші запитання