Как настроить выработку изображений в WordPress для улучшения производительности

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

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

Оптимизация изображений – это не только сжатие файлов, но и выбор правильных форматов, размера, а также внедрение современных технологий, таких как lazy load и webp. Рассмотрим, как настроить выработку изображений (image generation) в WordPress с примерами и полезными плагинами.

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

Сжатие и изменение размера изображений

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

Рекомендуемые плагины:

• Clearfy Pro – в том числе оптимизация и генерация webp форматов;
• WPRemark – поддержка lazy load и сжатие;
• OmniVideo – если нужно работать с видео и изображениями для превью.

Для ручной оптимизации можно использовать инструменты, например, Photoshop, TinyPNG или ImageMagick, но автоматизация в WordPress значительно облегчает жизнь.

Использование современных форматов изображений – WebP

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

Пример включения WebP через плагин Clearfy Pro:

function wpdir_enable_webp_conversion($metadata, $attachment_id) {
    // Здесь может быть логика конвертации в WebP с использованием Clearfy API или встроенных функций
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpdir_enable_webp_conversion', 10, 2);

Такой код можно доработать, интегрируя Clearfy Pro или другой плагин, который автоматически создаёт WebP версии изображений при загрузке.

Lazy Load – отложенная загрузка изображений

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

Начиная с WordPress 5.5, lazy load включён по умолчанию для изображений с атрибутом loading="lazy". Однако для более точного контроля можно использовать плагины, например, WPRemark или Clearfy Pro.

Пример добавления lazy load вручную:

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

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

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

WordPress по умолчанию создаёт несколько размеров изображений при загрузке (thumbnail, medium, large и т.д.), но иногда нужно добавить свои размеры для темы или плагина. Это позволяет оптимально использовать изображения в разных местах сайта.

Регистрация новых размеров изображений

Добавим в functions.php вашей темы или в плагин следующий код:

function wpdir_add_custom_image_sizes() {
    add_image_size('wpdir-small-thumb', 150, 150, true); // Кроп с обрезкой
    add_image_size('wpdir-large', 1200, 800, false); // Масштабирование без обрезки
}
add_action('after_setup_theme', 'wpdir_add_custom_image_sizes');

Теперь при загрузке изображений WordPress будет создавать новые версии с этими размерами.

Вывод изображений нужного размера в шаблонах

Чтобы вывести нужный размер, используйте функцию wp_get_attachment_image() или the_post_thumbnail() с указанием зарегистрированного размера:

echo wp_get_attachment_image($attachment_id, 'wpdir-small-thumb');

Или для поста:

if (has_post_thumbnail()) {
    the_post_thumbnail('wpdir-large');
}

Оптимизация и выработка изображений через WP CLI

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

Команда для регенерации всех миниатюр:

wp media regenerate --yes

Для оптимизации можно использовать сторонние утилиты, интегрированные с WP CLI, или плагины, поддерживающие WP CLI команды, например Clearfy Pro.

Выводы и рекомендации для WPDir

Оптимизация изображений в WordPress – это комплексный процесс, включающий:

• Настройку автоматического сжатия и конвертации в WebP;
• Использование lazy load для снижения нагрузки при загрузке страниц;
• Регистрацию и использование кастомных размеров изображений по нуждам темы;
• Автоматическую регенерацию и оптимизацию через WP CLI для больших сайтов.

Используйте плагины Clearfy Pro и WPRemark для быстрой и качественной оптимизации. Если хотите сделать собственные решения, используйте хуки WordPress для добавления WebP и lazy load, а также регистрируйте нужные размеры изображений.