Оптимизация изображений в WordPress для маркетинга: лучшие практики и примеры кода

Автор: Екатерина Крылова | Опубликовано: 14.12.2025

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

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

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

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

Оптимизация включает несколько аспектов: сжатие без потери качества, правильный формат, адаптивные размеры и отложенную загрузку (lazy load).

Основные задачи оптимизации изображений

Сжатие и уменьшение веса файлов
Выбор современных форматов (WebP, AVIF)
Адаптивность — разные размеры под разные устройства
Отложенная загрузка (Lazy Load) для снижения времени до отображения контента

Как реализовать сжатие и lazy load изображений собственными силами в WordPress (кодовые примеры)

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

Добавление атрибута loading="lazy" к изображениям

function wpmarketing_add_lazy_loading($content) {
    return preg_replace('/<img(.*?)>/', '<img loading="lazy" $1>', $content);
}
add_filter('the_content', 'wpmarketing_add_lazy_loading');

Этот фильтр добавляет атрибут loading="lazy" ко всем изображениям в контенте, что позволит браузеру отложить загрузку изображений вне экрана.

Автоматическое отображение WebP при поддержке браузера

Для этого можно использовать фильтр wp_get_attachment_image_attributes с подстановкой WebP версии, если она есть.

function wpmarketing_webp_fallback($attr, $attachment, $size) {
    $file = get_attached_file($attachment->ID);
    $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    if (file_exists($webp_file)) {
        $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', wp_get_attachment_url($attachment->ID));
        $attr['srcset'] = $webp_url . ' 1x, ' . $attr['srcset'];
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpmarketing_webp_fallback', 10, 3);

Этот код проверяет, есть ли версия WebP для изображения, и добавляет её в srcset, что позволяет браузеру выбрать лучший формат.

Адаптивные изображения: как настроить правильно

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

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

Пример как добавить кастомные размеры для изображений в content:

function wpmarketing_custom_sizes_attr($sizes, $size, $image_src, $image_srcset) {
    if (is_singular('post')) {
        $sizes = '(max-width: 600px) 100vw, 600px';
    }
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'wpmarketing_custom_sizes_attr', 10, 4);

В этом примере для постов задаётся размер, чтобы на экранах меньше 600px загружались изображения шириной до 100% от ширины экрана, а на больших — 600px.

Оптимизация изображений в маркетинговых материалах: дополнительные советы

Используйте CDN и кеширование

Для ускорения доставки изображений используйте CDN, например, Cloudflare или BunnyCDN. Многие плагины, такие как ShortPixel, имеют встроенную поддержку CDN.

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

Автоматизация конвертации и оптимизации

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

Например, можно комбинировать плагин Clearfy Pro, который улучшает производительность сайта, с ShortPixel для качественной оптимизации изображений. Подробнее о Clearfy Pro — на wpshop.ru.

Проверяйте качество и размер изображений перед загрузкой

Используйте программы для сжатия изображений перед загрузкой (например, TinyPNG или Photoshop) — это снизит нагрузку на сервер и улучшит итоговый результат.

Итоговые рекомендации по оптимизации изображений для маркетинга на WordPress

Используйте специализированные плагины (Smush, ShortPixel, EWWW) для автоматической оптимизации.
Добавьте lazy load через фильтр или плагин для ускорения отображения контента.
Обеспечьте поддержку современных форматов WebP и AVIF, используя плагины или свой код.
Настройте адаптивные размеры и атрибуты srcset и sizes для разных устройств.
Применяйте CDN и кеширование для быстрой доставки изображений.
Перед загрузкой оптимизируйте файлы вручную для наилучшего качества и минимального веса.

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