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>.

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

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор конфигурации webpack

Создайте webpack.config.js для webpack 5 по короткой форме: задайте entry, папку вывода и режим, затем включите TypeScript, Babel, загрузчик CSS, HtmlWebpackPlugin и сервер разработки.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

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