Оптимизация изображений на сайте: чтобы они продавали, а не весили

Честный ответ нужно мерить, потому что стартовые состояния отличаются в разы. Два магазина по нашему измерению: в одном разметка 252,6 КБ, во втором 502,3 КБ, причем второй имеет каталог всего на 68 адресов. Запас — это разница между тем, что у вас сейчас, и тем, что дает такой же вид в современном формате и нужном размере. После подсчета мы называем эту разницу в б, а не в процентах с потолка.

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

Так, если отдавать его с откатом: браузер, понимающий формат, получает WebP, остальные привычны JPEG или PNG. Это стандартная конструкция разметки, отдельная версия сайта для этого не требуется. С AVIF другая история: он легче, но кодировка заметно медленнее, поэтому мы ставим его выборочно – на баннеры и тяжелые фото, а не на весь каталог.

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

Вопрос не в количестве, а в том, сколько из них браузер тянет сразу. В нашем измерении есть страница со 190 изображениями, где 154 отложены, и страница из 69, где отложены 66. Обе ведут себя приемлемо. Проблема начинается там, где отложения вообще нет: тогда даже сотня легких картинок грузится до того, как человек увидел первый экран.

Возделывать пакетно, по правилу, а не руками. Конвертация, сжатие и нарезка размеров автоматизируются; руками остается то, что под правило не подпадает, обычно баннеры, коллажи и нестандартные макеты. Мы отдельно называем, какая часть работы пакетная, а какая ручная, чтобы оценка не была одной большой цифрой без объяснения.

Именно поэтому в работе есть этап пробной партии. Берем два-три десятка типичных фото, прогоняем в нескольких уровнях сжатия и смотрим глазами, где начинает сыпаться фактура — на ткани, металле и мелком тексте это видно первым. Согласованный предел фиксируем как правило. Оригиналы остаются нетронутыми, поэтому можно откатиться в любой момент.

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