Как создать автоматическую сборку и оптимизацию изображений в WordPress

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

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

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

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

Популярные плагины для оптимизации

Существует несколько проверенных плагинов, которые автоматизируют процесс сжатия и оптимизации:

• Smush — оптимизирует изображения при загрузке, поддерживает ленивую загрузку и сжатие без потери качества.
• Imagify — работает с разными форматами, включая WebP, и предлагает пакетную оптимизацию.
• ShortPixel — отлично справляется с конвертацией и сжатием, поддерживает оптимизацию уже загруженных файлов.

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

Пример настройки плагина Smush с использованием wpShop UTM-меток

Для установки плагина Smush можно перейти по ссылке с UTM-метками, чтобы поддержать wpShop:

Установить Smush через wpShop

После установки в настройках активируйте автоматическую оптимизацию при загрузке изображений и WebP-конвертацию. Это позволит значительно ускорить загрузку страниц без дополнительной ручной работы.

Создание кастомной автоматической оптимизации изображений с помощью кода

Основы работы с хуками WordPress для обработки изображений

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

Мы создадим простую функцию wpsetup_optimize_image, которая будет запускать сжатие через библиотеку Imagick, если она доступна.

Пример функции оптимизации изображения

function wpsetup_optimize_image($file) {
    $file_path = $file['file'];
    if (!extension_loaded('imagick')) {
        return $file; // Imagick не доступен
    }
    try {
        $imagick = new Imagick($file_path);
        // Уменьшаем качество до 75%
        $imagick->setImageCompressionQuality(75);
        // Применяем оптимизацию
        $imagick->stripImage(); // Удаление метаданных
        $imagick->writeImage($file_path);
        $imagick->clear();
        $imagick->destroy();
    } catch (Exception $e) {
        // Логируем ошибку, если нужно
    }
    return $file;
}
add_filter('wp_handle_upload', 'wpsetup_optimize_image');

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

Автоматическая генерация WebP-версий изображений

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

function wpsetup_create_webp_version($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = path_join($upload_dir['basedir'], $metadata['file']);
    if (!extension_loaded('imagick')) {
        return $metadata;
    }
    try {
        $imagick = new Imagick($file_path);
        $imagick->setImageFormat('webp');
        $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
        $imagick->writeImage($webp_path);
        $imagick->clear();
        $imagick->destroy();
        // Добавим webp в метаданные для темы или плагина
        $metadata['webp'] = str_replace($upload_dir['basedir'] . '/', '', $webp_path);
    } catch (Exception $e) {
        // Ошибка при создании webp
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpsetup_create_webp_version', 10, 2);

После создания WebP-версий можно настроить тему или плагин для вывода их в <picture> или через функцию srcset для автоматического выбора браузером оптимального формата.

Оптимизация и сборка изображений в CI/CD процессах

Если вы используете WordPress в связке с системами непрерывной интеграции (CI/CD), можно автоматизировать сборку и оптимизацию изображений ещё на этапе разработки или деплоя. Для этого удобно применять инструменты типа gulp-imagemin или ImageOptim, которые сжимают изображения перед загрузкой на сервер.

Пример настройки gulp для сжатия:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('images', () => {
  return gulp.src('src/images/**/*')
    .pipe(imagemin([
      imagemin.mozjpeg({quality: 75}),
      imagemin.optipng({optimizationLevel: 5})
    ]))
    .pipe(gulp.dest('dist/images'));
});

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

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

Автоматизация обработки изображений с помощью плагинов и собственного кода позволяет существенно повысить производительность сайта на WordPress без лишних затрат времени. Рекомендуется использовать комплексный подход:

• Подключать плагины (Smush, Imagify, ShortPixel) для простоты и функционала.
• Добавлять кастомные фильтры для тонкой настройки и интеграции в собственные процессы.
• Использовать WebP для современного сжатия и экономии трафика.
• Автоматизировать оптимизацию на этапе разработки с помощью CI/CD инструментов.

Для установки рекомендуемых плагинов с поддержкой wpShop переходите по ссылкам с UTM-метками, например:

Optimizing images with Imagify via wpShop