Полный пайплайн оптимизации изображений
От громоздких оригиналов до готовых для веба ассетов — пошаговый процесс оптимизации изображений, который реально экономит трафик.
Дизайнер передаёт тебе PNG 4000x3000 прямо из Photoshop. Он весит 8 МБ. Твоей веб-странице нужно изображение шириной 800 пикселей, меньше 100 КБ, и в идеале в формате WebP.
Этот разрыв между «что у тебя есть» и «что нужно вебу» — именно то место, где большинство разработчиков теряет время. Давай исправим это с помощью правильного пайплайна.
Шаг 1: Изменение размера до целевых размеров
Самое большое сокращение размера файла даёт изменение размера. Изображение шириной 4000 пикселей, отображаемое на 800 пикселях, тратит впустую 96% своих пикселей. Это не преувеличение — это математика.
Для retina-дисплеев бери 2x от размера отображения. Если изображение рендерится на экране при 400 пикселях, изменяй размер до 800 пикселей. Не до 4000. Не до оригинала.
Типичная экономия: 4000x3000 (8 МБ) → 800x600 (400 КБ). Это 95% сокращение только за счёт изменения размера.
Шаг 2: Сжатие без видимой потери качества
После изменения размера — сжимай. Для фотографий качество JPEG между 75-85% — это золотая середина. Визуально идентично оригиналу, но значительно меньший файл.
Хитрость в том, чтобы найти порог, после которого артефакты сжатия становятся заметными. Для большинства фотографий это около 70%. Оставайся выше — и никто не заметит разницы без увеличения.
Типичная экономия: 400 КБ → 120 КБ при качестве 80%. Глаза твоих пользователей не заметят. А вот время загрузки — заметят.
Шаг 3: Конвертация в современные форматы
JPEG и PNG существуют целую вечность. WebP даёт на 25-35% меньшие файлы при том же качестве. AVIF идёт ещё дальше.
Практический подход:
- Фотографии: Конвертируй в WebP (широкая поддержка) или AVIF (лучшее сжатие)
- Скриншоты/графика: WebP или PNG в зависимости от потребности в прозрачности
- Иконки/логотипы: По возможности оставляй в SVG
Используй элементы <picture> для отдачи WebP с фолбэком на JPEG. Поддержка WebP браузерами сейчас выше 97%, но фолбэки ничего не стоят.
Шаг 4: Оптимизация SVG
SVG-файлы из дизайнерских инструментов несут кучу балласта — метаданные редактора, избыточная точность дробных чисел, ненужные группы, невидимые элементы. Типичный SVG из Illustrator содержит 30-50% мусора.
Прогони их через оптимизатор SVG и увидишь, как размеры файлов падают. Иконка в 15 КБ становится 5 КБ. Умножь это на 20 иконок на странице — и ты сэкономил 200 КБ разметки.
Шаг 5: Base64 для крошечных ассетов
Для совсем маленьких изображений (до 2 КБ) — иконки, маркеры списков, мелкие декоративные элементы — конвертация в Base64 и встраивание инлайн полностью устраняет HTTP-запрос.
Один запрос меньше > чуть больший HTML-файл. Но только для маленьких изображений. Base64-строка на 50 КБ в твоём CSS — это хуже, чем отдельный запрос.
Правило: меньше 2 КБ? Base64. Больше 2 КБ? Отдельный файл.
Реальные цифры: Пример
Начальная точка: 12 изображений товаров на странице категории.
| Этап | Общий размер | Экономия | |------|-------------|----------| | Оригинальные PNG | 45 МБ | — | | После ресайза (800px) | 2,1 МБ | 95,3% | | После сжатия (80%) | 680 КБ | 98,5% | | После конвертации в WebP | 450 КБ | 99,0% |
Это 45 МБ, превратившиеся в 450 КБ. То же визуальное качество. Страница загружается за 1,2 секунды вместо 12.
Пайплайн на практике
Для пакета изображений рабочий процесс становится механическим:
- Измени размер всех изображений до целевых размеров
- Сожми с подходящими настройками качества
- Конвертируй в WebP/AVIF
- Оптимизируй все SVG-ассеты
- Закодируй в Base64 крошечные иконки
Когда ты проделаешь это три раза, весь процесс для целой страницы изображений занимает пять минут.
Не забывай: Ленивая загрузка
Оптимизация не ограничивается размером файла. Добавь loading="lazy" к изображениям ниже первого экрана. Браузер даже не будет их скачивать, пока пользователь не прокрутит страницу ближе к ним. Бесплатная производительность.
Оптимизация изображений — не самое захватывающее занятие. Никто не пишет блог-посты о том, как он в восторге от сжатия JPEG. Но это единственное улучшение производительности с наибольшим эффектом, которое доступно большинству сайтов. Меньшие изображения означают более быстрые страницы, довольных пользователей и меньшие расходы на трафик. Прогоняй каждое изображение через пайплайн, прежде чем оно попадёт в продакшен.