Работа с изображениями

9 февраля 2026

Оглавление

1. Загрузка изображений
2. Форматы изображений
3. Вставка изображений в статью
4. Размеры и выравнивание
5. Изображения-ссылки
6. Подписи и галереи
7. Общие ошибки
8. Полный пример

---

Загрузка изображений

Изображения для статей хранятся в папке /img/ репозитория GitHub. Чтобы добавить изображение:

1. Перейдите в репозиторий на GitHub
2. Откройте папку /img/ (или создайте её, если не существует)
3. Нажмите "Add file" → "Upload files"
4. Перетащите изображение или выберите файл
5. Напишите commit message и нажмите "Commit changes"

Структура папок для изображений:

/img/
├── logo.svg              # Логотип компании
├── screenshots/          # Скриншоты
│   ├── login-screen.png
│   └── dashboard.png
└── diagrams/             # Схемы и диаграммы
    ├── architecture.svg
    └── workflow.png

Прямая ссылка на изображение:

После загрузки изображения нажмите на него правой кнопкой → "Copy image address". Получите ссылку вида:

https://raw.githubusercontent.com/itcomgroup/owix-ai-division/main/img/logo.svg

---

Форматы изображений

Формат	Применение	Преимущества	Недостатки
SVG	Логотипы, схемы, иконки	Масштабируется без потери качества, маленький размер	Не подходит для фото
PNG	Скриншоты, фото с прозрачностью	Качество, прозрачность	Большой размер файла
JPG/JPEG	Фотографии	Маленький размер	Нет прозрачности
WebP	Универсальный	Современный, сжатие	Не все браузеры поддерживают

Рекомендации:

Тип контента	Формат	Пример
Логотип	SVG	/img/logo.svg
Схема/диаграмма	SVG	/img/logo.svg
Скриншот интерфейса	PNG	/img/logo.svg
Фотография команды	JPG	/img/logo.svg
Иконка функций	SVG	/img/logo.svg

Оптимизация изображений:

Для веб-сайта важно оптимизировать изображения:

• PNG: Используйте TinyPNG (tinypng.com) для сжатия
• JPG: Сжимайте до 80-90% качества
• SVG: Удаляйте лишние метаданные через SVGOMG (jakearchibald.github.io/svgomg)
• Максимальный размер: 500 КБ на изображение

---

Вставка изображений в статью

Простое изображение:

![Alt-текст](/img/logo.svg)

Результат:

Изображение с внешней ссылки:

![Логотип OWIX](https://raw.githubusercontent.com/itcomgroup/owix-ai-division/main/img/logo.svg)

Alt-текст — описание изображения для:

• Скринридеров (доступность)
• SEO-оптимизации
• Отображения при загрузке картинки

Правила alt-текста:

Хорошо	Плохо

Описание должно быть:

1. Кратким (не длиннее 125 символов)
2. Информативным (описывает, что на картинке)
3. Без слов "изображение", "картинка", "фото"

---

Размеры и выравнивание

В Docusaurus можно управлять размерами изображений с помощью атрибутов:

Изображение с шириной:

![Логотип](/img/logo.svg#width-200)

Результат: Изображение шириной 200 пикселей

Изображение по центру:

<div style={{textAlign: 'center'}}>

![Логотип](/img/logo.svg)

</div>

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

<figure>

![Логотип OWIX](/img/logo.svg)

<figcaption>Логотип компании OWIX AI Division</figcaption>

</figure>

Результат:

Логотип компании OWIX AI Division

Таблица с выравниванием:

| Left | Center | Right |
|:-----|:------:|------:|
| ![](/img/logo.svg) | ![](/img/logo.svg) | ![](/img/logo.svg) |

Результат:

Left	Center	Right
Text	Text	Text
Text	Text	Text

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

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

<div style={{maxWidth: '100%', height: 'auto'}}>

![Скриншот](/img/logo.svg)

</div>

---

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

Изображение может быть кликабельным и вести на другую страницу:

Изображение-ссылка на внешний сайт:

[![Alt-текст](/img/logo.svg)](https://owix.net)

Результат: При клике на логотип откроется сайт owix.net

Изображение-ссылка на увеличенную версию:

[![Alt-текст](/img/logo.svg)](/img/logo.svg)

Изображение-ссылка с подсказкой:

[![Логотип](/img/logo.svg)](https://owix.net "Перейти на главную")

Результат: При наведении на логотип появится подсказка "Перейти на главную"

Комбинация с выравниванием:

<div style={{textAlign: 'center'}}>

[![Логотип OWIX](/img/logo.svg)](https://owix.net)

</div>

---

Подписи и галереи

Подпись под изображением:

![Скриншот интерфейса](/img/logo.svg)

*Панель управления системой мониторинга*

Результат:

Панель управления системой мониторинга

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

В Docusaurus нет встроенной галереи, но можно использовать:

<div style={{display: 'flex', gap: '10px'}}>

![](/img/logo.svg)#width-150
![](/img/logo.svg)#width-150
![](/img/logo.svg)#width-150

</div>

Результат: Три изображения в ряд

Вертикальная галерея:

<div style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>

![](/img/logo.svg)#width-300
![](/img/logo.svg)#width-300
![](/img/logo.svg)#width-300

</div>

Маркированный список с иконками:

- ![](/img/logo.svg) Первый шаг
- ![](/img/logo.svg) Второй шаг
- ![](/img/logo.svg) Третий шаг

Результат:

• Первый шаг
• Второй шаг
• Третий шаг

---

Общие ошибки

Ошибка 1: Неправильный путь к файлу

❌ ![](/images/logo.svg)      # Неправильно: /images вместо /img
❌ ![](/img/../logo.svg)      # Неправильно: .. в пути
❌ ![](./../../logo.svg)      # Неправильно: относительный путь
✅ ![](/img/logo.svg)         # Правильно: от корня сайта

Ошибка 2: Отсутствие alt-текста

❌ ![](/img/logo.svg)              # Плохо: нет описания
✅ ![Логотип OWIX AI Division](/img/logo.svg)  # Хорошо

Ошибка 3: Слишком большое изображение

❌ ![](/img/logo.svg)          # 5 МБ - медленная загрузка
✅ ![](/img/logo.svg)     # 200 КБ - оптимизировано

Ошибка 4: Неподходящий формат

❌ ![Фотография команды](/img/logo.svg)   # SVG для фото - плохое качество
✅ ![Фотография команды](/img/logo.svg)   # JPG для фото - хорошее качество

Ошибка 5: Сломанная ссылка

❌ ![](/img/logo.svg)      # Изображение не загружено
✅ Проверьте: файл существует в репозитории

Ошибка 6: Кириллица в названии файла

❌ ![](/img/logo.svg)         # Проблемы с кодировкой
✅ ![](/img/logo.svg)       # Латиница в названии

Проверка изображений:

После добавления изображения проверьте:

1. Изображение отображается на локальном сервере: npm start
2. Alt-текст виден при отключённых картинках
3. Размер файла не превышает 500 КБ
4. Путь к файлу указан правильно

---

Полный пример

---
sidebar_position: 5
---

# Работа с изображениями

9 февраля 2026

## Оглавление

1. [Логотип компании](#logotip-kompanii)
2. [Скриншоты](#skrinshoty)

---

##  Логотип компании

Логотип OWIX AI Division в векторном формате:

![Логотип OWIX AI Division](/img/logo.svg)

Логотип также можно использовать как ссылку на главный сайт:

[![Логотип OWIX](https://raw.githubusercontent.com/itcomgroup/owix-ai-division/main/img/logo.svg)](https://owix.net)

---

##  Скриншоты

### Панель управления

Ниже показан скриншот главной страницы панели управления:

![Панель управления](/img/logo.svg)

*Панель управления позволяет отслеживать состояние серверов в реальном времени*

### Архитектура системы

Схема архитектуры нашей системы:

<figure>

![Схема архитектуры](/img/logo.svg)

<figcaption>Общая схема архитектуры системы OWIX</figcaption>

</figure>

---

## Заключение

Правильное использование изображений делает статьи более наглядными и понятными. Всегда оптимизируйте изображения и используйте alt-текст.

---

**См. также:**

- [Форматирование Markdown](./formatirovanie-markdown)
- [Создание новой статьи](./sozdanie-novoy-stati)
- [Pull Request и проверка изменений](./pull-request-proverka-izmeneniy)
---

<div class="owix-banner owix-banner-info owix-banner-animate">
  <div class="banner-content">
    <div class="banner-icon">🐙</div>
    <div class="banner-text">
      <div class="banner-title">Редактируйте на GitHub</div>
      <div class="banner-subtitle">Просто нажмите карандаш и сохраните</div>
    </div>
    <div class="banner-arrow">→</div>
  </div>
</div>