Размер файла изображения, скорость страницы и продажи: Прямая связь, которую упускают продавцы e-commerce

Большинство продавцов e-commerce знают, что большие изображения — это плохо. Немногие воспринимают это как срочную проблему доходов. Исследование Google и Deloitte даёт конкретные цифры: каждые дополнительные 100мс времени загрузки обходятся розничным сайтам примерно 1% конверсии. Для сайта с оборотом 100 000 € в месяц секундная задержка может означать 12 000 € потерянного годового дохода — только из-за изображений. Это руководство охватывает целевые размеры файлов, настройки экспорта, технические исправления и быстрый аудит, который позволяет выявить проблемы менее чем за десять минут.

Исследование: скорость и конверсии

Связь между скоростью страницы и продажами хорошо задокументирована. Исследование Google и Deloitte 2019 года на основе 37 ритейл- и туристических сайтов показало, что улучшение мобильной скорости страницы на 0,1 секунды повысило конверсию в среднем на 8%. Розничные сайты показали улучшение средней стоимости заказа на 10% от того же прироста скорости. Недавние данные Google из исследований Core Web Vitals показывают, что страницы, достигающие порога LCP «Хорошо» (менее 2,5 секунды), конвертируют на измеримо более высоких уровнях.

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

Целевые размеры файлов: чего нужно достичь

Универсального правила нет, но отраслевые ориентиры для e-commerce страниц товаров последовательны:

• Главное изображение товара (выше линии сгиба): Менее 100 КБ идеально; 200 КБ — приемлемый потолок. Выше 200 КБ вы измеримо влияете на LCP.
• Изображения галереи (ниже линии сгиба): Менее 200 КБ каждое. Поскольку они загружаются лениво на правильно настроенных сайтах, они менее критичны, чем главное изображение.
• Абсолютный максимум для любого веб-изображения: 500 КБ. Если вы регулярно публикуете изображения более 500 КБ на страницах товаров, оптимизация должна быть первым, что вы исправляете.

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

Сравнение форматов: WebP, JPEG и PNG

Выбор формата существенно влияет на размер файла. Для подробного сравнения компромиссов каждого формата для продуктовой фотографии см. наше руководство по WebP vs JPEG vs PNG для e-commerce. Кратко для скорости страницы:

• WebP — лучший выбор для веб-изображений товаров. Он дает файлы на 25–34% меньше, чем JPEG при эквивалентном визуальном качестве, и поддерживает прозрачность. Все основные браузеры поддерживают его с 2020 года.
• JPEG — надёжный резервный вариант. Используйте прогрессивное JPEG-кодирование для более быстрой воспринимаемой загрузки. Настройки качества 75–85 дают практически неотличимые результаты при значительно меньших размерах файлов, чем качество 95–100.
• PNG следует оставить для изображений, которым действительно нужна прозрачность. Файлы PNG для фотографического контента стабильно больше JPEG. Загрузка PNG для фотографий товаров, не требующих прозрачности, — одна из самых распространённых ошибок размера файла в e-commerce.

Как правильно экспортировать из Photoshop

Диалог «Экспортировать как» в Photoshop даёт полный контроль над качеством вывода и размером файла. Используйте эти настройки для веб-изображений товаров:

• Формат: JPEG (или WebP, если ваш рабочий процесс это поддерживает). Избегайте PNG для фотографических изображений товаров.
• Качество: 8–10 по шкале Photoshop (80–100%). Качество 8 (80%) неотличимо от качества 10 (100%) при веб-размерах отображения — но файл на 40–60% меньше.
• Прогрессивное кодирование: Включите «Прогрессивный» для JPEG. Прогрессивные JPEG почти мгновенно рендерят версию изображения с низким разрешением, пока загружается остальное, что значительно улучшает воспринимаемую скорость загрузки.
• Разрешение: 72 dpi для веба. Изображение 300 dpi, отображаемое при 72 dpi, добавляет вес файла без визуальной пользы.
• Размеры: Измените размер до фактического размера отображения перед экспортом. Изображение товара, отображаемое при 1500×1500 пикс. на вашем сайте, должно быть экспортировано при 1500×1500 пикс., а не при исходном разрешении съёмки.

Что не следует делать

Самая распространённая ошибка размера файла в e-commerce — загрузка на сайт того же файла, который отправляется в рабочие процессы печати или фулфилмента маркетплейса. Amazon и многие службы печати запрашивают файлы TIFF с разрешением 300 dpi и размерами 3000×3000 пикс. или больше — иногда 10–20 МБ на файл. Всегда экспортируйте специальную веб-версию из программного обеспечения для ретуши. Никогда не используйте файл доставки Amazon или печати как файл для вашего сайта.

Компонент Image в Next.js и ленивая загрузка

Если ваш магазин работает на Next.js, встроенный компонент Image автоматически решает несколько проблем со скоростью страницы:

• Автоматическое преобразование формата: Next.js автоматически отдаёт WebP браузерам, которые его поддерживают, с резервным JPEG для старых браузеров.
• Автоматическое изменение размера: Изображения уменьшаются до размеров отображения, определённых в вашем макете.
• Ленивая загрузка: Изображения ниже области просмотра не загружаются до тех пор, пока пользователь к ним не прокрутит. Это уменьшает начальный вес страницы, влияющий на LCP.
• Приоритетная загрузка: Добавьте свойство priority к главному изображению товара для его предзагрузки — это изображение определяет ваш счёт LCP.

Если вы не на Next.js, эквивалентом является HTML-атрибут loading="lazy" на изображениях галереи и явные атрибуты width и height для предотвращения сдвига макета.

CDN: как он снижает задержку доставки изображений

Сеть доставки контента (CDN) хранит копии ваших изображений на серверах, распределённых по всему миру. Когда покупатель в Сиднее загружает вашу страницу товара, размещённую в Лондоне, его браузер получает изображения с австралийского узла CDN, а не совершает поездку в Европу. Снижение задержки существенно — часто 200–400 мс для международных запросов. Крупные e-commerce платформы (Shopify, BigCommerce, Next.js на Vercel) по умолчанию включают доставку CDN для изображений. Самостоятельно размещённые WooCommerce или Magento — часто нет, и добавление CDN является одной из наиболее рентабельных инвестиций в производительность.

Core Web Vitals: LCP и ваши изображения товаров

Core Web Vitals Google — это технические метрики, которые напрямую связывают производительность изображений с органическими поисковыми позициями. Наиболее важная для страниц товаров — Largest Contentful Paint (LCP) — время от навигации до завершения рендеринга наибольшего видимого элемента. На странице товара этим элементом почти всегда является главное изображение товара.

Пороговые значения LCP:

• Хорошо: Менее 2,5 секунды
• Требует улучшения: 2,5–4,0 секунды
• Плохо: Более 4,0 секунды

Страницы в диапазоне «Хорошо» выигрывают от лучшего позиционирования в результатах поиска Google. Слишком большие главные изображения товаров — наиболее распространённая причина плохих показателей LCP на страницах товаров e-commerce.

Быстрый аудит: проверьте размеры изображений с помощью Chrome DevTools

Вы можете проверить изображения на странице товара менее чем за пять минут с помощью Chrome DevTools:

• Откройте страницу товара, которую хотите проверить, затем нажмите F12, чтобы открыть DevTools.
• Нажмите вкладку Сеть, затем перезагрузите страницу с помощью Ctrl+Shift+R (жёсткая перезагрузка с отключённым кешем).
• В строке фильтра введите Img, чтобы показать только запросы изображений.
• Столбец Размер показывает фактически переданные байты. Сортируйте по убыванию размера, чтобы найти наибольшие изображения.
• Любое изображение более 200 КБ в столбце размера требует повторного экспорта. Если главное изображение товара превышает 100 КБ, оно должно быть первым в списке.

Когда следует передавать оптимизацию изображений на аутсорсинг

Для магазинов с каталогами из сотен или тысяч SKU ручной повторный экспорт каждого изображения непрактичен. Наш сервис веб-оптимизации изображений занимается пакетной обработкой библиотек изображений товаров, поставляя готовые к вебу файлы в форматах WebP и JPEG с удалёнными метаданными и размерами файлов в пределах указанных выше целей. Отправьте 5 изображений для бесплатной пробной партии.