Перейти к основному содержимому

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

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

📸 Поддерживаемые форматы​

Docusaurus поддерживает все основные форматы изображений:

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

🖼️ Примеры разных форматов​

PNG - Логотип с прозрачностью​

PNG идеален для изображений с прозрачным фоном и четкими краями.

React Logo

![React Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png)

JPG - Фотография​

JPEG отлично подходит для фотографий благодаря хорошему сжатию.

Mountain Landscape

![Mountain Landscape](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80)

SVG - Векторная графика​

SVG масштабируется без потери качества и имеет малый размер файла.

Vue Logo

![Vue Logo](https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg)

GIF - Анимированное изображение​

GIF поддерживает анимацию (хотя здесь используется статичное изображение).

GitHub Logo

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

WebP - Современный формат​

WebP обеспечивает лучшее сжатие при сохранении качества.

Modern Image

![Modern Image](https://storage.googleapis.com/web-dev-uploads/image/admin/BhYEWdaqVSy3sO8iNhYR.webp)

🎨 Способы отображения​

Стандартное изображение​

Обычная вставка изображения через markdown:

TypeScript Logo

Изображение с HTML атрибутами​

Можно использовать HTML для более гибкого управления:

Node.js Logo 
<img src="url" alt="Node.js Logo" width="300" />

Изображение с выравниванием по центру​

HTML5 Logo
<div style={{textAlign: 'center'}}>
  <img src="url" alt="HTML5 Logo" width="200" />
</div>

🔍 Увеличение изображений​

Благодаря плагину docusaurus-plugin-image-zoom, изображения можно увеличивать по клику!

Попробуйте!

Кликните на любое изображение выше - оно откроется в полноэкранном режиме с возможностью увеличения.

📐 Изображения в таблицах​

Изображения можно использовать в таблицах для создания галерей:

JavaScriptTypeScriptReact
JSTSReact
Язык программированияНадмножество JavaScriptБиблиотека для UI

🎯 Адмонишены с изображениями​

Примечание с логотипом

Docker Logo

Изображения можно встраивать внутри адмонишенов для большей наглядности.

🌐 Использование локальных изображений​

Для локальных изображений используйте относительные пути:

<!-- Из папки static/img/ -->
![Local Logo](/img/logo.svg)

<!-- Относительно текущего файла -->
![Relative Image](./images/screenshot.png)

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

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

<picture>
  <source media="(min-width: 768px)" srcset="image-large.jpg" />
  <source media="(min-width: 480px)" srcset="image-medium.jpg" />
  <img src="image-small.jpg" alt="Адаптивное изображение" />
</picture>

💡 Рекомендации​

  1. Оптимизация: Сжимайте изображения перед загрузкой
  2. Alt текст: Всегда добавляйте описательный alt текст
  3. Формат:
    • PNG для прозрачности и четких краев
    • JPG для фотографий
    • SVG для векторной графики
    • WebP для современных браузеров
  4. Размер: Используйте изображения подходящего размера
  5. Локальное хранение: Важные изображения храните локально в static/img/

🖼️ Галерея технологий​

JavaScriptTypeScriptReactVueNode.jsDocker

Все изображения поддерживают:

  • ✅ Увеличение по клику (zoom)
  • ✅ Ленивую загрузку (lazy loading)
  • ✅ Адаптивность
  • ✅ Темную/светлую тему