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

Автор: Сергей Сорокин | Опубликовано: 20.11.2025

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

Что такое адаптивные изображения и зачем они нужны в WordPress

Адаптивные изображения — это изображения, которые подстраиваются под размер экрана и устройство пользователя, показывая оптимальный по весу и разрешению вариант. Такой подход позволяет значительно снизить время загрузки страниц, уменьшить потребление трафика и повысить оценки в Google PageSpeed и Core Web Vitals.

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

Давайте рассмотрим несколько подходов и инструментов для реализации адаптивных изображений в WordPress.

Использование плагинов для адаптивных изображений в WordPress

1. Плагин WP Retina 2x

WP Retina 2x — популярный плагин, который автоматически создает изображения в высоком разрешении для дисплеев с высокой плотностью пикселей (Retina). Он работает совместно с функцией srcset и улучшает качество изображений на устройствах с Retina-дисплеями.

Основные возможности:

Автоматическое создание @2x и @3x версий изображений.
Поддержка стандартных и кастомных размеров изображений.
Совместимость с WooCommerce и другими плагинами.

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

2. Плагин Adaptive Images for WordPress

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

Особенности:

Динамическое изменение размеров и качества изображений.
Кэширование для ускорения повторных загрузок.
Простая интеграция с текущей темой.

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

Кастомные решения: как добавить адаптивные изображения с помощью кода в WordPress

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

Добавляем поддержку srcset и sizes в пользовательские изображения

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

function wptemp_get_adaptive_image( $attachment_id, $size = 'medium', $attr = array() ) {
    if ( ! wp_attachment_is_image( $attachment_id ) ) {
        return '';
    }
    
    $image = wp_get_attachment_image_src( $attachment_id, $size );
    $srcset = wp_get_attachment_image_srcset( $attachment_id, $size );
    $sizes = wp_get_attachment_image_sizes( $attachment_id, $size );
    
    if ( ! $image ) {
        return '';
    }
    
    $attr = array_merge( $attr, [
        'src' => $image[0],
        'srcset' => $srcset,
        'sizes' => $sizes,
        'alt' => get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ?: '',
    ]);
    
    $attr_html = '';
    foreach ( $attr as $name => $value ) {
        $attr_html .= sprintf( ' %s="%s"', esc_attr( $name ), esc_attr( $value ) );
    }
    
    return sprintf( '<img%s />', $attr_html );
}

Эта функция берет ID вложения и возвращает HTML-код изображения с корректными атрибутами для адаптивности, которые браузер использует для выбора нужного размера.

Управление размерами изображений в functions.php

Чтобы оптимизировать загрузку, важно добавить или изменить размеры изображений, которые генерирует WordPress при загрузке:

function wptemp_custom_image_sizes() {
    add_image_size( 'wptemp-small', 320, 9999 );
    add_image_size( 'wptemp-medium', 640, 9999 );
    add_image_size( 'wptemp-large', 1024, 9999 );
}
add_action( 'after_setup_theme', 'wptemp_custom_image_sizes' );

После добавления новых размеров не забудьте пересоздать миниатюры с помощью плагина Regenerate Thumbnails.

Оптимизация изображений и lazy loading для ускорения загрузки

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

Плагины для оптимизации и lazy loading

Smush — сжимает изображения без потери качества.
Imagify — мощный оптимизатор с несколькими уровнями сжатия.
Lazy Load by WP Rocket — добавляет ленивую загрузку для изображений.

С WordPress 5.5+ встроена нативная поддержка ленивой загрузки через атрибут loading="lazy", который автоматически добавляется к изображениям. Для кастомных выводов просто добавьте атрибут в HTML.

Добавляем lazy loading в кастомные изображения

function wptemp_get_adaptive_image_lazy( $attachment_id, $size = 'medium', $attr = array() ) {
    $attr['loading'] = 'lazy';
    return wptemp_get_adaptive_image( $attachment_id, $size, $attr );
}

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

Практические рекомендации по работе с адаптивными изображениями в WordPress

Чтобы адаптивные изображения работали эффективно, придерживайтесь нескольких правил:

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

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