Работа с изображениями
9 февраля 2026
Оглавление
- Загрузка изображений
- Форматы изображений
- Вставка изображений в статью
- Размеры и выравнивание
- Изображения-ссылки
- Подписи и галереи
- Общие ошибки
- Полный пример
Загрузка изображений
Изображения для статей хранятся в папке /img/ репозитория GitHub. Чтобы добавить изображение:
- Перейдите в репозиторий на GitHub
- Откройте папку
/img/(или создайте её, если не существует) - Нажмите "Add file" → "Upload files"
- Перетащите изображение или выберите файл
- Напишите 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-текст — описание изображения для:
- Скринридеров (доступность)
- SEO-оптимизации
- Отображения при загрузке картинки
Правила alt-текста:
| Хорошо | Плохо |
|---|---|
| |
| |
| |
Описание должно быть:
- Кратким (не длиннее 125 символов)
- Информативным (описывает, что на картинке)
- Без слов "изображение", "картинка", "фото"
Размеры и выравнивание
В Docusaurus можно управлять размерами изображений с помощью атрибутов:
Изображение с шириной:
Результат: Изображение шириной 200 пикселей
Изображение по центру:
<div style={{textAlign: 'center'}}>
</div>
Изображение с подписью:
<figure>
<figcaption>Логотип компании OWIX AI Division</figcaption>
</figure>
Результат:
Таблица с выравниванием:
| Left | Center | Right |
|:-----|:------:|------:|
|  |  |  |
Результат:
| Left | Center | Right |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
Адаптивные изображения:
Для изображений, которые должны масштабироваться:
<div style={{maxWidth: '100%', height: 'auto'}}>
</div>
Изображения-ссылки
Изображение может быть кликабельным и вести на другую страницу:
Изображение-ссылка на внешний сайт:
[](https://owix.net)
Результат: При клике на логотип откроется сайт owix.net
Изображение-ссылка на увеличенную версию:
[](/img/logo.svg)
Изображение-ссылка с подсказкой:
[](https://owix.net "Перейти на главную")
Результат: При наведении на логотип появится подсказка "Перейти на главную"
Комбинация с выравниванием:
<div style={{textAlign: 'center'}}>
[](https://owix.net)
</div>
Подписи и галереи
Подпись под изображением:
*Панель управления системой мониторинга*
Результат:
Панель управления системой мониторинга
Галерея изображений:
В Docusaurus нет встроенной галереи, но можно использовать:
<div style={{display: 'flex', gap: '10px'}}>
#width-150
#width-150
#width-150
</div>
Результат: Три изображения в ряд
Вертикальная галерея:
<div style={{display: 'flex', flexDirection: 'column', gap: '10px'}}>
#width-300
#width-300
#width-300
</div>
Маркированный список с иконками:
-  Первый шаг
-  Второй шаг
-  Третий шаг
Результат:
- Первый шаг
- Второй шаг
- Третий шаг
Общие ошибки
Ошибка 1: Неправильный путь к файлу
❌  # Неправильно: /images вместо /img
❌  # Неправильно: .. в пути
❌  # Неправильно: относительный путь
✅  # Правильно: от корня сайта
Ошибка 2: Отсутствие alt-текста
❌  # Плохо: нет описания
✅  # Хорошо
Ошибка 3: Слишком большое изображение
❌  # 5 МБ - медленная загрузка
✅  # 200 КБ - оптимизировано
Ошибка 4: Неподходящий формат
❌  # SVG для фото - плохое качество
✅  # JPG для фото - хорошее качество
Ошибка 5: Сломанная ссылка
❌  # Изображение не загружено
✅ Проверьте: файл существует в репозитории
Ошибка 6: Кириллица в названии файла
❌  # Проблемы с кодировкой
✅  # Латиница в названии
Проверка изображений:
После добавления изображения проверьте:
- Изображение отображается на локальном сервере:
npm start - Alt-текст виден при отключённых картинках
- Размер файла не превышает 500 КБ
- Путь к файлу указан правильно
Полный пример
---
sidebar_position: 5
---
# Работа с изображениями
9 февраля 2026
## Оглавление
1. [Логотип компании](#logotip-kompanii)
2. [Скриншоты](#skrinshoty)
---
## Логотип компании
Логотип OWIX AI Division в векторном формате:
Логотип также можно использовать как ссылку на главный сайт:
[](https://owix.net)
---
## Скриншоты
### Панель управления
Ниже показан скриншот главной страницы панели управления:
*Панель управления позволяет отслеживать состояние серверов в реальном времени*
### Архитектура системы
Схема архитектуры нашей системы:
<figure>
<figcaption>Общая схема архитектуры системы OWIX</figcaption>
</figure>
---
## Заключение
Правильное использование изображений делает статьи более наглядными и понятными. Всегда оптимизируйте изображения и используйте alt-текст.
---
**См. также:**
- [Форматирование Markdown](./formatirovanie-markdown)
- [Создание новой статьи](./sozdanie-novoy-stati)
- [Pull Request и проверка изменений](./pull-request-proverka-izmeneniy)