Сайты и интернет-торговля
Сценарий первый: фото товара 4000 пикселей для карточки 800 пикселей. Браузер качает в 25 раз больше, чем показывает. Ресайз до 1000 пикселей — и страница летает, а покупатели не уходят. Разница в скорости видна невооружённым глазом, особенно на мобильном интернете.
Сценарий второй: единообразие каталога. Двадцать фото в разных разрешениях выглядят неряшливо. Пакетный ресайз к одной ширине — и каталог как с обложки. Аккуратные превью одинакового размера выглядят профессионально и повышают доверие к магазину.
Сценарий третий: требования CMS. Многие движки просят точные размеры превью. Подготовил сам — загрузил без сюрпризов в виде автоматической обрезки. Размеры превью и слайдера обычно прописаны в документации темы — уточните их заранее. Сценарий четвёртый: retina-экраны. Готовим двойной размер от отображаемого — и картинки чёткие на всех устройствах, от старого ноутбука до нового смартфона. Четырёхкратный запас уже не даст видимого выигрыша, а вес файла начнёт расти.
Соцсети и мессенджеры
Сценарий пятый: аватарки. Площадки просят квадрат 400×400 или 800×800. Подогнал заранее — загрузил идеально, без некрасивой автокадрировки лица. Держите лицо по центру с запасом: тогда любая платформа обрежет аккуратно.
Сценарий шестой: сторис и посты. Вертикаль 1080×1920 для сторис, квадрат для ленты — размеры известны, готовим пачкой. Сохраните пресеты размеров для каждой площадки — в следующий раз подготовка займёт минуты.
Сценарий седьмой: отправка в мессенджер. Уменьшил до 50% — файл улетел за секунды даже в метро. Оригинал на 6 МБ там же грузился бы минуту. Собеседник разницы не заметит: на экране телефона 1200 пикселей выглядят как 4000. Сценарий восьмой: экономия трафика в роуминге. Каждый мегабайт за границей стоит денег — уменьшенные фото перед отправкой домой окупаются буквально. При отправке десятков фото из поездки суммарная экономия измеряется сотнями мегабайт.
Работа и документы
Сценарий девятый: презентации. Фото на весь слайд не нуждается в 4000 пикселей — хватит 1920. Презентация худеет с 300 МБ до 30 и перестаёт тормозить на проекторе. Презентация открывается мгновенно, а не грузится по минуте на каждый слайд.
Сценарий десятый: документы и формы. Порталы ограничивают размер загружаемых изображений: уменьшил — загрузилось с первого раза, без танцев с бубном. Лимит обычно указан рядом с кнопкой загрузки — лучше попасть в него с первого раза.
Бонусный сценарий: email-рассылки. Лёгкие картинки в письмах открываются быстро и не уходят в спам из-за веса. Маркетологи, берите на вооружение. Лёгкие картинки повышают доставляемость писем и процент их открытий.
Когда ресайз не нужен
Не уменьшайте оригиналы для печати: типографии нужен максимум пикселей. Ресайз — для экрана, печать — святое. Типография сама уменьшит при необходимости: отдавайте максимум и доверьтесь профессионалам.
Не увеличивайте маленькие картинки в надежде на чудо: деталей не прибавится. Ищите исходник большего размера. Исключение — векторная графика: её можно масштабировать без потерь, это не про пиксельные фото.
Не трогайте рабочие файлы дизайнеров: меняйте размер только финальных экспортов. Правило универсальное: оригинал храним, преобразуем копии. Это правило защищает от главной ошибки — необратимой потери данных, о которой жалеешь через год.
Частые вопросы
Самый частый сценарий ресайза?
Уменьшение фото с телефона для веба: 4000 пикселей → 1200–1600. Экономит трафик, ускоряет загрузку, качество на экране не страдает.
Какой размер для маркетплейсов?
Смотрите требования площадки, обычно 1000–2000 пикселей по длинной стороне. Единый размер для всех фото — аккуратный каталог.
Стоит ли готовить двойной размер для retina?
Да, для ключевых изображений: блок 800 — файл 1600. На современных экранах разница в чёткости заметна.