Как оптимизировать процесс загрузки картинок в WordPress

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

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

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

Оптимизация загрузки позволяет:

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

Давайте разберёмся, какие инструменты и методы помогут этого добиться.

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

1. WP Smush — автоматическое сжатие и оптимизация

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

Основные функции WP Smush:

• Сжатие JPEG, PNG и GIF;
• Удаление ненужных метаданных;
• Оптимизация изображений массово;
• Поддержка lazy load (ленивая загрузка);
• Интеграция с CDN для ускорения доставки.

Как установить и настроить WP Smush?

• Перейдите в Плагины > Добавить новый, найдите WP Smush;
• Установите и активируйте плагин;
• В настройках включите автоматическое сжатие и lazy load;
• Запустите массовую оптимизацию для уже загруженных изображений.

2. ShortPixel — мощное сжатие с поддержкой WebP

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

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

• Поддержка lossy и lossless сжатия;
• Конвертация изображений в WebP;
• Автоматическая оптимизация при загрузке;
• Совместимость с WooCommerce;
• API для программного взаимодействия.

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

Как реализовать lazy load самостоятельно в WordPress

Ленивая загрузка (lazy load) — это техника, при которой изображения загружаются только когда пользователь до них доскроллит. Это снижает объём данных, загружаемых сразу, и ускоряет загрузку страницы.

Начиная с версии WordPress 5.5, lazy load включён по умолчанию для изображений с атрибутом loading="lazy". Но если вам нужно реализовать или улучшить эту функцию самостоятельно, можно добавить её через фильтр.

function wpto_add_lazy_loading($content) {
    if (is_feed() || is_preview()) {
        return $content;
    }
    $content = preg_replace('/<img(.*?)>/i', '<img loading="lazy" $1>', $content);
    return $content;
}
add_filter('the_content', 'wpto_add_lazy_loading');

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

Оптимизация изображений с помощью собственного скрипта на PHP

Если хочется более гибко управлять изображениями, можно написать функцию для автоматического сжатия и изменения размеров при загрузке. Пример ниже использует библиотеку GD — стандартную для PHP.

function wpto_optimize_image_on_upload($image_path) {
    $max_width = 1200;
    list($width, $height, $type) = getimagesize($image_path);

    if ($width > $max_width) {
        $ratio = $height / $width;
        $new_width = $max_width;
        $new_height = $max_width * $ratio;

        $src = imagecreatefromjpeg($image_path);
        $dst = imagecreatetruecolor($new_width, $new_height);
        imagecopyresampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
        imagejpeg($dst, $image_path, 85); // качество 85%

        imagedestroy($src);
        imagedestroy($dst);
    }
}

add_action('add_attachment', function($post_ID) {
    $file = get_attached_file($post_ID);
    wpto_optimize_image_on_upload($file);
});

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

Внедрение формата WebP на WordPress

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

Плагин WebP Express

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

Установка:

• Установите и активируйте WebP Express;
• Настройте пути к папкам с изображениями;
• Включите опцию автоматической конвертации и замены изображений;
• Проверьте работу на сайте.

Ручное добавление WebP в тему

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

function wpto_replace_img_with_webp($content) {
    if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        $content = preg_replace_callback('/<img[^>]+src=["\']([^"\']+)["\']/i', function($matches) {
            $webp = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $matches[1]);
            if (file_exists($_SERVER['DOCUMENT_ROOT'] . parse_url($webp, PHP_URL_PATH))) {
                return str_replace($matches[1], $webp, $matches[0]);
            }
            return $matches[0];
        }, $content);
    }
    return $content;
}
add_filter('the_content', 'wpto_replace_img_with_webp');

Этот код меняет ссылки на картинки с расширениями jpg, jpeg, png на .webp, если такой файл существует на сервере и браузер его поддерживает. При этом необходимо заранее конвертировать картинки в WebP и сохранить рядом.

Дополнительные советы по ускорению загрузки изображений

Помимо основных методов, есть ещё несколько практических рекомендаций:

• Используйте CDN (Content Delivery Network) для быстрой доставки изображений;
• Задавайте правильные размеры для изображений в HTML и CSS, чтобы браузер резервировал место и не пересчитывал верстку;
• Используйте атрибуты srcset и sizes для адаптивной загрузки картинок;
• Удаляйте неиспользуемые изображения из библиотеки медиафайлов;
• Регулярно проверяйте скорость загрузки с помощью Google PageSpeed Insights или GTmetrix.

Применение этих советов в комплексе даст максимальный эффект.