Как удалить или изменить атрибуты srcset в WordPress

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

Что такое атрибут srcset и зачем он нужен

Атрибут srcset представляет собой список URL-адресов изображений разного размера, которые браузер может выбирать автоматически. Это помогает улучшить скорость загрузки и качество отображения на разных устройствах. Например, для мобильных устройств будет загружено меньшее изображение, а для десктопов — более крупное.

Но иногда этот механизм вызывает проблемы:

• Некорректное отображение изображений в некоторых темах или конструкторах страниц.
• Избыточная нагрузка на сервер из-за генерации множества размеров изображений.
• Потребность в полной кастомизации URL изображений, например, для CDN.

В таких случаях полезно знать, как управлять или отключать srcset в WordPress.

Как полностью отключить атрибут srcset в WordPress

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

function wpmart_disable_srcset() {
    return false;
}
add_filter('wp_calculate_image_srcset', 'wpmart_disable_srcset');
add_filter('wp_calculate_image_srcset_meta', '__return_false');
add_filter('wp_lazy_loading_enabled', '__return_false');

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

После добавления кода обновите страницу и проверьте код изображения — атрибут srcset должен исчезнуть.

Когда стоит отключать srcset?

Отключать srcset стоит, если вы используете сторонние решения для оптимизации картинок (например, CDN с собственным управлением размерами), либо если есть баги в теме или плагинах, связанные с этим атрибутом.

Как изменить атрибут srcset для кастомных нужд

Иногда нужно не удалить srcset, а изменить URL изображений, которые туда попадают. Например, заменить домен на CDN или добавить параметры оптимизации.

Для этого можно использовать фильтр wp_calculate_image_srcset, который позволяет перехватывать массив источников и менять их.

function wpmart_modify_srcset_urls($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    foreach ($sources as &$source) {
        // Пример: заменяем домен на CDN
        $source['url'] = str_replace('https://example.com/wp-content/uploads', 'https://cdn.example.com/uploads', $source['url']);
    }
    return $sources;
}
add_filter('wp_calculate_image_srcset', 'wpmart_modify_srcset_urls', 10, 5);

В этом примере все URL изображений в srcset меняются с основного домена на CDN. Вы можете адаптировать замену под свои задачи — добавлять параметры сжатия, менять путь или даже фильтровать размеры.

Подробности по параметрам функции

Функция получает несколько параметров:

• $sources — массив с информацией об изображениях для srcset;
• $size_array — массив с размерами запрашиваемого изображения;
• $image_src — URL основного изображения;
• $image_meta — метаданные изображения из библиотеки;
• $attachment_id — ID вложения в библиотеке.

Работая с этими параметрами, можно гибко управлять выводом srcset.

Использование плагинов для управления srcset

Если не хочется писать код, можно воспользоваться плагинами:

• Clearfy Pro — позволяет управлять множеством параметров WordPress, включая отключение srcset и lazy loading без кода.
• WPRemark — плагин для оптимизации изображений и SEO, имеет функции для контроля srcset.

Подключение таких решений особенно удобно для тех, кто не хочет вникать в технические детали, но желает контролировать загрузку изображений.

Отладка и проверка работы с srcset

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

1. Откройте страницу с изображениями в браузере.
2. Используйте инструменты разработчика (F12) и найдите тег <img>.
3. Посмотрите, есть ли у них атрибут srcset и соответствует ли он вашим ожиданиям.
4. Проверьте загрузку файлов через сеть (Network) — загружаются ли нужные размеры.

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

Вывод

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