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

Изображения являются важными визуальными элементами в документации. Markdown предоставляет лаконичный синтаксис для вставки и управления изображениями.

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

Встроенные изображения

Используйте формат ![альтернативный текст](URL изображения):

![Логотип Markdown](https://www.markdownlang.com/markdown-logo.png)

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

Добавьте необязательный заголовок:

![Логотип Markdown](https://www.markdownlang.com/markdown-logo.png "Официальный логотип Markdown")

При наведении курсора текст заголовка будет отображаться.

Изображения в стиле ссылок

Базовый стиль ссылок

![альтернативный текст][ссылка-на-изображение]

[ссылка-на-изображение]: https://www.markdownlang.com/image.jpg "Необязательный заголовок"

Сокращенный стиль ссылок

Когда метка ссылки совпадает с альтернативным текстом:

![Логотип Markdown][]

[Логотип Markdown]: https://www.markdownlang.com/markdown-logo.png

Типы путей изображений

Абсолютный URL

![Веб-изображение](https://www.markdownlang.com/images/photo.jpg)

Относительный путь

![Локальное изображение](./images/photo.jpg)
![Изображение в родительской директории](../images/photo.jpg)
![Изображение в той же директории](photo.jpg)

Корневой относительный путь

![Изображение корневой директории](/images/photo.jpg)

Расширенные возможности изображений

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

Обернуть изображение в ссылку:

[![Описание изображения](image.jpg)](https://www.markdownlang.com)

Результат: При клике на изображение будет выполнен переход по указанной ссылке.

Управление изображениями с помощью HTML

Указание размера

<img src="image.jpg" alt="Описание" width="300" height="200">

Выравнивание изображений

<!-- Центрирование -->
<div align="center">
  <img src="image.jpg" alt="Центрированное изображение" width="400">
</div>

<!-- Выравнивание по правому краю -->
<div align="right">
  <img src="image.jpg" alt="Изображение, выровненное по правому краю" width="300">
</div>

Адаптивные изображения

<img src="image.jpg" alt="Адаптивное изображение" style="max-width: 100%; height: auto;">

Комбинированное отображение изображений

Отображение рядом

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

Сетка изображений

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

Смешанное изображение и текст

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

Это абзац текста с изображением, расположенным слева. Текст будет обтекать изображение, создавая смешанный макет. Это может использоваться для личных профилей или представления продуктов.

<div style="clear: both;"></div>

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

Описательный текст

✅ Рекомендуется: Описать содержимое изображения
![Пользователь работает на ноутбуке в рабочем пространстве](workspace.jpg)

❌ Не рекомендуется: Бессмысленный текст
![Изображение](workspace.jpg)
![Нажмите здесь](workspace.jpg)

Функциональные изображения

✅ Рекомендуется: Объяснить функцию изображения
![Кнопка поиска](search-icon.png)
![Ссылка на репозиторий GitHub](github-logo.png)

❌ Не рекомендуется: Повторение окружающего текста
Нажмите ![Нажать](search-icon.png) для поиска

Декоративные изображения

✅ Рекомендуется: Использовать пустой альтернативный текст для декоративных изображений
![](decorative-border.png)

❌ Не рекомендуется: Ненужное описание
![Декоративный узор границы](decorative-border.png)

Распространенные форматы изображений

Веб-дружественные форматы

Формат	Применение	Особенности
JPEG	Фотографии, сложные изображения	Малый размер, сжатие с потерями
PNG	Иконки, прозрачные фоны	Сжатие без потерь, поддержка прозрачности
WebP	Современные веб-изображения	Меньший размер, лучшее качество
SVG	Векторная графика, иконки	Масштабируемость, малый размер файла
GIF	Простые анимации	Поддержка анимации, ограниченное количество цветов

Советы по выбору формата

✅ Рекомендуемое использование:
![Фото](photo.jpg)           ← JPEG для фотографий
![Иконка](icon.png)          ← PNG для иконок
![Вектор](logo.svg)          ← SVG для векторной графики
![Анимация](animation.gif)   ← GIF для простых анимаций

❌ Не рекомендуется:
![Иконка](icon.jpg)          ← JPEG не подходит для иконок
![Фото](photo.png)           ← PNG-файлы могут быть большими

Советы по оптимизации изображений

Оптимизация размера файла

1. Выбор правильного разрешения

   <!-- Рекомендуется для веб-отображения -->
   <img src="image.jpg" width="800" alt="Описание">  ← Изображение в 2x для экранов с высоким разрешением

2. Использование подходящего сжатия

   <!-- Качество JPEG: рекомендуется 70-80% -->
   ![Оптимизированное фото](optimized-photo.jpg)

3. Ленивая загрузка

   <img src="image.jpg" alt="Описание" loading="lazy">

Использование CDN и хостинга изображений

<!-- Использование CDN для ускорения -->
![Изображение с CDN](https://cdn.example.com/images/photo.jpg)

<!-- Сервис хостинга изображений -->
![Размещенное изображение](https://img.example.com/upload/photo.jpg)

Распространенные ошибки и решения

1. Ошибка пути

❌ Ошибка:
![Изображение](images/photo.jpg)    ← Путь не существует

✅ Правильно:
![Изображение](./images/photo.jpg)  ← Проверьте путь к файлу
![Изображение](/assets/photo.jpg)   ← Используйте правильный относительный путь

2. Отсутствие альтернативного текста

❌ Ошибка:
![](image.jpg)  ← Отсутствует описание

✅ Правильно:
![Описание изображения](image.jpg)

Связанный синтаксис

• Синтаксис ссылок - Создание ссылок
• HTML-синтаксис - Встраивание HTML
• Блоки кода с подсветкой - Подсветка кода

Практика

Попробуйте создать следующее:

1. Страницу с демонстрацией продуктов с несколькими изображениями продуктов
2. Технический учебник с пошаговыми скриншотами и объяснениями