Лёгкий файл может оказаться неподходящим файлом. Если маленькая карточка получает фотографию шириной несколько тысяч пикселей, сайт передаёт посетителю лишние данные. Сжатие и выбор размера работают вместе: первое уменьшает байты, второе не отправляет ненужные пиксели.
Как работают размеры WordPress
После загрузки WordPress обычно создаёт несколько версий изображения. Тема и плагины могут добавлять свои размеры. Для стандартного вывода WordPress формирует атрибуты srcset и sizes: браузер выбирает подходящий файл с учётом ширины экрана и плотности пикселей. Это работает только там, где тема выводит изображение через штатные механизмы WordPress.
Наличие нескольких файлов в каталоге ещё не означает, что посетитель получает подходящий. Тема должна вывести корректные srcset и sizes для конкретного блока. Просмотрите HTML карточки, баннера и изображения внутри статьи: они могут использовать разные способы вставки. Если тема выводит полный URL исходника вручную, WordPress не сможет автоматически выбрать миниатюру для этого места.
Почему проверка важнее догадки
На мобильной странице откройте инструменты разработчика браузера и посмотрите фактически загруженный URL изображения и его размер. Если карточка шириной 300 пикселей получает оригинал в несколько тысяч пикселей, проверьте разметку srcset, настройку sizes и способ вывода изображения в теме. Иногда картинка вставлена как CSS-фон — в этом случае WordPress не сможет автоматически выбрать миниатюру через srcset.
В инструментах разработчика смотрите поле currentSrc или адрес запроса в Network, а не только атрибут src в исходном HTML. Измените ширину окна и проверьте выбор ещё раз. Для экрана с высокой плотностью пикселей браузер может разумно скачать вариант шире видимого блока; это не обязательно ошибка. Вопрос в том, соответствует ли переданный размер реальной задаче и насколько тяжёлым оказался файл.
Что проверить в каждом блоке
- HTMLЕсть ли у изображения подходящие srcset и sizes.
- NetworkКакой файл выбран на телефоне и на большом экране.
- КачествоДостаточна ли резкость без передачи лишних пикселей.
Что делать с новыми и старыми файлами
Для новых загрузок можно задать максимальные размеры больших JPEG и WebP в ANK Image Compress. Выбор размеров для API-сжатия влияет на расход обработок, но не создаёт отсутствующие миниатюры задним числом. Если тема изменила набор размеров, для старых изображений может потребоваться отдельная регенерация миниатюр средствами WordPress.
Если новая тема объявила другие размеры, старые загрузки не всегда получат их автоматически. Перед массовым созданием миниатюр проверьте свободное место и сделайте пробу на нескольких изображениях. Затем убедитесь, что страницы используют созданные варианты. Сжатие через API уменьшает существующие файлы, но само по себе не исправляет неверные размеры, записанные темой в HTML.
Проверка после настройки
Для изображений первого экрана дополнительно проверьте скорость загрузки выбранного файла.
Сравните одну и ту же страницу на телефоне и компьютере: какой файл выбран, сколько байтов загружено и достаточно ли изображение чёткое. Затем проверьте страницу ещё раз после сжатия. Нужен баланс между размером файла и видимым качеством, а не минимальный размер любой ценой.
Сравните мобильную карточку, полноразмерную статью и блок первого экрана по отдельности. Для каждого сохраните адрес загруженного файла, его размеры и число переданных байтов. Если вариант оказался мягким или размытым, проверьте исходное разрешение и плотность экрана, прежде чем усиливать сжатие. Удачная настройка даёт достаточно чёткое изображение без передачи заведомо лишних пикселей.
Разберём на примере
Откройте карточку шириной около 320 пикселей в режиме телефона и посмотрите вкладку Network. Если загружается исходник на 2400 пикселей, проверьте итоговые атрибуты srcset и sizes. Не забудьте про фоновые изображения CSS: для них WordPress не создаёт автоматический выбор размера в HTML.
Проверьте перед публикацией
- Сравните фактический URL и размеры загруженного файла на телефоне и компьютере.
- После смены темы проверьте, нужны ли старым изображениям новые миниатюры.
- Смотрите не только на байты, но и на резкость в реальном блоке страницы.
Что дальше
Подробнее о работе srcset и sizes — в официальной документации WordPress.