Изображения в Markdown

Изображения делают ваш контент более привлекательным и помогают проиллюстрировать ваши идеи. Markdown предоставляет простой синтаксис для добавления изображений, хотя иногда вам может понадобиться HTML для более продвинутых функций.

Основной синтаксис изображений

Основной синтаксис для изображений в Markdown похож на ссылки, но с восклицательным знаком в начале: 

![Альтернативный текст](image-url.jpg)
![Локальное изображение](./images/photo.jpg)
![Внешнее изображение](https://example.com/image.jpg)

Изображения с заголовками

Вы можете добавить заголовки, которые появляются при наведении курсора на изображение: 

![Альтернативный текст](image.jpg "Заголовок изображения")

Лучшие практики альтернативного текста

Альтернативный текст крайне важен для доступности и SEO:

1. Будьте описательными

❌ Не помогает: 

![Изображение](photo.jpg)
![Картинка](pic.png)

✅ Описательно: 

![Женщина кодит на ноутбуке в кофейне](coding-coffee.jpg)
![Столбчатая диаграмма показывает рост продаж с 2020 по 2024 год](sales-chart.png)

2. Сохраняйте краткость

❌ Слишком длинно: 

![Это действительно длинное описание изображения, показывающего человека, сидящего за компьютером в том, что кажется современным офисным помещением с белыми стенами и большими окнами](office.jpg)

✅ Краткое: 

![Человек работает за компьютером в современном офисе](office.jpg)

3. Не включайте "Изображение" или "Картинка"

❌ Избыточно: 

![Изображение собаки, играющей в парке](dog.jpg)

✅ Прямо: 

![Собака играет в парке](dog.jpg)

Справочные изображения

Как и ссылки, вы можете использовать справочный синтаксис для изображений: 

![Альтернативный текст][image-reference]  

[image-reference]: image.jpg "Дополнительный заголовок"

Пример

Вот наш логотип: ![Логотип компании][logo]

А вот скриншот: ![Скриншот приложения][screenshot]

[logo]: /images/logo.png "Логотип моей компании"
[screenshot]: /images/app.png "Скриншот панели приложения"

Пути к изображениям и URL

Локальные изображения

![Локальное изображение](./images/photo.jpg)
![Относительный путь](../assets/icon.png)
![Абсолютный путь](/public/images/banner.jpg)

Внешние изображения

![Внешнее изображение](https://example.com/image.jpg)
![Фото с Unsplash](https://images.unsplash.com/photo-123/photo.jpg)

Распространенные паттерны

Изображение с подписью

![Командная встреча в конференц-зале](meeting.jpg)
*Рисунок 1: Еженедельная командная встреча для обсуждения вех проекта*

Изображения "До/После"

## До
![Старый дизайн сайта](old-design.png)

## После
![Новый дизайн сайта](new-design.png)

Пошаговые инструкции

1. Нажмите на иконку настроек
   ![Иконка настроек в правом верхнем углу](settings-icon.png)

2. Выберите "Настройки аккаунта"
   ![Пункт меню настроек аккаунта](account-menu.png)

3. Обновите информацию вашего профиля
   ![Форма профиля с редактируемыми полями](profile-form.png)

Галерея изображений

## Скриншоты проекта

![Главная страница](homepage.png) ![Панель управления](dashboard.png) ![Настройки](settings.png)

Устранение проблем с изображениями

Распространенные проблемы

  1. Изображение не отображается: Проверьте путь к файлу и имя файла

  2. Иконка сломанного изображения: Убедитесь, что URL изображения доступен
  3. Изображение слишком большое: Измените размер или сожмите изображение
  4. Неправильный формат: Убедитесь, что браузер поддерживает формат изображения

Тестирование изображений

  • •
    Предварительный просмотр в вашем Markdown редакторе

  • •
    Проверьте в разных браузерах
  • •
    Проверьте на мобильных устройствах
  • •
    Тестируйте при медленном интернет-соединении

Продвинутые техники

Ссылки-изображения

Комбинируйте изображения со ссылками: 

[![Нажмите для просмотра в большем размере](thumbnail.jpg)](full-size.jpg)

Изображения — мощный способ улучшить ваши Markdown документы. Используйте их разумно для поддержки вашего контента и улучшения пользовательского опыта!

Нужно выделить текст в вашем контенте? Изучите форматирование зачеркиванием далее.