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

Автор: Маргарита Волкова | Опубликовано: 21.12.2025

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

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

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

Снизить время загрузки страниц;
Экономить трафик мобильных пользователей;
Повысить скорость работы сайта и SEO показатели.

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

Как работает srcset в WordPress: тонкости и ограничения

Несмотря на встроенную поддержку, иногда WordPress не всегда правильно генерирует srcset или темы/плагины мешают этому процессу. Основные моменты, которые важно знать:

Поддержка темы: Тема должна использовать функцию the_post_thumbnail() или wp_get_attachment_image(), чтобы включить автоматическую генерацию srcset.
Качество и размеры: WordPress генерирует несколько размеров изображений, но иногда их недостаточно для современных экранов с высокой плотностью пикселей.
Форматы изображений: Для лучшей производительности рекомендуется использовать современные форматы, такие как WebP, однако по умолчанию WordPress не генверирует WebP версии.

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

Как вручную добавить поддержку srcset в кастомных шаблонах

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

Пример функции wpnote_get_responsive_image(), которая возвращает адаптивное изображение с корректным srcset:

function wpnote_get_responsive_image($attachment_id, $size = 'medium_large', $alt = '') {
    if ( ! wp_attachment_is_image($attachment_id) ) {
        return '';
    }
    $image_src = wp_get_attachment_image_src($attachment_id, $size);
    if ( ! $image_src ) {
        return '';
    }
    $srcset = wp_get_attachment_image_srcset($attachment_id, $size);
    $sizes = wp_get_attachment_image_sizes($attachment_id, $size);
    $alt_attr = esc_attr($alt);
    return '<img src="' . esc_url($image_src[0]) . '" srcset="' . esc_attr($srcset) . '" sizes="' . esc_attr($sizes) . '" alt="' . $alt_attr . '" loading="lazy">';
}

Использование функции в шаблоне:

echo wpnote_get_responsive_image(get_post_thumbnail_id(), 'large', get_the_title());

Так вы гарантируете, что изображения будут иметь корректные атрибуты srcset и sizes, а также включено отложенное загрузка loading="lazy" для оптимизации.

Плагины для расширенной работы с адаптивными изображениями

Если вы хотите улучшить поддержку адаптивных изображений без ручного кода, обратите внимание на следующие плагины:

Adaptive Images for WordPress — автоматически создаёт различные размеры изображений и подставляет оптимальный вариант в зависимости от устройства.
WP Retina 2x — помогает создавать и использовать изображения с двойным разрешением для Retina-дисплеев.
Imagify — сжимает изображения и может генерировать WebP версии, что отлично сочетается с srcset.
Clearfy Pro (ссылка: https://wpshop.ru/clearfy-pro/) — оптимизирует работу сайта, в том числе и медиафайлов.

Использование плагинов может существенно упростить процесс и повысить производительность сайта.

Настройка размеров изображений для оптимального srcset

WordPress генерирует несколько стандартных размеров: thumbnail, medium, medium_large, large и full. Вы можете добавить свои размеры с помощью функции add_image_size(). Это полезно, если в srcset не хватает оптимальных вариантов для вашего дизайна.

Пример добавления новых размеров:

function wpnote_add_custom_image_sizes() {
    add_image_size('wpnote-small', 320, 9999); // ширина 320px
    add_image_size('wpnote-medium', 640, 9999);
    add_image_size('wpnote-large', 1024, 9999);
}
add_action('after_setup_theme', 'wpnote_add_custom_image_sizes');

После этого можно использовать эти размеры при выводе изображений, и WordPress автоматически построит корректный srcset с новыми вариантами.

Советы по оптимизации адаптивных изображений в WordPress

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

Используйте современные форматы (WebP) вместе с плагинами типа Imagify или ShortPixel.
Активируйте отложенную загрузку (lazy loading) — WP уже поддерживает её с версии 5.5.
Добавляйте кастомные размеры изображений для точного контроля.
Проверяйте корректность вывода атрибутов srcset и sizes через инструменты разработчика браузера.
Тестируйте сайт на разных устройствах и разрешениях экрана.

Итог

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