Softonic

Генератор изображений Markdown

Шаг 1 / 3
Далее

Синтаксис изображения в Markdown, ![alt](src "title"), легко написать с ошибкой: пропустить скобку, забыть альтернативный текст или перепутать его с синтаксисом ссылки, и тогда документ покажет неработающий заполнитель. Этот генератор принимает URL изображения, альтернативный текст, необязательный заголовок и необязательную ссылку, а затем выдаёт Markdown как во встроенном, так и в ссылочном стиле, чтобы вы вставили тот, который подходит вашему документу.

Как создать синтаксис изображения Markdown

  1. 1

    Вставьте URL изображения

    Абсолютный URL (https://...) или относительный путь (/images/hero.png).

  2. 2

    Напишите альтернативный текст

    Что показано на изображении, в одном предложении. Обязательно для доступности.

  3. 3

    Добавьте заголовок (необязательно)

    Показывается при наведении курсора в большинстве обработчиков.

  4. 4

    Оберните в ссылку (необязательно)

    Укажите URL, чтобы изображение стало кликабельным.

  5. 5

    Скопируйте фрагмент

    Получите встроенный вывод `![alt](src)` или ссылочный стиль `![alt][ref]`.

Четыре варианта синтаксиса

Встроенный, без заголовка:

![Главное изображение продукта](/images/hero.png)

Встроенный, с заголовком:

![Главное изображение](/images/hero.png "Главное изображение, снято в октябре 2026")

Кликабельное изображение (изображение, обёрнутое в ссылку):

[![Главное изображение](/images/hero.png)](https://example.com/buy)

Ссылочный стиль (держит длинные URL за пределами абзаца):

![Главное изображение][hero]

[hero]: /images/hero.png "Главное изображение, снято в октябре 2026"

Альтернативный текст важен

  • Доступность. Программы чтения с экрана озвучивают альтернативный текст; пустой alt означает, что для незрячего пользователя изображение фактически невидимо.
  • SEO. Поисковые системы используют альтернативный текст, чтобы понять содержимое изображения. Отсутствие alt вредит трафику из поиска по картинкам.
  • Плавная деградация. Если изображение не загрузилось, пользователи видят именно альтернативный текст.

Хороший и плохой альтернативный текст

Замысел Хороший alt Плохой alt
Фото товара «Красная керамическая кружка на деревянном столе, ручка слева» «Изображение кружки»
Скриншот «Страница входа с полями e-mail, пароль и кнопками SSO» «screenshot.png»
Декоративное "" (пустой alt для чистой декорации) «декоративное изображение»
Инфографика «Столбчатая диаграмма: выручка выросла с 1 млн ₽ в 2023 году до 3 млн ₽ в 2026 году» «столбчатая диаграмма»

Подводные камни

  • Не начинайте alt со слов «Изображение», программы чтения с экрана уже сообщают, что это изображение.
  • Абсолютные и относительные пути. Относительные пути ломаются, когда документ отображается за пределами своей папки (например, в предпросмотре на GitHub). При сомнениях используйте абсолютные пути.
  • Пробелы в URL требуют кодирования: %20 вместо пробела, иначе изображение не загрузится.

Часто задаваемые вопросы

Не в чистом Markdown. Большинство обработчиков (GFM, Docusaurus, MkDocs) для задания размеров переходят на сырой HTML, <img src="..." width="400" alt="...">. Некоторые диалекты поддерживают ![alt](url =400x), но это не универсально.

Alt, это текст, который озвучивают программы чтения с экрана и который показывается, если изображение не загрузилось. Заголовок, всплывающая подсказка при наведении курсора: обычно необязательная и игнорируется на сенсорных устройствах.

Когда изображение встречается несколько раз или когда URL длинный и загромождает абзац. Ссылочный стиль сохраняет читаемость текста и сводит изменение URL к одной правке.

Да, вложение изображения в ссылку ([![alt](img)](url)), это стандартный CommonMark. Результат рендеринга, гиперссылка, оборачивающая элемент <img>.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Конвертер размера файлов

Преобразуйте значения между байтами, КБ, МБ, ГБ, ТБ и двоичными единицами IEC (KiB, MiB, GiB, TiB), свободно сочетая десятичные и двоичные единицы.

Инструмент доступен на других языках