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

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

Почему важно управлять атрибутами изображений в WordPress

По умолчанию WordPress генерирует теги <img> с атрибутами, которые отвечают за масштабирование, адаптивность и качество отображения. Однако:

• Атрибуты width и height фиксируют размеры, что может мешать гибкой вёрстке.
• Атрибут srcset создаёт список изображений разного разрешения, но иногда это вызывает загрузку лишних ресурсов.
• Нужно удалять атрибуты, если изображения вставляются в нестандартные блоки или с помощью кастомного HTML.

Умение управлять этими атрибутами даёт разработчику полный контроль над выводом изображений и оптимизацией сайта.

Удаление атрибутов width и height через фильтр WordPress

Чтобы убрать фиксированные размеры из тегов <img>, можно использовать фильтр wp_get_attachment_image_attributes. Вот пример функции для удаления атрибутов width и height:

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

Эта функция корректно работает при использовании стандартных функций WordPress для вывода изображений, например wp_get_attachment_image() или the_post_thumbnail().

Удаление или изменение атрибута srcset и sizes

Атрибуты srcset и sizes отвечают за адаптивную загрузку изображения. Чтобы полностью отключить эти атрибуты для всех изображений, можно использовать фильтр wp_calculate_image_srcset и wp_calculate_image_sizes:

add_filter( 'wp_calculate_image_srcset', '__return_false' );
add_filter( 'wp_calculate_image_sizes', '__return_false' );

Если вы хотите selectively отключать srcset, можно добавить логику внутри собственного фильтра:

function wordpresses_disable_srcset_for_custom_images( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
    // Например, отключаем srcset для изображений в блоках с классом 'no-srcset'
    if ( isset( $_SERVER['HTTP_REFERER'] ) && strpos( $_SERVER['HTTP_REFERER'], 'no-srcset' ) !== false ) {
        return false;
    }
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'wordpresses_disable_srcset_for_custom_images', 10, 5 );

Удаление атрибутов img через регулярные выражения (для нестандартных случаев)

Иногда изображения выводятся через контент, где применить фильтры невозможно. В таких случаях можно обработать HTML перед выводом, например, используя фильтр the_content:

function wordpresses_strip_img_dimensions_from_content( $content ) {
    // Убираем width и height из тегов img
    $content = preg_replace( '/(<img[^>]+)\swidth="\d+"([^>]*>)/i', '$1$2', $content );
    $content = preg_replace( '/(<img[^>]+)\sheight="\d+"([^>]*>)/i', '$1$2', $content );
    return $content;
}
add_filter( 'the_content', 'wordpresses_strip_img_dimensions_from_content' );

Этот метод стоит применять осторожно, так как некорректное регулярное выражение может повредить HTML.

Изменение или добавление пользовательских атрибутов к изображению

Если вам нужно добавить свои атрибуты к тегам <img>, например, loading="lazy" для ленивой загрузки или data-* атрибуты, это можно сделать через тот же фильтр wp_get_attachment_image_attributes:

function wordpresses_add_custom_img_attributes( $attr ) {
    $attr['loading'] = 'lazy';
    $attr['data-custom'] = 'wordpresses';
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wordpresses_add_custom_img_attributes' );

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

Пример комплексного решения: удаляем размеры, отключаем srcset и добавляем lazy loading

Соберём всё вместе для максимального контроля:

function wordpresses_optimize_img_attributes( $attr ) {
    // Удаляем width и height
    unset( $attr['width'], $attr['height'] );
    // Добавляем ленивую загрузку
    $attr['loading'] = 'lazy';
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wordpresses_optimize_img_attributes' );

add_filter( 'wp_calculate_image_srcset', '__return_false' );
add_filter( 'wp_calculate_image_sizes', '__return_false' );

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

Альтернативный вариант: использовать плагин Clearfy Pro для управления атрибутами изображений

Если не хочется писать код, можно использовать плагин Clearfy Pro. Он позволяет отключать атрибуты width, height, управлять srcset и lazy loading через удобный интерфейс без кода.

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

Заключение по управлению атрибутами img в WordPress

Управление атрибутами <img> в WordPress — важный инструмент для разработчика, позволяющий добиться идеальной адаптивности и производительности сайта. Используйте фильтры WordPress для удаления или изменения стандартных атрибутов, а при необходимости — регулярные выражения для обработки контента. Если вы хотите упростить задачу, рассмотрите плагин Clearfy Pro.