Как удалить атрибуты width и height из изображений WordPress без плагинов

Проблема: почему нужно убрать width и height из тегов img в WordPress

По умолчанию WordPress добавляет атрибуты width и height в теги <img> при вставке изображений в контент. Это помогает браузерам резервировать место для изображения и снижать сдвиги контента при загрузке (CLS). Однако в некоторых случаях, например при адаптивном дизайне с динамической подгонкой размеров, статичные атрибуты мешают корректному масштабированию изображений, особенно если размеры задаются через CSS или JavaScript.

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

Как диагностировать проблему с атрибутами width и height

1. Откройте страницу с изображениями в браузере.

2. Используйте инспектор кода (F12) и найдите теги <img>.

3. Проверьте, есть ли у них атрибуты width и height с фиксированными значениями.

4. Если размеры не совпадают с реальным отображением или вызывают нежелательные эффекты (искажение, пустые места), стоит рассмотреть удаление этих атрибутов.

Пошаговое решение: как убрать атрибуты width и height из изображений в WordPress

Для удаления атрибутов из HTML генерируемого WordPress можно использовать фильтр wp_get_attachment_image_attributes. Он позволяет модифицировать массив атрибутов img перед выводом.

add_filter('wp_get_attachment_image_attributes', function($attr) {
    if (isset($attr['width'])) {
        unset($attr['width']);
    }
    if (isset($attr['height'])) {
        unset($attr['height']);
    }
    return $attr;
}, 10);

Этот код нужно добавить в файл functions.php вашей темы или в кастомный плагин. Он удалит атрибуты с любых изображений, выводимых через функцию wp_get_attachment_image(), которая используется в стандартных блоках и шаблонах.

Если изображения вставлены через классический редактор или через the_content, можно дополнительно применить фильтр the_content для удаления атрибутов из HTML:

add_filter('the_content', function($content) {
    return preg_replace('/\s(width|height)="\d*"/', '', $content);
});

Этот регулярное выражение удалит все атрибуты width и height из тегов <img> в содержимом постов.

Проверка результата: как убедиться, что атрибуты удалены

1. Обновите страницу с изображениями.
2. Откройте инспектор кода и найдите теги <img>.
3. Убедитесь, что атрибуты width и height отсутствуют.
4. Проверьте, как изображения ведут себя при изменении ширины окна браузера — они должны корректно адаптироваться под CSS-стили.

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

• Атрибуты не удаляются: возможно, фильтр добавлен не в functions.php или конфликтует с плагинами, которые позднее добавляют атрибуты. Проверьте приоритет фильтра и отключите плагины для теста.
• Изображения искажаются: если убрать размеры без задания CSS-стилей для адаптивности, картинки могут растягиваться или сжиматься неправильно. Добавьте в CSS img { max-width: 100%; height: auto; }.
• Проблемы с производительностью: удаление атрибутов может повлиять на CLS, если не предусмотрено резервирование места под изображения. В таком случае лучше использовать современный подход с srcset и sizes.

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

• Удаление атрибутов width и height не влияет напрямую на безопасность, но всегда проверяйте совместимость с темой и плагинами.
• Используйте современные CSS-решения для адаптивных изображений, например, max-width: 100% и height: auto, чтобы избежать искажений.
• Проверьте, что в шаблонах используется функция wp_get_attachment_image() с правильными параметрами для поддержки srcset и sizes.
• Если вы используете плагин Clearfy Pro, он может помочь оптимизировать вывод изображений и настроить удаление лишних атрибутов без кода — рассмотрите его в качестве альтернативы.

Сравнение вариантов удаления атрибутов width и height