Оптимизация хранения и отображения изображений в WordPress

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

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

Слишком большие или неоптимизированные изображения могут значительно замедлить загрузку страниц, что негативно скажется на показателях SEO и конверсии. Также это увеличивает нагрузку на хранилище и сервер, что особенно критично для сайтов с большим объёмом медиа-контента.

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

Форматы изображений и их особенности

Для оптимизации важно правильно выбирать формат изображения. Рассмотрим основные форматы:

• JPEG — подходит для фотографий с большим количеством цветов, обеспечивает хорошее сжатие с потерями.
• PNG — используется для изображений с прозрачностью и графики с резкими краями, но размер файлов обычно больше.
• WebP — современный формат с хорошим сжатием и поддержкой прозрачности, снижает размер файлов на 25-35% по сравнению с JPEG и PNG.
• AVIF — ещё более современный формат, превосходящий WebP по степени сжатия, но пока не везде поддерживается.

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

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

Самый простой способ оптимизировать изображения — использовать плагины, которые автоматически сжимают и конвертируют загружаемые файлы. Вот несколько проверенных вариантов:

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

Для установки плагина достаточно в админке WordPress выбрать «Плагины» → «Добавить новый», найти нужный плагин, установить и активировать. После настройки плагин будет автоматически оптимизировать новые и существующие изображения.

Пример кода для конвертации изображений в WebP при загрузке (wpcorp_wp_convert_to_webp)

Если нужна кастомная реализация, можно использовать хук wp_handle_upload для конвертации jpg/png в WebP при загрузке:

function wpcorp_wp_convert_to_webp($file) {
    $image_path = $file['file'];
    $file_info = pathinfo($image_path);
    $ext = strtolower($file_info['extension']);

    if (!in_array($ext, ['jpg', 'jpeg', 'png'])) {
        return $file; // Только для jpg/png
    }

    $webp_path = $file_info['dirname'] . '/' . $file_info['filename'] . '.webp';

    if ($ext === 'png') {
        $image = imagecreatefrompng($image_path);
    } else {
        $image = imagecreatefromjpeg($image_path);
    }

    if ($image) {
        imagewebp($image, $webp_path, 80); // 80 - качество
        imagedestroy($image);
        // Можно добавить замену URL на webp в метаданных, если нужно
    }

    return $file;
}
add_filter('wp_handle_upload', 'wpcorp_wp_convert_to_webp');

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

Использование lazy load для изображений в WordPress

Отложенная загрузка (lazy loading) позволяет загружать изображения только когда они попадают в область видимости пользователя. Это значительно снижает время загрузки страницы.

Начиная с WordPress 5.5, lazy load включен по умолчанию через атрибут loading="lazy" у тегов <img>. Если нужно более гибко управлять, можно использовать плагины:

• Lazy Load by WP Rocket — простой и эффективный плагин.
• a3 Lazy Load — поддерживает не только изображения, но и видео и iframe.

Для кастомной темы можно добавить атрибут через фильтр:

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

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

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

Чтобы отключить создание лишних размеров, добавьте в functions.php темы следующий код:

function wpcorp_wp_disable_image_sizes() {
    remove_image_size('thumbnail');
    remove_image_size('medium');
    remove_image_size('large');
    // Можно отключить дополнительные размеры, если они есть
}
add_action('init', 'wpcorp_wp_disable_image_sizes');

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

Оптимизация хранения через CDN и внешние сервисы

Для крупных проектов, где много медиа, разумно использовать CDN (Content Delivery Network) для хранения и доставки изображений. Это разгружает сервер и ускоряет загрузку.

Популярные решения:

• Cloudflare Images — простая интеграция с WordPress.
• ImageKit.io — CDN с оптимизацией изображений на лету.
• Jetpack Photon — бесплатный CDN от Automattic.

Для интеграции можно использовать плагины или настраивать вручную загрузку изображений через URL CDN.

Практический пример: интеграция с плагином Clearfy Pro для оптимизации загрузки

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

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