В каталоге фотография занимает небольшую область, а браузер скачивает оригинал шириной несколько тысяч пикселей. На быстром соединении это почти незаметно, но десятки таких карточек создают лишнюю передачу данных. Учитывайте плотность экрана: для резкой картинки файл иногда должен быть шире блока в два раза. Лишний размер ищите после этого сравнения.
Допустим, фото занимает в карточке 280 пикселей по ширине. На экране с плотностью 2x для него обычно нужен источник около 560 пикселей. Проверьте размер блока, выбранный файл и его вес: исходник шириной 2400 пикселей может загружаться без пользы для этой карточки.
Измерьте область фотографии
Повторите измерение на телефоне и широком экране. Карточки могут менять количество колонок, а фотография — занимать почти всю ширину в мобильном варианте. Один фиксированный размер, выбранный по настольному макету, способен дать слишком маленькое изображение на узком экране с одной колонкой.
Посмотрите правила обрезки. При object-fit: cover часть кадра скрыта, но исходник всё равно загружается. Это не делает лишнюю площадь бесплатной. При уменьшении сохраните важные детали товара. Если нужен другой кадр, проверьте его отдельно: изменение ширины не должно незаметно обрезать предмет.
Учтите плотность экрана
Для блока шириной 280 и плотности 2 подготовьте близкий вариант, например 640 пикселей. Он даёт небольшой запас для резкости. Исходник 2400 пикселей оцените отдельно: нужен ли он карточке или только увеличенному просмотру.
Проверьте фактический файл из выбранного URL. Название small.jpg не доказывает маленькие размеры, а параметр width=600 не гарантирует, что сервис преобразования применил его. Сохраните размеры декодированного изображения и убедитесь, что по ссылке не возвращается неизменённый оригинал.
Выберите изображение в инспекторе:
Выберите фото во вкладке Elements и выполните в консоли браузера, чтобы сравнить размер блока и выбранный файл:
({ ширинаБлока: $0.getBoundingClientRect().width, плотность: devicePixelRatio, файл: $0.currentSrc, sizes: $0.sizes });Для блока 280 CSS px при плотности 2 ориентир составляет около 560 пикселей. Откройте выбранный файл и проверьте его размеры; отдельно посмотрите переданные байты в Network с отключённым кешем.
Сравните передачу и качество
Сравните выбранный файл в трёх условиях:
| Экран | Ширина блока | Плотность | Файл | Что проверить |
|---|---|---|---|---|
| Каталог на компьютере | 280 CSS px | 1 | Оригинал 2400 px | Нужен ли столь большой источник |
| Тот же каталог | 280 CSS px | 2 | Вариант 640 px | Качество и разумный запас |
| Одна колонка телефона | 350 CSS px | 2 | Вариант 320 px | Не потеряна ли резкость |
Сравнивайте один и тот же товар и кадр. Если новый файл другой по содержанию или значительно хуже качеством, уменьшение байтов ещё не доказывает успешную оптимизацию. Для каталога важно сохранить возможность различить детали, цвет и форму продукта.
Настройте srcset и sizes по макету
Атрибут sizes описывает ширину изображения в макете. Учитывайте контейнер, отступы и ширину, на которой переключается число колонок. Например, если на телефоне блок занимает ширину экрана за вычетом двух отступов по 16 пикселей, а после 600 пикселей — 280, разметка может быть такой:
<img src="/images/lamp-640.webp"
srcset="/images/lamp-320.webp 320w, /images/lamp-640.webp 640w, /images/lamp-960.webp 960w"
sizes="(max-width: 600px) calc(100vw - 32px), 280px"
width="640" height="640" alt="Чёрный светильник L-24">Все три файла должны быть одним квадратным фото с указанной шириной. Замените пути и условие sizes согласно реальному CSS карточки. После перезагрузки сравните currentSrc и переданные байты при тех же плотности и ширине экрана.
Описание атрибутов и поведения элемента доступно в документации MDN по img. Используйте её при реализации, но подтверждайте итог в браузере. Наличие srcset в HTML само по себе не доказывает, что набор размеров полезен для вашего каталога.
Сохраните оригинал для галереи
Проверьте генератор миниатюр для новых и старых записей. Изменение настройки CMS иногда влияет только на будущие загрузки, а существующие товары продолжают получать прежние файлы. Решите, нужна ли повторная генерация, как она будет выполняться и как сохранятся исходники.
Сжатие и изменение размеров оценивайте отдельно. Новый формат не исправляет неверный размер карточки, а меньшая ширина не гарантирует хорошую передачу деталей. Практика подготовки вариантов рассмотрена в руководстве по изменению размеров, способы уменьшения веса — в инструкции по сжатию.
Повторите в прежних условиях
Проверьте первую видимую строку карточек и элементы ниже по странице. Время запроса может отличаться из-за отложенной загрузки, но это не объясняет выбор слишком большого файла. Если изображение уже находится на первом экране, отдельно оцените задержку его обнаружения и загрузки.
При ошибке одного варианта проверьте резервный источник. Новый список размеров не должен приводить к сломанной фотографии на другом устройстве. Добавьте в выборку товар с вертикальным фото и товар с мелкими деталями: одинаковая настройка качества может давать разный практический результат.
Проверьте экономию и детали товара
При той же ширине экрана и плотности браузер выбирает подходящий вариант вместо огромного оригинала. Фото остаётся резким, цвет и детали сохранены. Оригинал крупного просмотра доступен отдельно, переключение варианта не показывает чужую фотографию.
Читайте также: Изменение размеров изображений, Сжатие изображений, Техническая проверка страницы.