Как удалить атрибуты srcset из тега img в WordPress для оптимизации

Что такое атрибут srcset и зачем его удалять

Атрибут srcset используется в WordPress для адаптивной загрузки изображений — браузер выбирает подходящий размер исходя из размера экрана. Однако на некоторых проектах, особенно при специфической оптимизации или использовании CDN, атрибут srcset может вызывать проблемы: лишняя нагрузка, неправильный выбор изображения или конфликты с кастомными скриптами.

Когда стоит убрать srcset

• Если вы используете собственный механизм адаптивных изображений или CDN, который не поддерживает srcset.
• При проблемах с некорректным отображением картинок на мобильных устройствах.
• Если хотите уменьшить размер HTML и ускорить загрузку страниц за счет упрощения тега <img>.

Диагностика: как проверить наличие атрибута srcset

Откройте любую страницу сайта с изображениями в браузере. Через инспектор кода (обычно F12) найдите <img> и посмотрите, есть ли у него атрибут srcset. Например:

<img src="example.jpg" srcset="example-300.jpg 300w, example-600.jpg 600w" sizes="(max-width: 600px) 100vw, 600px" alt="">

Если атрибут srcset присутствует, значит WordPress автоматически его добавляет.

Пошаговое удаление srcset из тега img

WordPress добавляет srcset через фильтр wp_calculate_image_srcset. Чтобы отключить, нужно вернуть false в этом фильтре.

add_filter('wp_calculate_image_srcset', '__return_false');

Добавьте этот код в файл functions.php вашей активной темы или в кастомный плагин.

Если хотите отключить только для определённых условий, можно сделать так:

add_filter('wp_calculate_image_srcset', function($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    if (is_admin()) {
        return $sources; // не отключаем в админке
    }
    // отключаем для всех фронтенд изображений
    return false;
}, 10, 5);

Проверка результата после внедрения

После добавления кода очистите кэш сайта и браузера. Откройте страницу с изображениями и проверьте через инспектор:

• Атрибут srcset должен отсутствовать в теге <img>.
• Загружается ли изображение корректно по атрибуту src.

Если srcset исчез, задача решена.

Частые ошибки при удалении srcset и как их исправить

• Кэширование: неочищенный кэш плагинов или CDN может показывать старый HTML с srcset. Решение: очистить все кэши.
• Неправильное место для кода: добавление фильтра вне functions.php или плагина может не сработать. Проверьте, что код действительно подключается.
• Конфликты с плагинами оптимизации изображений: некоторые плагины могут повторно добавлять srcset. В этом случае ищите настройку в плагине.

Практические советы по производительности и безопасности

• Удаляя srcset, вы уменьшаете адаптивность изображений — убедитесь, что используемые картинки оптимизированы по размеру.
• Комбинируйте отключение srcset с использованием современных форматов WebP и lazy loading для лучшей скорости загрузки.
• Следите за тем, чтобы изменения не ухудшали UX на мобильных устройствах.

Сравнение способов отключения srcset

add_filter('wp_calculate_image_srcset', '__return_false');

document.querySelectorAll('img').forEach(img => img.removeAttribute('srcset'));