Как настроить WebP-изображения в Битрикс без сторонних плагинов

WebP уменьшает размер изображений на 25–35% по сравнению с JPEG/PNG при сопоставимом качестве. В Битриксе есть встроенные инструменты для работы с WebP — расскажем, как их использовать, и покажем PHP-функцию для самостоятельной конвертации.

Поддержка WebP в Битрикс

Начиная с версии 20.x модуль fileman и компонент resize_image поддерживают WebP нативно. Для включения:

1. Перейдите в Настройки → Настройки продукта → Сжатие файлов
2. Включите опцию «Конвертировать изображения в WebP»
3. Убедитесь, что на сервере установлено расширение php-gd или php-imagick с поддержкой WebP

Проверка поддержки WebP на сервере

queryFormats("WEBP");
    echo "WebP через Imagick: " . (!empty($formats) ? "ДА" : "НЕТ") . "\n";
}

PHP-функция конвертации в WebP

function convertToWebP(string $sourcePath, int $quality = 80): string|false
{
    if (!file_exists($sourcePath)) {
        return false;
    }

    $targetPath = preg_replace("/\.(jpe?g|png)$/i", ".webp", $sourcePath);
    if (file_exists($targetPath)) {
        return $targetPath; // уже конвертировано
    }

    $mimeType = mime_content_type($sourcePath);

    switch ($mimeType) {
        case "image/jpeg":
            $image = imagecreatefromjpeg($sourcePath);
            break;
        case "image/png":
            $image = imagecreatefrompng($sourcePath);
            imagealphablending($image, false);
            imagesavealpha($image, true);
            break;
        default:
            return false;
    }

    if (!$image) {
        return false;
    }

    $result = imagewebp($image, $targetPath, $quality);
    imagedestroy($image);

    return $result ? $targetPath : false;
}

// Использование:
$webpPath = convertToWebP($_SERVER["DOCUMENT_ROOT"] . "/upload/iblock/abc/photo.jpg");
if ($webpPath) {
    echo "Конвертировано: " . $webpPath;
}

Тег <picture> для поддержки старых браузеров

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

function renderPicture(string $src, string $alt, int $width = 0, int $height = 0): string
{
    $webpSrc = preg_replace("/\.(jpe?g|png)$/i", ".webp", $src);
    $webpExists = file_exists($_SERVER["DOCUMENT_ROOT"] . $webpSrc);

    $sizeAttrs = "";
    if ($width && $height) {
        $sizeAttrs = " width=\"{$width}\" height=\"{$height}\"";
    }

    if ($webpExists) {
        return "
    
    
";
    }

    return "";
}

Пакетная конвертация через CLI

Если нужно конвертировать все изображения в каталоге upload:

# Установить cwebp (если не установлен)
yum install -y libwebp-tools   # CentOS/AlmaLinux
apt install -y webp            # Ubuntu/Debian

# Конвертировать все JPEG
find /home/bitrix/www/upload -name "*.jpg" -exec bash -c \
    "cwebp -q 80 \"{}\" -o \"\${1%.jpg}.webp\" 2>/dev/null" _ {} \;

# Конвертировать все PNG
find /home/bitrix/www/upload -name "*.png" -exec bash -c \
    "cwebp -q 80 \"{}\" -o \"\${1%.png}.webp\" 2>/dev/null" _ {} \;

Настройка Nginx для автоматической отдачи WebP

Если WebP-файл существует и браузер поддерживает WebP — отдавать его автоматически:

map $http_accept $webp_suffix {
    default        "";
    "~*webp"       ".webp";
}

location ~* \.(png|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
    expires 1y;
}

Итог

В Битриксе WebP можно включить встроенными средствами или реализовать самостоятельно через GD/Imagick. Тег <picture> обеспечивает обратную совместимость со старыми браузерами. Пакетная конвертация через cwebp позволяет быстро обработать существующие загруженные изображения.