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

Оптимизация изображений веб — это не «сжать посильнее». Это выбор формата/размера/шкалы, управление плотностями экранов, явные размеры против CLS, грамотная ленивая загрузка, генерация превью и правильная раздача из CDN для сайта. В Next.js мы используем Next/Image best practices и собственные пайплайны для массовой подготовки ассетов. Ниже — наш практический стандарт для продуктов с большим медиа-трафиком.

1) Форматы: AVIF/WebP/PNG/JPEG/SVG

Универсального формата нет. AVIF даёт лучшую компрессию для фото, WebP — сбалансированный выбор для большинства кейсов, PNG — для прозрачности/иконок без артефактов, JPEG — для ретрокомпат. Векторный SVG — идеален для логотипов/иконок, но требует «allow-лист» атрибутов и осторожность со скриптами. Мы отдаём современный формат с авто-фолбэком, а также следим за качеством (перекосы сжатием вредят восприятию).

2) Размеры и DPR: одна картинка — много плотностей

Картины мира разные: у пользователя может быть DPR 1/2/3+. Мы готовим набор размеров и плотностей, чтобы отдавать «ровно достаточно». srcset/sizes подсказывают браузеру выбор, а компонент изображения знает контекст контейнера. Для списков/карточек — ограничиваем максимальную плотность, иначе трафик улетит в космос.

• Готовим «ступени» ширин: 320/480/768/1024/1440/1920 и т. д.
• Для ретины — версии x2/x3 только там, где видны детали.
• Не забываем про «landscape/portrait» кадрирование: безопасная зона и фокус-точка.

3) Явные width/height и борьба с CLS

«Прыгающие» блоки — главный раздражитель. Мы всегда задаём width/height или соотношение сторон, используем контейнеры с фиксированной высотой до загрузки. Превью (blur-placeholder или dominant-color) закрывает «дыры» красиво, а не серым прямоугольником. В списках — одинаковые высоты карточек или скелетоны, чтобы скролл не «плясал».

4) Ленивая загрузка и приоритеты

Не всё, что на странице, нужно сразу. Мы помечаем критичные изображения как priority (герои/above-the-fold) и откладываем остальные с loading="lazy". Важно: не переборщить — «ленивая» обложка в первом экране создаст задержку. В каруселях/лентах — подгружаем наперёд 1–2 карточки, а не весь список.

5) Пайплайн подготовки и контроль качества

Мы автоматизируем ресайз/кадирование/форматы на стадии CI или через динамический ресайзер (on-the-fly) за CDN. Превью и миниатюры генерируются пакетно, семплинг/шарпинг — аккуратно, чтобы не получалась «мыльная» картинка. В каталожных проектах — контроль композиции (фокус на объекте), запрет миниатюр из исходников огромного разрешения.

Next/Image best practices

• Всегда задавайте размеры; используйте fill + родитель с соотношением сторон.
• priority — только для критичных медиа; placeholder="blur" для крупных обложек.
• CDN-лоадер/домен-лист в конфиге; строгий allow-list источников.

6) CDN и кэширование

CDN для сайта — не «просто быстрее». Он обеспечивает гео-близость, компрессию по месту, умные заголовки кэша, трансформации на лету. Мы используем длинные max-age с immutable для версионированных ассетов и короткие — для динамических. Кэш-ключ — зависит от width/format/dpr; инвалидация точечная по тегам/путям.

7) Видео и анимация

Видео — отдельная дисциплина: HLS/DASH для потокового, постер и первые секунды как «быстрый старт», авто-пауза вне вьюпорта. Короткие иллюстрации — лучше в MP4/WebM с малыми битрейтами, чем «тяжёлый» GIF. Для анимаций в UI — Lottie/SVG, а не видео, чтобы не «класть» CPU. Обязательно — субтитры и варианты без звука.

8) Доступность и альтернативы

У каждого изображения — осмысленный alt. Декоративные — пустой alt. Для графиков — текстовые резюме. В тёмной теме — отдельные версии изображений при необходимости (если смысл пропадает). Высокий контраст — не жертвуем ради «красоты».

9) Анти-паттерны

• Отсутствие width/height — «прыжки» и плохой CLS.
• Один гигантский исходник для всех экранов — трафик и лаги скролла.
• Формат PNG «на всё» — большие веса и медленные первые байты.
• Ленивая загрузка героев — визуальная задержка и чувство «тормозит».

Итог: грамотная работа с медиа — это правильные форматы, адаптив и плотности, явные размеры, продуманный лейзи-лоад и CDN с кэшем. Мы строим пайплайны, которые держат стабильные метрики и экономят трафик без потери качества. Сроки/стоимость внедрения уточняйте по контактам на сайте.