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

Сначала вывод: Медиатека — самый неуправляемый актив зарубежного сайта. На сайте, работающем два года, в медиатеке обычно от 800 до 3 000 файлов, и 30–50% из них ни разу не использовались ни на одной странице. Для порядка нужно всего три вещи: правила именования, базовые требования к размеру и ежеквартальная проверка. Первые две делаются один раз, третья занимает два часа в квартал.

1. Сначала задайте правила для имён файлов — это самый дешёвый уровень порядка

Медиатека выходит из-под контроля не за один день. Всё начинается с первого IMG_2043.jpg— и однажды, когда нужно заменить фото товара или клиент спрашивает об источнике лицензии на снимок, выясняется, что никто не может ответить.

Четыре признака беспорядка, и цена у них разная:

Признак беспорядка	Как это выглядит	Цена
Имена файлов без смысла	Куча дат и порядковых номеров	Ничего не найти, при замене приходится перебирать вручную
Путаница версий	У одного имени три версии файла	На сайт попадает не та версия
Гора неиспользуемых файлов	Загружены, но ни разу не использованы	Занимают место, замедляют бэкап, утяжеляют миграцию
Источник лицензии неясен	Непонятно, откуда взялось изображение	При жалобе клиента или платформы нечем подтвердить права

В правилах именования всего четыре поля, соединяются по порядку через дефис: категория, модель, сцена, версия.

Поле	Как писать	Пример	Пояснение
Категория	Строчные английские слова	cnc-machine	Совпадает с категорией товара, не придумывайте свои слова
Модель	Оставляем как есть, единообразно в верхнем или нижнем регистре	gx-620	Полностью совпадает с моделью на странице товара
Ситуация	3–5 строчных английских слов	workshop-install-02	Описывает содержание, а не ощущения дизайнера
Версия	Две цифры	v02	Увеличивается только при содержательном изменении

Разница видна при сравнении — один и тот же снимок, два способа именования:

Способ именования	Имя файла	Находимость	Безопасность при миграции
Исходное имя с камеры	IMG_2043.jpg	По имени файла невозможно понять содержание	Переименование рвёт ссылки, высокий риск
Именование по правилам	cnc-machine-gx620-workshop-install-v02.webp	По имени файла можно найти нужное	Есть номер версии, замена не конфликтует

У правил именования есть одно сопутствующее требование, которое легко упустить:если имя файла уже на сайте, менять его нельзя. Смена имени файла — это смена URL, старый адрес перестанет работать. Когда нужно заменить содержимое, создайте новый файл с увеличенным номером версии, обновите ссылку на странице и оставьте правило перенаправления для старого имени. В чек-листе приёмки crater /site/ правила именования медиафайлов указаны как пункт, обязательный к подтверждению до запуска, — именно потому, что этот уровень правок самый дешёвый, а исправлять потом дороже всего.

2. Размер и формат: сначала базовые требования, потом сжатие

«Картинка слишком большая» — это не инструкция. Нужны конкретные цифры. Таблицу ниже можно сразу перенести в регламент: целевой вес определяется по ширине показа.

Назначение изображения	Ширина показа	Целевой вес	Рекомендуемый формат
Главное изображение первого экрана	1 600–1 920 пикселей	150–300 КБ	WebP или AVIF
Иллюстрация в тексте	800–1 200 пикселей	60–150 КБ	WebP
Миниатюра товара	400–600 пикселей	20–60 КБ	WebP
Иконки и линейная графика	Любая, масштабируется по необходимости	5–20 КБ	SVG
Изображения с прозрачностью	До 800 пикселей	40–120 КБ	WebP или PNG

Выбор формата не может быть универсальным: у пяти распространённых форматов своя область применения.

Формат	Степень сжатия	Прозрачность	Когда подходит	Где не рекомендуется
JPEG	Средний	Не поддерживается	Фотографии, где нужна максимальная совместимость	Линейная графика, скриншоты
WebP	Высокий	Поддерживается	Основной формат для фотографий и изображений товаров	Крупные изображения первого экрана, где нужно максимальное сжатие
AVIF	Максимальная	Поддерживается	Крупные изображения первого экрана, фотографии с высокими требованиями к качеству	Случаи, где нужна поддержка старых браузеров
PNG	Низкая	Поддерживается	Скриншоты и линейная графика, где нужна потеря без потерь	Фотографии — вес вырастет в несколько раз
SVG	Максимальная	Встроенная	Иконки, блок-схемы, простые линейные рисунки	Сложные фотографии

Адаптивные изображения — ещё один обязательный пункт. Если отдавать одну и ту же картинку телефону и десктопу в разных размерах, можно сэкономить больше половины трафика.

Точка перелома	Ширина вьюпорта	Рекомендуемая ширина отдачи	Пояснение
Телефон	Меньше 768 пикселей	640 пикселей	Десктопный размер не отдаётся
Планшет	768–1 024 пикселя	1 024 пикселя	Учитывает и горизонтальную, и вертикальную ориентацию
Десктоп	1 024–1 600 пикселей	1 600 пикселей	Основной вариант для большинства страниц
Большой экран	Больше 1 600 пикселей	1 920 пикселей	Только для главного изображения первого экрана

О видео нужно сказать отдельно. Не ставьте видеофайл прямо на место главного изображения и не размещайте фоновое видео первого экрана на своём хостинге.

Назначение видео	Где размещать	Почему
Демонстрация товара, инструкция по установке	Сторонняя видеоплатформа, встраивание на страницу	Экономит трафик, есть встроенный плеер и поддержка субтитров
Репортаж с выставки, имидж компании	Сторонняя видеоплатформа, встраивание на страницу	Есть внешние ссылки и переходы
Фоновая анимация первого экрана	Заменить статичным изображением с лёгкой анимацией	Видео заметно замедляет отрисовку первого экрана
Демонстрация действий короче 10 секунд	Перевести в анимированное изображение или последовательность кадров	Вес обычно меньше, чем у видео

Когда этот уровень не подходит: Если сайт в основном рассчитан на сети с достаточной пропускной способностью и посетители заходят преимущественно с десктопа (например, закупщики промышленного оборудования чаще всего смотрят его из офиса), сжатие главного изображения первого экрана до 150 КБ и меньше снизит чёткость и помешает прочитать табличку с характеристиками. В этом случае можно ослабить требования до 300–400 КБ и в первую очередь обеспечить чёткость текста и шкал. Критерий такой: когда посетителю нужно разглядеть мелкий текст на изображении, чёткость важнее веса.

Три. Метаданные: в alt — факты, у title и подписи свои задачи

Чаще всего в метаданных изображения портят alt. У него две задачи: показать текст, если картинка не загрузилась, и описать содержимое для скринридеров и поисковых систем. Главный принцип — описывать факты, а не набивать ключевые слова.

Как писать	Пример	Оценка
Набивать ключевые слова	cnc machine cnc machining china cnc factory	сочтут переспамом, описания нет
оставить пустым	Нет	значит отказаться от информационного слота
описать факт	сборка шпинделя обрабатывающего центра в цехе	верно, работает самостоятельно
с моделью и сценой	сборочная линия обрабатывающего центра GX-620, цех	верно, информации больше

У трёх атрибутов разные задачи, не путайте их: alt описывает, что на картинке, title появляется только при наведении мыши и почти не влияет на поиск, а подпись дополняет связь изображения с текстом.

Атрибут	Где отображается	Влияние на поиск	Рекомендуемая длина
alt	при сбое загрузки, скринридеры	есть, как сигнал о содержимом	15–40 знаков
title	подсказка при наведении	минимальное, не стоит тратить силы	можно опустить
Подпись	часто видна под изображением	есть, как часть текста	20–60 знаков

EXIF нужно чистить — это не вопрос формата, а вопрос соответствия требованиям:

Поле EXIF	Риск	Действие
GPS-координаты	выдают точное расположение завода и цеха	удалять всегда перед загрузкой
Устройство съёмки и серийный номер	можно связать с конкретным оборудованием и человеком	рекомендуется удалять
Время съёмки	обычно безвредно	можно оставить
Поля авторских прав и автора	может служить подтверждением прав	рекомендуется оставить данные компании

Удаление метаданных не требует особых навыков: в большинстве графических редакторов есть функция пакетной очистки. Плата за это — несколько секунд перед каждой загрузкой. Но если фотография с производства с привязанными GPS-координатами попадёт в открытый доступ, вы раскроете местоположение завода, а это уже необратимая потеря.

Четыре: у ленивой загрузки есть границы — изображение первого экрана грузить лениво нельзя

Ленивая загрузка экономит трафик, но в неправильном месте тормозит первый экран. Критерий простой:Изображения в видимой области первого экрана не грузите лениво, особенно главную картинку, от которой зависит метрика отрисовки первого экрана.

Элемент	Ленивая загрузка	Причина
Главное изображение первого экрана	нет, задать высокий приоритет	по нему считается метрика отрисовки первого экрана
миниатюры товаров на первом экране	Нет	попадают в область просмотра вместе с главной
фото со второго экрана и дальше	Да	вне начальной области просмотра
мелкие картинки в подвале и сайдбаре	Да	обычно видны только после прокрутки
Видеовставки	да, заменить заглушкой	прямая вставка подгружает много скриптов

Ещё один момент, который легко упустить: у изображений нужно жёстко задавать ширину и высоту. Без них браузер не знает, сколько места зарезервировать до загрузки картинки, и страница дёргается во время загрузки: пользователь читает абзац, а тот внезапно съезжает вниз — особенно заметно на мобильных. На практике следят за метрикой сдвига макета: у хорошо настроенных сайтов она обычно в пределах 0,1.

Пять: авторские права и лицензии — четыре источника материалов, четыре набора требований

Самый опасный момент в работе с медиатекой — не технологии, а права. Четыре источника требуют совершенно разного подхода:

Источник материала	Необходимые документы	Типичные риски
Скачивание из фотобанка	Описание условий лицензии и история скачиваний	Использование за пределами лицензии, например в материалах для перепродажи
Съёмка на объекте клиента	Письменное разрешение клиента с указанием цели и срока	Использование производственной линии клиента без разрешения, жалоба клиента
Фото продукции от поставщика	Письменное согласие поставщика на использование	Поставщик одновременно работает с конкурентом, фото повторяются
Изображения, созданные ИИ	Запись инструмента и даты генерации	Сгенерированный контент сильно напоминает чужие работы

Съёмка на объекте клиента — категория, которую упускают чаще всего. Разрешение не должно быть сложным: достаточно трёх пунктов — где можно использовать (сайт, соцсети, печатные материалы), на какой срок и можно ли показывать производственную линию и шильдики на оборудовании. Отдельно проверьте сторонние объекты, которые могут попасть в кадр:

Элемент в кадре	Риск	Действие
Узнаваемый логотип	Возможен спор о нарушении прав на товарный знак	Избегать при съёмке или обработать при ретуши
Узнаваемое лицо сотрудника	Затрагивает право на изображение	Получить согласие человека или размыть лицо
Детали технологии на линии клиента	Может раскрывать коммерческую информацию клиента	Согласовать с клиентом до публикации
Шильдик оборудования конкурента	Легко принять за признаки партнёрства	Не допускать в кадр ни при каких условиях

Границы использования изображений, созданных ИИ, тоже нужно прописать в регламенте. Надёжный подход такой: их можно применять для концептуальных схем, фоновых иллюстраций и абстрактной графики; нельзя — там, где нужно подтвердить подлинность: реальные съёмки завода, протоколы испытаний, сертификаты, фото реальной продукции. В первом случае риск в том, что картинка «выглядит ненастоящей», во втором — что вас обвинят в подделке. Это разные по своей природе риски.

Шесть. Матрица повторного использования и ритм работы с медиатекой

Одна съёмка должна закрывать пять каналов, а не отправляться в медиатеку после единственной публикации на сайте. Заранее заданные размеры обрезки избавят от спешной переделки картинок каждый раз.

Канал	Частые размеры	Пропорции обрезки	Примечание
Первый экран сайта	от 1 600 до 1 920 пикселей в ширину	16 к 9 или 21 к 9	Главный объект — по центру со смещением влево
Иллюстрация в тексте на сайте	от 800 до 1 200 пикселей в ширину	4 к 3 или 16 к 9	Оставить место для подписи
Рассылка	600 пикселей в ширину	3 к 2	Рассмотреть белый фон
Посты в соцсетях	1 200 пикселей в ширину	по одному набору 1 к 1 и 4 к 5	Отдельная композиция для вертикального формата
Выставки и коммерческие предложения	300 dpi для печати	По макету	Нужно сохранить исходный файл отдельно

Работа с медиатекой идёт раз в квартал, по два часа, и включает три задачи:

Срок	Действие	Критерий оценки
Ежеквартально	Сверка списка неиспользуемых файлов	Файлы, не использованные два квартала подряд, попадают в список кандидатов на удаление
Ежеквартально	Проверка правил именования	Выборочная проверка 50 новых файлов, доля соответствующих правилам — не ниже 90%
Ежеквартально	Поиск больших файлов	Каждое изображение тяжелее 500 КБ проверить, действительно ли оно нужно
Раз в полгода	Пересмотр подтверждающих документов	По каждому фото с объекта клиента и из фотобанка убедиться, что документы по-прежнему в силе
Ежегодно	Учебное архивирование и перенос	Медиатеку можно полностью выгрузить и восстановить в тестовой среде

Правила удаления должны быть жёсткими, чтобы не было удаления «по ощущению, что не нужно»:

Статус файла	Условие	Что делать
В работе	Используется хотя бы на одной странице	Оставить, вести версионный учёт
Наблюдать	Два квартала подряд не используется, но есть подтверждение прав	Перенести в архив, не удалять
Можно удалить	Не используется, нет подтверждения прав или источник неизвестен	Удалить после проверки отсутствия внешних ссылок
Обязательно сохранить	Используется в печатных материалах, коммерческих предложениях, на стендах выставок	Сохранять исходный файл, даже если сайт его не использует

Про последнюю строку часто забывают. Фото со стенда убрали с сайта, но оно ещё печатается в каталоге и на стенде и может понадобиться в следующем году — а удалишь, придётся переснимать. Решение об удалении нельзя принимать только по принципу «используется ли на сайте» — нужно смотреть, не используется ли файл за пределами сайта.

Важно отметить: если медиатека сайта не превышает 200 файлов и ежемесячно добавляется не более 20, эту схему можно упростить — оставить только правила именования и проверку больших файлов, а ежеквартальный обход заменить на раз в полгода. Интенсивность работы с контентом должна соответствовать объёму активов, не стоит выстраивать процессы ради процессов. О связи изображений с производительностью страниц можно прочитать в /insight/ вместе с материалами по производительности.

FAQ: частые вопросы

Нужно ли переводить все изображения в WebP?

Не все, но основной формат стоит сменить на WebP. Схема такая: исходные файлы сохраняем (обычно в формате без потерь), при публикации на сайте единообразно выводим WebP, а для тех немногих мест, где нужна максимальная совместимость, оставляем JPEG как запасной вариант. PNG используем только для скриншотов и линейной графики, где нужна точность без потерь; для фотографий PNG не подходит — объём вырастет в разы. При конвертации следите за параметрами качества: у некоторых инструментов качество по умолчанию занижено, параметр обычно называется «качество» или «уровень сжатия». Перед публикацией возьмите по три изображения каждого назначения и сравните.

Какой размер подходит для одного фото товара?

Разбивайте по ширине отображения, не задавайте одно число для всех. Миниатюры — 400–600 пикселей в ширину, 20–60 КБ; главное фото в карточке товара — 1 600–1 920 пикселей в ширину, 150–300 КБ; фото товара с прозрачным фоном — до 800 пикселей, 40–120 КБ. Критерий простой: может ли посетитель разглядеть шильдик и деления шкалы. Если шильдик с параметрами из-за сжатия становится нечётким, верхний предел объёма нужно поднять. Для фото промышленных товаров чёткость обычно важнее объёма.

Как написать alt, чтобы его не сочли переспамом ключевыми словами?

Напишите одно законченное описательное предложение: что на изображении и в какой ситуации, длиной 15–40 знаков. Проверить просто: прочитайте alt отдельно — если звучит как нормальная фраза, всё в порядке; если как набор слов — есть проблема. Ещё три случая, которых стоит избегать: одна и та же строка alt для всех изображений, повтор одного и того же слова-категории в alt три раза и более, полное несоответствие alt содержанию изображения. У декоративных иконок alt можно оставить пустым — это допускается.

Видео на свой сайт или на стороннюю платформу?

Лучше разместить на сторонней видеоплатформе, а на странице дать ссылку через встраивание или заглушку с загрузкой по клику. Причин три: собственный хостинг видео заметно нагружает канал; плеер и субтитры требуют отдельной разработки; сторонняя платформа сама приносит трафик из поиска и рекомендаций. Единственное исключение — очень короткая зацикленная анимация (до 10 секунд): её можно перевести в GIF или последовательность кадров и поставить прямо на странице. При встраивании обязательно используйте заглушку и не давайте скрипту видео грузиться при открытии страницы, иначе первый экран будет тормозить.

Можно ли сразу использовать на сайте фото, снятые у клиента?

Нельзя без письменного разрешения. В разрешении достаточно указать три вещи: объём использования (сайт, соцсети и печатные материалы перечислить отдельно), срок использования и допустимо ли показывать производственные линии и шильдики оборудования. Одновременно проверьте, что в кадре: узнаваемые логотипы убрать или обработать, узнаваемые лица сотрудников — получить их согласие или размыть, детали технологии на производстве клиента согласовать с клиентом до публикации. Если клиент работает с конкурентом, это фото лучше не использовать, чтобы потом не пришлось объясняться.

Медиатека разрослась — можно просто всё разом почистить?

Удалять всё подряд не стоит. Правильный порядок — сначала разобраться, потом чистить: выгрузите таблицу соответствия медиафайлов и ссылок на них и отметьте, на каких страницах используется каждый файл; отдельно выпишите файлы, на которые не ссылались два квартала подряд; затем по одному проверьте, есть ли разрешение и не попал ли файл в печатные материалы или на стенды. Удалять можно только те файлы, которые одновременно не используются на сайте, не имеют разрешения или имеют неясное происхождение и не задействованы за пределами сайта; остальные перенесите в архив. Перед чисткой обязательно сделайте полную резервную копию.

В заключение

Наведение порядка в медиатеке кажется мелочью, но оно затрагивает три серьёзных вещи: скорость страниц, читаемость для поиска и юридическую чистоту. Один стандарт именования улучшает все три, а затраты — это один раз разработать правила и потом просто их соблюдать.

На большинстве сайтов проблемы медиатеки можно решить — их просто никогда не считали чем-то, что нужно решать. И только при смене сайта, переезде или когда клиент спрашивает, откуда взято разрешение, выясняется, что цена вопроса куда выше, чем время, потраченное на правила.

Запомнить просто: имя файла решает, найдут ли его; размер решает, быстро ли он грузится; разрешение решает, можно ли им вообще пользоваться — и всё это нужно сделать правильно уже при первой загрузке.