Как отключить ответные изображения srcset в WordPress для отдельных страниц

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

Когда srcset становится проблемой

Типичный сценарий: на странице всё выглядит нормально в редакторе, но на фронтенде браузер выбирает не тот размер картинки. В результате:

• изображение подгружается тяжелее, чем ожидалось;
• в сетке появляются визуальные сдвиги;
• картинка в блоке с фиксированной шириной выглядит размытой или, наоборот, слишком крупной;
• в HTML получается несколько вариантов одного и того же файла, хотя нужен строго один размер.

Если проблема локальная, лучше отключать srcset выборочно, а не через глобальные фильтры на весь сайт.

Диагностика: где именно WordPress добавляет srcset

В WordPress атрибуты srcset и sizes формируются для изображений, которые выводятся через стандартные функции ядра и блоки редактора. Поэтому сначала нужно понять, откуда приходит картинка:

• это <img> из записи или страницы;
• это изображение в шаблоне темы через the_post_thumbnail();
• это картинка, вставленная в HTML вручную;
• это фон в CSS — на него srcset вообще не влияет.

Проверка простая: откройте страницу в браузере, посмотрите исходный HTML и найдите у нужного изображения атрибут srcset. Если его нет, значит проблема не в WordPress, а в теме, плагине или в CSS-обертке.

Как отключить srcset только для нужных страниц

Самый надежный способ — использовать фильтр wp_calculate_image_srcset. Он позволяет вернуть false для конкретного контекста. Ниже пример, который отключает srcset только на странице с заданным ID.

<?php
add_filter( 'wp_calculate_image_srcset', function( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    if ( is_page( 42 ) ) {
        return false;
    }

    return $sources;
}, 10, 5 );

Если нужно отключить адаптивные изображения не по ID, а по шаблону страницы, логика будет такой же:

<?php
add_filter( 'wp_calculate_image_srcset', function( $sources ) {
    if ( is_page_template( 'templates/landing.php' ) ) {
        return false;
    }

    return $sources;
}, 10, 1 );

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

Если нужно убрать srcset только у конкретного изображения

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

<?php
$image_id = 123;
echo wp_get_attachment_image( $image_id, 'large', false, array(
    'class' => 'hero-image',
    'loading' => 'lazy',
) );

Но если тема или блоки всё равно добавляют srcset, тогда нужен фильтр на уровне вывода HTML.

Сравнение подходов

Пошаговое решение без лишнего риска

1. Определите, на какой странице или в каком шаблоне возникает проблема.
2. Проверьте, действительно ли у изображения есть srcset в HTML.
3. Добавьте фильтр в дочернюю тему или в небольшой mu-plugin, а не в файл основной темы.
4. Ограничьте условие только нужной страницей, шаблоном или типом записи.
5. Очистите кеш страницы и браузера.
6. Сравните HTML до и после изменения.

Если у вас есть доступ к WP-CLI и нужно быстро проверить, что код не сломал сайт, после внесения правок полезно прогнать хотя бы базовую проверку синтаксиса файла через PHP на сервере или открыть страницу в приватном окне без кеша.

Как проверить, что решение сработало

Проверка должна быть не визуальной, а технической. Откройте исходный код страницы и убедитесь, что у нужного изображения больше нет атрибутов srcset и sizes. Затем:

• сравните размер загружаемого файла в DevTools;
• проверьте, не сломалась ли сетка на мобильных;
• посмотрите, не подменяет ли картинку lazy-load плагин;
• очистите серверный и браузерный кеш перед финальной проверкой.

Если после правки srcset исчез, но картинка всё равно грузится в неожиданном размере, значит источник проблемы не в responsive-атрибутах, а в CSS-ширине контейнера или в настройках темы.

Частые ошибки и как их исправить

Отключают srcset глобально без необходимости

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

Добавляют код в родительскую тему

После обновления темы правка исчезает. Для таких изменений лучше использовать дочернюю тему или отдельный mu-plugin.

Путают srcset с lazy load

Это разные механизмы. srcset отвечает за набор размеров изображения, а lazy load — за отложенную загрузку. Если картинка ведет себя странно, проверьте оба слоя отдельно.

Не очищают кеш

Если на сайте стоит кеширование страниц, старый HTML может оставаться доступным даже после правки кода. В итоге кажется, что фильтр не работает, хотя проблема только в кеше.

Что учитывать для производительности и безопасности

Не стоит отключать адаптивные изображения ради «чистоты HTML», если на странице нет реальной проблемы. WordPress добавляет srcset не случайно: это помогает браузеру выбрать подходящий файл и уменьшить лишнюю нагрузку. Поэтому безопасная стратегия такая: отключать только там, где это оправдано версткой или логикой шаблона.

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

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

Если вам нужно не только убрать srcset, но и навести порядок в технических дублях, мета-тегах и служебных настройках, иногда проще собрать это в один набор правил через Clearfy Pro: https://wpshop.ru/plugins/clearfy?utm_source=wpconsult.ru&utm_medium=article&utm_campaign=kak-otklyuchit-otklyuchit-otvetnye-izobrazheniya-srcset-v-wordpress-dlya-otdelnyh-stranic

Когда лучше не отключать srcset

Если проблема не в шаблоне, а в неверно заданных размерах изображений, сначала проверьте настройки медиафайлов, CSS контейнера и саму разметку. В ряде случаев достаточно поправить ширину блока или использовать другой размер изображения в шаблоне. Полное отключение srcset — это рабочий, но не универсальный ответ.

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