Автоматизация сборки и оптимизации картинок в WordPress: практическое руководство

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

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

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

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

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

1. Imagify — мощный инструмент для компрессии

Imagify автоматически сжимает загружаемые изображения, а также позволяет массово оптимизировать уже загруженные файлы. Плагин поддерживает форматы JPG, PNG, GIF и WebP, что обеспечивает хорошую совместимость.

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

• Оптимизация без потери качества
• Автоматическое создание WebP-версий
• Интеграция с медиабиблиотекой WordPress
• Возможность выбора уровня сжатия

Для установки и настройки Imagify достаточно перейти в админку WordPress, установить плагин, зарегистрироваться для получения API ключа и активировать нужные параметры оптимизации.

2. ShortPixel Image Optimizer

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

Преимущества ShortPixel:

• Поддержка сжатия с потерями и без потерь
• Оптимизация уже загруженных файлов в один клик
• Интеграция с CDN
• Совместимость с WooCommerce и другими плагинами

Для начала работы нужно получить API ключ на сайте ShortPixel и ввести его в настройки плагина.

Кастомизация автоматической оптимизации с помощью кода

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

Ниже пример функции для добавления поддержки WebP при загрузке изображения с использованием библиотеки GD, встроенной в PHP. Эта функция создаёт WebP-версию для каждого загруженного JPG и PNG:

function wpeditor_create_webp_on_upload( $metadata, $attachment_id ) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file( $attachment_id );
    $file_info = pathinfo( $file );
    $extension = strtolower( $file_info['extension'] );

    if ( ! in_array( $extension, array( 'jpg', 'jpeg', 'png' ) ) ) {
        return $metadata; // Не обрабатываем другие форматы
    }

    $image = null;
    if ( $extension === 'png' ) {
        $image = imagecreatefrompng( $file );
    } else {
        $image = imagecreatefromjpeg( $file );
    }

    if ( ! $image ) {
        return $metadata; // Не удалось создать изображение
    }

    $webp_file = $file_info['dirname'] . '/' . $file_info['filename'] . '.webp';
    imagewebp( $image, $webp_file, 80 ); // Качество 80
    imagedestroy( $image );

    // Добавляем WebP в метаданные
    if ( isset( $metadata['sizes'] ) ) {
        foreach ( $metadata['sizes'] as &$size ) {
            $size['webp'] = str_replace( '.' . $extension, '.webp', $size['file'] );
        }
    }

    return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'wpeditor_create_webp_on_upload', 10, 2 );

Этот код подключается к фильтру wp_generate_attachment_metadata и при загрузке изображения создаёт WebP-версию параллельно с обычными размерами. Далее можно использовать WebP в шаблонах и стилях для улучшения скорости.

Как использовать WebP на сайте

После создания WebP-файлов нужно корректно выводить их в браузерах, которые поддерживают этот формат. Для этого можно добавить следующий фильтр, который подменяет URL изображений на WebP, если браузер поддерживает формат:

function wpeditor_serve_webp_images( $html, $id, $size, $icon ) {
    if ( ! strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) ) {
        return $html; // Браузер не поддерживает WebP
    }

    $upload_dir = wp_upload_dir();
    $webp_html = preg_replace_callback('/(srcset|src)="([^"]+)"/', function( $matches ) use ( $upload_dir ) {
        $url = $matches[2];
        $webp_url = preg_replace('/\.(jpg|jpeg|png)/i', '.webp', $url);
        // Проверяем, существует ли файл WebP
        $file_path = str_replace( $upload_dir['baseurl'], $upload_dir['basedir'], $webp_url );
        if ( file_exists( $file_path ) ) {
            return $matches[1] . '="' . $webp_url . '"';
        }
        return $matches[0];
    }, $html);

    return $webp_html;
}
add_filter( 'wp_get_attachment_image', 'wpeditor_serve_webp_images', 10, 4 );

Этот фильтр меняет ссылки на изображения в теге <img> на WebP-версии, если браузер поддерживает этот формат и файл существует.

Дополнительные инструменты для оптимизации и управления изображениями

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

Если нужно создать кастомные галереи с адаптивными изображениями, рекомендуем обратить внимание на плагин WPStories из каталога WPSHOP, который позволяет легко добавлять истории с оптимизированными картинками и видео.

Как проверить эффективность оптимизации изображений

После внедрения автоматизации обязательно проверьте скорость загрузки сайта с помощью инструментов:

• Google PageSpeed Insights
• GTmetrix
• WebPageTest

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

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

Итоги и рекомендации по автоматизации

Автоматизация оптимизации изображений в WordPress — обязательный этап для современных сайтов. Использование плагинов Imagify или ShortPixel обеспечивает быстрый и качественный результат без необходимости писать код.

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

Не забывайте регулярно проверять эффективность оптимизации и обновлять используемые инструменты. Комбинация плагинов и собственного кода — лучший путь к высокоскоростному и SEO-оптимизированному сайту на WordPress.