Фотографии для сайта: как сохранить качество и не замедлить мобильную страницу

Начните с того, что покупатель должен рассмотреть

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

Для карточки оборудования могут понадобиться общий вид, разъёмы, габариты и комплект поставки. Для страницы услуги — результат работы и условия, которые сложно объяснить словами. Три почти одинаковых ракурса не заменяют один полезный крупный план. Маркетолог составляет список нужных деталей, а дизайнер и разработчик подбирают способ их показать в пределах выбранного шаблона.

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

Размер на экране, пиксели и вес отвечают на разные вопросы

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

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

Общий предел «каждая картинка до 100 КБ» удобен для таблицы, но не учитывает содержание. Предмет на ровном фоне и фотография сложной фактуры сжимаются по-разному. Лучше задать ориентиры для групп и разрешить обоснованные исключения с проверкой страницы целиком.

Выбирайте формат по содержанию и месту использования

Для фотографий сравните варианты JPEG, WebP и AVIF на ваших исходниках. Для схем с тонкими линиями и надписями отдельно проверьте сохранность контуров; настройки, удачные для фотографии, могут испортить читаемость схемы. Прозрачность фона и совместимость с используемой системой публикации тоже входят в требования. Не назначайте один формат обязательным для любых материалов.

В руководстве web.dev по подготовке изображений выбор обработки связан с содержанием и местом картинки в макете. Практическое следствие для заказчика: согласовывать нужно не название расширения, а набор проверенных примеров и способ их автоматической подготовки. Изменение окончания имени файла не преобразует само изображение.

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

Повторное сохранение уже сжатой картинки может накапливать потери. Для новой обработки берите исходник или согласованный мастер-файл. Не используйте скачанное превью из старой карточки как единственный материал для нового большого баннера: недостающие детали от увеличения не появятся.

Передайте подрядчику правила кадрирования

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

Для важных рекламных изображений иногда нужны разные композиции: широкая для компьютера и более плотная для телефона. Это отдельные версии одного сообщения, а не только разные размеры файла. В документации об адаптивных изображениях различаются выбор подходящего ресурса браузером и явное управление источником через picture. Реализацию поручите разработчику; в задании опишите требуемый вид.

Текст акции лучше размещать обычным текстом страницы. Если надпись уже включена в фотографию, проверьте, можно ли её прочитать без увеличения и не исчезает ли она при обрезке. Дату, цену и условия сложнее поддерживать, когда они зашиты в картинку: исправление требует повторного экспорта. Логотип и небольшой обязательный элемент оформления оценивайте отдельно.

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

Проверьте, какую версию получает мобильный браузер

Адаптивные изображения позволяют предоставить несколько вариантов ресурса для разных условий просмотра. По описанию web.dev, srcset и sizes помогают браузеру выбрать вариант с учётом известных ему условий. Из этого не следует, что любая галерея с маленькими превью уже настроена правильно. Проверять нужно фактически загруженные ресурсы на каждой важной странице.

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

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

Главное фото и изображения ниже экрана требуют разного внимания

Главное фото должно появляться тогда, когда посетителю нужно оценить страницу. Отложенная загрузка означает, что браузер переносит получение изображения до приближения к области просмотра. Это помогает не загружать всю длинную галерею сразу, но не стоит автоматически применять такой режим к основному изображению первого экрана.

В руководстве по загрузке изображений в браузере рекомендуется не откладывать изображения, которые сразу видны пользователю, особенно потенциально крупнейший элемент первого экрана. Для заказчика критерий простой: открытие страницы не должно оставлять значимую область пустой из-за неверного приоритета. Конкретные настройки выбирает разработчик после измерения.

Проверьте и зарезервированное место под картинку. Если текст сначала занимает всю ширину, а потом резко съезжает при появлении фотографии, читать и нажимать кнопки неудобно. Сравните страницу при медленном соединении и повторном открытии. Подробный разбор показателей есть в статье о Core Web Vitals; здесь достаточно зафиксировать заметный скачок и адрес проблемного блока.

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

Сравнивайте качество на деталях, а скорость — в одинаковых условиях

Сделайте контрольный набор из нескольких разных материалов: портрет, товар на ровном фоне, фактурная поверхность и схема с мелкими подписями. На каждом заранее отметьте значимую деталь. Если после обработки она пропала, файл требует других настроек. Проверка только красивого общего плана пропускает такие дефекты.

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

Скорость проверяйте на одной странице, в одном браузере и при сопоставимом режиме сети и кеша. Несколько повторений помогут заметить нестабильность. Сохраните исходные и итоговые отчёты, не выбирайте только лучший запуск. Если ресурс стал легче, а страница всё ещё медленная, причина может лежать в других частях сайта. Перейдите к общей диагностике скорости, вместо дальнейшего ухудшения фотографий.

Подписи и альтернативный текст сохраняют смысл изображения

Подпись поясняет, на какую деталь нужно обратить внимание: «Разъём расположен под защитной крышкой» полезнее имени файла. Альтернативный текст, или alt, описывает назначение значимого изображения для человека, который его не видит. Не превращайте это поле в перечень поисковых запросов. Описание должно соответствовать конкретному кадру и соседнему тексту.

Разработчик определяет оформление и технические правила, редактор отвечает за предметную точность. Если фото показывает одну комплектацию, а текст продаёт другую, техническая оптимизация не решает проблему. Сверьте варианты товара, цвета и состав набора. Для проектов с большим каталогом назначьте сотрудника, который утверждает изображения до массовой загрузки.

Проверьте также ситуацию недоступного файла. Посетитель должен сохранить возможность прочитать характеристики, выбрать вариант и связаться с компанией. Критичные условия заказа нельзя оставлять только на картинке. Если изображение служит кнопкой или ссылкой, назначение действия должно быть понятно без угадывания по декоративному символу.

Оставьте редактору короткий регламент и исходники

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

Храните оригиналы отдельно от опубликованных вариантов и связывайте их понятными именами или идентификаторами. Через несколько месяцев может понадобиться другой кадр, новый шаблон или версия для крупного экрана. Сохранённый исходник позволит подготовить её без повторной съёмки. Заодно фиксируйте разрешение на использование изображения и ограничения, если они есть.

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

Начните с одной страницы, где качество фотографии влияет на решение клиента. Соберите исходники, отметьте нужные детали и закажите несколько вариантов обработки. Примите одновременно внешний вид на телефоне, фактическую загрузку и удобство редактора. Если нужна помощь с таким заданием, передайте ШТАБ ИТ адрес страницы и исходные изображения: по ним можно определить состав работ и критерии проверки.