Оптимизация изображений в WordPress: сжатие, WebP и ленивая загрузка

«Сайт вроде бы лёгкий, а грузится по 4–5 секунд» — знакомая ситуация? Чаще всего виноваты не скрипты и не хостинг, а картинки. Фото с камеры или скриншот с рабочего стола могут весить 5–10 мегабайт, и если таких изображений на странице десяток, браузеру приходится скачивать десятки мегабайт ради одной страницы. По данным Google, изображения составляют в среднем 60% веса веб-страницы — это главный кандидат на оптимизацию.

Хорошая новость: для новичка это одна из самых простых и безопасных оптимизаций. Не нужно переписывать код, менять тему или трогать сервер. Достаточно понять три вещи: какие форматы использовать, как сжимать картинки и как включить ленивую загрузку. В этой статье разберём всё по шагам, с таблицами, плагинами и готовыми сниппетами для functions.php.

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

Каждое изображение — это запрос к серверу и скачивание файла. Чем больше файл, тем дольше страница отдаётся посетителю, особенно на мобильном интернете. Вот типичная картина «до» оптимизации:

• Фото с зеркалки или смартфона — 3–10 МБ в формате JPEG, загруженные «как есть»;
• Скриншоты интерфейсов — 1–3 МБ в PNG, хотя для скриншота достаточно 100–300 КБ;
• Дубликаты размеров — одна картинка загружена в нескольких копиях, а WordPress хранит ещё и все сгенерированные размеры;
• Отсутствие lazy loading — браузер скачивает все картинки сразу, даже те, что ниже первого экрана.

Проверить, что именно тормозит ваш сайт, можно за пару минут:

• Google PageSpeed Insights (pagespeed.web.dev) — покажет конкретные рекомендации: «Serve images in next-gen formats» (используйте WebP/AVIF), «Properly size images» (уменьшите размер) и «Defer offscreen images» (ленивая загрузка);
• DevTools в браузере — вкладка Network, сортировка по размеру: увидите, какие файлы весят больше всего и сколько времени уходит на их загрузку.

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

Форматы изображений: JPEG, PNG, WebP, AVIF

Первый шаг оптимизации — выбрать правильный формат. Многие новички грузят всё подряд в PNG, хотя для фотографий это худший выбор. Разберём основные форматы в таблице.

Формат	Для чего подходит	Сжатие	Поддержка браузерами	Когда использовать
JPEG	Фотографии, изображения с градиентами	Хорошее, с потерями	Все браузеры	Фото товаров, картинки в статьях
PNG	Логотипы, иконки, скриншоты с текстом	Без потерь, но файлы тяжёлые	Все браузеры	Графика с прозрачностью и мелкими деталями
WebP	Универсальный формат нового поколения	На 25–35% лучше JPEG при том же качестве	Chrome, Firefox, Safari, Edge, Яндекс.Браузер	Основной формат для большинства сайтов
AVIF	Самый современный формат	Ещё на 20–30% лучше WebP	Chrome, Firefox, Safari (частично)	Для сайтов, где важна максимальная экономия трафика

Правило простое: фотографии — JPEG или WebP, графика с прозрачностью — PNG или WebP, а если сайт современный и аудитория использует свежие браузеры — смело переходите на WebP как основной формат. AVIF пока можно считать бонусом для тех, кто готов возиться с фолбэками.

Важный нюанс: менять формат каждой картинки вручную не нужно. WordPress делает это автоматически с помощью плагинов — о них дальше.

Сжатие изображений: сравнение плагинов

Сжатие бывает двух видов: с потерями (lossy) — файл меньше, но при сильном сжатии заметны артефакты, и без потерь (lossless) — размер уменьшается за счёт оптимизации данных, качество не меняется. Хороший плагин сам подбирает баланс. Сравним популярные варианты.

Плагин	Бесплатная версия	Автосжатие при загрузке	WebP	Лимиты бесплатной версии	Кому подойдёт
Smush	Да	Да	Да	Сжатие файлов до 5 МБ	Новичкам: просто и понятно
ShortPixel	Да	Да	Да	100 изображений в месяц	Тем, кто готов к более тонким настройкам
Imagify	Да	Да	Да	25 МБ в месяц	Средним проектам
EWWW Image Optimizer	Да	Да	Да	Практически без лимитов	Тем, кто хочет бесплатно и без ограничений

Рекомендация для новичка: начните с Smush — он пережимает уже загруженные изображения одной кнопкой, сжимает новые автоматически и умеет конвертировать в WebP. Если сайт большой (сотни картинок) и хочется безлимитного бесплатного сжатия — берите EWWW Image Optimizer. Про другие полезные плагины для старта читайте в нашем топ-10 плагинов WordPress для начинающих.

WebP в WordPress: как включить без боли

WebP — формат от Google, который весит на 25–35% меньше JPEG при визуально одинаковом качестве. Ниже — рекомендуемый плагин для конвертации, а затем три ручных способа — от простого к продвинутому.

Рекомендуемый плагин — Plus WebP or AVIF. Для конвертации изображений мы чаще всего ставим именно его: он работает на стороне вашего сервера (без внешних API и платных очередей) и умеет не только WebP, но и более современный AVIF. Разберём, как он устроен.

Плагин Plus WebP or AVIF решает задачу целиком, а не просто «делает копии»:

• Автоконвертация при загрузке. Добавили картинку в медиабиблиотеку — плагин сразу генерирует WebP или AVIF-версию.
• Массовая конвертация. По команде он проходит по всем уже загруженным изображениям и создаёт для каждого WebP/AVIF, причём асинхронно — большая библиотека не «подвешивает» сайт.
• Замена оригиналов. Опционально исходные JPEG/PNG можно заменить на WebP/AVIF и удалить оригиналы, а все URL в контенте перепишутся автоматически.
• WP-CLI для больших библиотек. Для сайтов с тысячами картинок есть консольные команды — они надёжнее веб-интерфейса при массовой обработке.

Установка стандартная: «Плагины → Добавить новый», найдите Plus WebP or AVIF, установите и активируйте. Плагин требует PHP 8.1+ и актуальную версию WordPress. Основные команды WP-CLI:

# Конвертировать все изображения в WebP
wp pluswebpavif webp

# Конвертировать все изображения в AVIF
wp pluswebpavif avif

# Заменить оригиналы на WebP/AVIF и переписать URL в контенте
wp pluswebpavif webp replace

# Справка по всем командам
wp pluswebpavif help

Для продвинутых сценариев плагин предоставляет фильтр plus_webp_advanced_change_db: через него можно заменить адреса картинок не только в контенте, но и в других таблицах базы (например, в метаполях). Если нужен постоянный переход на WebP с заменой файлов и переписыванием ссылок — это самый прямой инструмент без «костылей».

Способ 1. Плагин Converter for Media (самый простой). Установите плагин «Converter for Media» (бывший WebP Express), включите конвертацию для форматов JPEG и PNG. Плагин сам переконвертирует все загруженные изображения в WebP и отдаёт их браузеру, который их поддерживает. Старые браузеры получают оригинал — ничего не ломается. Это решение «включил и забыл».

Способ 2. Правила в .htaccess. Если хостинг на Apache или LiteSpeed, можно отдавать WebP-версии через mod_rewrite. Сначала сконвертируйте картинки (плагином или вручную), затем добавьте в .htaccess в корне сайта:

# Отдаём WebP, если файл существует и браузер его поддерживает
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image:webp]

AddType image/webp .webp

Способ 3. Фильтр в functions.php. Добавить WebP в список разрешённых типов файлов и загрузки:

// Разрешаем загрузку WebP в медиабиблиотеку
add_filter('upload_mimes', 'dscw_allow_webp_upload');
function dscw_allow_webp_upload($mimes) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}

// Показываем превью WebP в админке (для старых версий WordPress)
add_filter('file_is_displayable_image', 'dscw_webp_is_displayable', 10, 2);
function dscw_webp_is_displayable($result, $path) {
    if ($result) {
        return $result;
    }
    $filetype = wp_check_filetype($path);
    return $filetype['ext'] === 'webp';
}

Важно: современные версии WordPress (5.8+) умеют создавать превью для WebP из коробки, но возможность загрузки зависит от настроек хостинга (нужен модуль GD или Imagick с поддержкой WebP). Если после загрузки WebP картинка не отображается — проверьте, что на хостинге включён модуль GD с WebP, или используйте плагин из способа 1, который конвертирует файлы на ��ету.

Ленивая загрузка (lazy loading): что это и как включить

Ленивая загрузка — это приём, при котором браузер скачивает изображение только тогда, когда пользователь прокрутил страницу до него. Картинки «под экраном» не грузятся сразу, поэтому первая загрузка страницы заметно ускоряется, а трафик экономится.

Хорошая новость: с версии WordPress 5.5 ленивая загрузка для изображений в контенте включена по умолчанию — движок автоматически добавляет атрибут loading=»lazy» к тегам img. Проверить можно так: откройте страницу, нажмите F12, найдите любую картинку ниже первого экрана и посмотрите, есть ли у неё атрибут loading=»lazy».

Однако есть нюансы, которые автоматика не закрывает:

• картинки в виджетах, галереях и произвольных полях могут не получить атрибут автоматически;
• изображение на первом экране (LCP-элемент) лениво загружать не нужно — это вредит скорости;
• для максимального контроля удобнее добавить ленивую загрузку сниппетом.

Как это сделать через functions.php — в следующем разделе. А если хотите глубже разобраться в том, как WordPress обрабатывает контент на уровне кода, — загляните в наш гайд по хукам WordPress: actions и filters.

Сниппеты для functions.php: полный контроль над картинками

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

1. Ленивая загрузка для всех изображений в контенте — добавляет loading=»lazy» и отключает его для первого изображения статьи:

// Ленивая загрузка для изображений в контенте
add_filter('wp_content_img_tag', 'dscw_lazy_load_content_images', 10, 3);
function dscw_lazy_load_content_images($filtered_image, $context, $attachment_id) {
    // Не трогаем картинки, у которых уже есть loading
    if (strpos($filtered_image, 'loading=') !== false) {
        return $filtered_image;
    }
    // Для первого изображения (LCP) ленивую загрузку не включаем
    if ($context === 'the_content' && did_action('the_content') === 0) {
        return $filtered_image;
    }
    return str_replace('<img', '<img loading="lazy"', $filtered_image);
}

// Атрибуты для миниатюр и изображений из галерей
add_filter('wp_get_attachment_image_attributes', 'dscw_lazy_load_attachment_images', 10, 2);
function dscw_lazy_load_attachment_images($attr, $attachment) {
    if (isset($attr['class']) && strpos($attr['class'], 'skip-lazy') !== false) {
        return $attr;
    }
    $attr['loading'] = 'lazy';
    return $attr;
}

2. Свои размеры изображений — WordPress генерирует копии картинки для каждого зарегистрированного размера. Лишние размеры раздувают диск и замедляют загрузку. Отключите ненужные и добавьте свои:

// Отключаем лишние размеры изображений
add_filter('intermediate_image_sizes', 'dscw_remove_unused_image_sizes');
function dscw_remove_unused_image_sizes($sizes) {
    return array_diff($sizes, array('1536x1536', '2048x2048'));
}

// Регистрируем свой размер для карточек товаров
add_action('after_setup_theme', 'dscw_add_custom_image_size');
function dscw_add_custom_image_size() {
    add_image_size('card-thumb', 600, 450, true); // 600x450 с обрезкой
}

// Вывод своего размера в теме
// <?php the_post_thumbnail('card-thumb'); ?>

3. Уменьшение больших изображений при загрузке — WordPress по умолчанию масштабирует гигантские фото до 2560px. Можно снизить порог, чтобы файлы были компактнее с самого начала:

// Масштабируем загружаемые изображения до 1920px
add_filter('big_image_size_threshold', 'dscw_image_size_threshold');
function dscw_image_size_threshold() {
    return 1920;
}

4. Убираем атрибуты width/height у декодирования — мелочь, но помогает браузеру быстрее рассчитать layout:

// Добавляем атрибут decoding="async" ко всем изображениям
add_filter('wp_content_img_tag', function ($image) {
    if (strpos($image, 'decoding=') === false) {
        $image = str_replace('<img', '<img decoding="async"', $image);
    }
    return $image;
});

Все эти сниппеты безопасны: они не меняют файлы, а только управляют атрибутами и размерами. Если вы ещё не знакомы с тем, как устроены фильтры, — прочитайте статью о полезных сниппетах для functions.php, там всё объяснено с нуля.

JS-сниппет: ленивая загрузка через IntersectionObserver

Если нужно лениво загружать картинки вне контента (например, в слайдере или кастомном выводе), удобно использовать классическую технику с IntersectionObserver. Идея: вместо src указываем data-src, а когда картинка подъезжает к экрану — подменяем атрибуты.

// Ленивая загрузка изображений через IntersectionObserver
document.addEventListener('DOMContentLoaded', function () {
    var lazyImages = document.querySelectorAll('img.lazy');

    if (!('IntersectionObserver' in window)) {
        // Фолбэк для старых браузеров: грузим всё сразу
        lazyImages.forEach(function (img) {
            img.src = img.dataset.src;
        });
        return;
    }

    var observer = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
            if (!entry.isIntersecting) {
                return;
            }
            var img = entry.target;
            img.src = img.dataset.src;      // подставляем реальный src
            img.classList.remove('lazy');   // убираем заглушку
            observer.unobserve(img);        // перестаём следить
        });
    }, {
        rootMargin: '200px 0px' // начинаем загрузку чуть раньше появления
    });

    lazyImages.forEach(function (img) {
        observer.observe(img);
    });
});

В HTML такие картинки выглядят так:

<img class="lazy" data-src="https://delai-sait.ru/wp-content/uploads/2026/08/photo.webp" alt="Пример ленивой загрузки">

Этот подход работает и с адаптивными изображениями — достаточно добавить data-srcset. О том, как WordPress работает с произвольными полями и выводом данных (там такие картинки встречаются чаще всего), читайте в гайде про ACF-поля в WordPress.

Адаптивные изображения: srcset, sizes и retina

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

Проверить, что всё работает: откройте страницу в DevTools на вкладке Network, включите эмуляцию мобильного устройства и обновите страницу. В списке запросов вы должны увидеть, что для маленького экрана скачивается уменьшенная копия, а не оригинал в 4000px.

Для миниатюр и произвольных выводов WordPress тоже умеет генерировать srcset, если размер зарегистрирован через add_image_size. А для «ретина»-экранов (2x) можно зарегистрировать увеличенную копию:

// Поддержка retina: увеличенная копия для экранов 2x
add_image_size('card-thumb-2x', 1200, 900, true);

// Вывод с srcset в теме
// <?php
// $thumb_id = get_post_thumbnail_id();
// $srcset = wp_get_attachment_image_srcset($thumb_id, 'card-thumb');
// echo '<img src="' . esc_url(wp_get_attachment_image_url($thumb_id, 'card-thumb')) . '" srcset="' . esc_attr($srcset) . '" sizes="(max-width: 600px) 100vw, 600px" alt="' . esc_attr(get_the_title()) . '">';
// ?>

Не перегружайте сайт лишними размерами: каждый add_image_size создаёт копию файла для каждого загруженного изображения. Два-три размера + retina обычно достаточно. Если медиабиблиотека уже разрослась и хочется навести порядок, плагин регенерации размеров (например, Regenerate Thumbnails) пересоздаст копии под новые настройки.

Частые ошибки при оптимизации изображений

Вот 6 ошибок, которые чаще всего сводят на нет всю оптимизацию:

• Загружают оригиналы без сжатия. Фото с телефона 8 МБ попадает на сайт как есть. Правило: сжимайте до загрузки или включайте автосжатие плагином — тогда WordPress обработает файл сразу.
• Используют PNG для фотографий. PNG с потерями не сжимает и весит в 5–10 раз больше JPEG. PNG — только для графики с прозрачностью и мелкими деталями.
• Слишком сильное сжатие. Качество 20% даёт «мыло» и артефакты. Оптимум для WebP и JPEG — качество 70–80%, при котором разница с оригиналом почти незаметна.
• Забывают про ленивую загрузку на первом экране. Главное изображение (LCP) должно грузиться сразу — иначе скорость первой отрисовки страдает. WordPress сам не добавляет lazy первому изображению только в некоторых темах — проверьте.
• Хранят гигантские оригиналы. Файл 5000px ради показа в 600px — пустая трата места и трафика. Уменьшайте оригинал до реального размера показа.
• Не чистят кэш после оптимизации. Плагин сжатия перезаписал файлы, а кэш отдаёт старые. После массовой оптимизации всегда очищайте кэш — об этом мы писали в гайде по кэшированию WordPress.

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

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

Вывод: план оптимизации изображений за один день

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

1. Установите плагин сжатия (Smush или EWWW) и сожмите все уже загруженные изображения;
2. Включите конвертацию в WebP (плагин Converter for Media) или добавьте сниппет для загрузки WebP;
3. Проверьте, что ленивая загрузка работает (WordPress 5.5+ включает её сам, для кастомных выводов добавьте сниппет из раздела 6);
4. Уберите лишние размеры изображений и зарегистрируйте свои через add_image_size;
5. Проверьте результат в PageSpeed Insights и очистите кэш.

Дальше можно двигаться дальше по скорости: настроить кэширование WordPress, выбрать нормальный хостинг или разобраться с REST API WordPress для автоматизации. Все технические материалы собраны в разделе «Разработка WordPress».

Если сайт нужен «под ключ» — с оптимизированными изображениями, быстрым хостингом и правильной настройкой кэша, — посмотрите наши работы в портфолио и напишите нам: рассчитаем стоимость и сроки, а скорость заложим на этапе разработки. Больше полезных материалов — в блоге delai-sait.ru.