1 / 18
🖼
Графика в веб-дизайне
Форматы, цвет и оптимизация
Лекция 5 · Концептуальное проектирование сайтов
2 / 18
Главное противоречие
🎨 Качество
Изображение должно быть
максимально чётким и красивым
VS
⚡ Скорость
Файл должен быть
максимально лёгким
Задача дизайнера — найти баланс между качеством и производительностью
3 / 18
Растровая графика (Raster)
Сетка пикселей · Каждый пиксель = 1 цвет
- Аналогия: мозаика, вышивка крестиком
- При увеличении: пикселизация, «лесенки»
- Вес файла: большой (зависит от разрешения)
- Идеально для: фотографии, сложные текстуры, плавные градиенты
Форматы: JPEG, PNG, WebP, AVIF, HEIC
4 / 18
Векторная графика (Vector)
Математические формулы · Точки, линии, кривые Безье
- Аналогия: чертёж, инструкция «соедини точки»
- При увеличении: идеальная чёткость на любом экране
- Вес файла: минимальный (килобайты)
- Идеально для: логотипы, иконки, иллюстрации, UI-элементы
- Не подходит для: фотографии и реалистичные изображения
Формат: SVG (Scalable Vector Graphics)
5 / 18
Растр vs Вектор: сравнение
| Параметр | 🟠 Растр | 🟢 Вектор |
| Основа | Пиксели (матрица) | Математические формулы |
| Масштабирование | Теряет качество | Без потерь |
| Вес файла | Большой (МБ) | Малый (КБ) |
| Лучше для | Фото, текстуры, градиенты | Лого, иконки, UI |
| Retina / 4K | Нужен ×2 размер | Автоматически чёткий |
| Редактирование | Photoshop, Figma (растр) | Illustrator, Figma (вектор) |
6 / 18
Цветовые профили
#FF0000 ≠ один и тот же красный на всех экранах
Цветовой охват (Color Gamut)
- Диапазон цветов, который может отобразить устройство
- Аналогия: палитра художника — у кого-то маленькая, у кого-то огромная
- Цветовой профиль = инструкция для браузера, как интерпретировать цвета
Два главных профиля в вебе: sRGB и Display P3
7 / 18
sRGB — стандарт веба
📋 Факты
- Создан в 1996 (HP + Microsoft)
- Профиль по умолчанию в браузерах
- Поддержка: 99% устройств
⚖️ Плюсы и минусы
- ✅ Предсказуемость цветов
- ✅ Работает на любом экране
- ❌ Ограниченный охват
- ❌ Не отображает насыщенные оттенки
Базовое правило: проектируйте в sRGB
8 / 18
Display P3 — широкие цвета
📋 Факты
- Разработан Apple (на базе DCI-P3)
- iPhone, MacBook, флагманы Samsung
- Современные мониторы
⚖️ Плюсы и минусы
- ✅ На 25% больше цветов, чем sRGB
- ✅ Живые, «сочные» оттенки
- ❌ На старых экранах — тусклые цвета
- ❌ Нужно управление цветом
.hero { background: url('banner-srgb.jpg'); }
@media (color-gamut: p3) {
.hero { background: url('banner-p3.avif'); }
}
9 / 18
Формат WebP
🏷 Разработчик
Google, 2010 год. Пришёл на замену JPEG и PNG.
📦 Возможности
Сжатие с/без потерь, прозрачность (альфа), анимация.
📉 Эффективность
−30%
меньше вес по сравнению с JPEG/PNG
Поддержка: 100% современных браузеров. Новый «безопасный стандарт» по умолчанию.
10 / 18
Формат AVIF
🏷 Разработчик
Alliance for Open Media (Netflix, Google, Mozilla, Cisco). На базе кодека AV1.
📦 Возможности
Прозрачность, анимация, 10/12-бит цвет, HDR.
📉 Эффективность
−50%
меньше вес по сравнению с JPEG
Золотой стандарт 2026 года. Нет артефактов «квадратиков». Лучший для Core Web Vitals.
11 / 18
Формат SVG
- Что это: текстовый XML-файл с описанием векторной графики
- Масштабируемость: идеальная чёткость на любом экране
- Вес: килобайты (иногда < 1 КБ для иконки)
- CSS: можно менять цвет, анимировать, стилизовать
- JavaScript: интерактивные графики, карты
- Доступность: теги <title> и <desc> для скринридеров
⚠️ Обязательно: прогоняйте SVG через оптимизатор (SVGOMG) перед загрузкой на сайт. Figma генерирует раздутый код.
12 / 18
Сравнение форматов
| Формат | Тип | Прозрачность | Анимация | Когда использовать |
| JPEG | Растр | ❌ | ❌ | Устарел. Только фоллбэк. |
| PNG | Растр | ✅ | ❌ | Редко. Только если нет WebP/AVIF. |
| GIF | Растр | ✅ (1 бит) | ✅ | Устарел. Заменять на WebP/Lottie. |
| WebP | Растр | ✅ | ✅ | Стандарт де-факто. |
| AVIF | Растр | ✅ | ✅ | Золотой стандарт. HDR. |
| SVG | Вектор | ✅ | ✅ | Лого, иконки, UI. |
13 / 18
Алгоритм выбора формата
1
Логотип, иконка, простая иллюстрация?
→ SVG
2
Фото или сложное изображение?
→ AVIF
3
Нужна поддержка старых браузеров?
→ WebP
4
Нужна анимация?
→ WebP / Lottie
❌ Никогда не используйте GIF в 2026 году — огромный вес, ужасное качество, 256 цветов.
14 / 18
Тег <picture>
Прогрессивное улучшение
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Описание для доступности" loading="lazy"> </picture>
- Браузер читает сверху вниз → выбирает первый поддерживаемый формат
- loading="lazy" — откладывает загрузку до скролла (экономия трафика)
15 / 18
Инструменты оптимизации
⚠️ Никогда не загружайте картинки «как есть» из фотостока или экспорта Figma!
16 / 18
Чек-лист перед публикацией
- Иконки и логотипы → SVG (оптимизированный через SVGOMG)
- Фотографии → AVIF или WebP
- Ключевые изображения → тег <picture> с фоллбэком
- Все <img> имеют атрибут alt (доступность + SEO)
- Изображения ниже первого экрана → loading="lazy"
- Указаны width и height (предотвращение CLS)
- Цветовое пространство → sRGB для универсальности
- Декоративные фоны → через CSS, не HTML
17 / 18
Ключевые цифры
WebP vs JPEG
−30%
вес файла при том же качестве
AVIF vs JPEG
−50%
вес файла при том же качестве
Display P3 vs sRGB
+25%
больше отображаемых цветов
SVGOMG
×2–5
сокращение размера SVG-файла
Кликабельная зона
44px
минимальный размер для мобильных
CLS (сдвиг макета)
<0.1
целевой показатель Core Web Vitals
18 / 18
Итоги
- Растр — для фото, Вектор — для лого и иконок
- sRGB — стандарт веба, Display P3 — для современных экранов
- AVIF — золотой стандарт, WebP — безопасный стандарт
- SVG — масштабируемость + CSS + малый вес
- <picture> — прогрессивное улучшение форматов
- Оптимизация — Squoosh, SVGOMG, TinyPNG
СР №5: Оптимизация графики и работа с форматами для Landing Page
Срок: до начала 6-й пары (Веб-типография)