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

Формат WebP вобрал в себя всё лучшее от JPEG и PNG. В нём можно указывать степень сжатия изображения от 0 до 100, как у JPEG, и он поддерживает прозрачность, как PNG. Причём алгоритм сжатия часто превосходит по эффективности формат JPEG.

Единственный минус этого формата — он по умолчанию не поддерживается операционными системами. То есть пользователи не смогут скачать к себе на компьютер и открыть файл формата WebP. Для этого им понадобится установка дополнительного программного обеспечения. Но в браузере он открывается всегда.

При конвертации JPEG и PNG в WebP рекомендуется указывать качество сжатия 90. Это сильно сократит размер файла по сравнению с качеством 100, при этом изображение будет почти идентичным максимальному качеству. GIF изображения лучше сохранять без сжатия.

Содержание

Код для интеграции

Нужно учесть следующее:

Поддержка WebP 95.86%, а AVIF 94.7%. Проверяйте заголовок запроса Accept на наличие в нём строк image/avif и image/webp. Так, браузеры сообщают, что они поддерживают эти форматы.
В каждом фреймворке и CMS есть стандартные функции для работы с изображениями. Как правило, их функционал можно расширять. Поэтому вместо использования своей функции лучше расширьте стандартные функции фреймворка и CMS. Методы по расширению стандартного функционала у каждой системы свои и называются: хуки, события, переопределение функции, обратные вызовы. При использовании своей функции вам понадобится исправить много файлов сайта, чтобы поменять вызов функции генерации изображения на свою. Проще всего 1 раз доработать стандартную функцию, которая везде используется.

Демонстрация

PHP код

HTML код

Открыть демонстрацию Скачать код примера

<?php
/**
 * Сначала убедитесь, что ваша версия PHP поддерживает AVIF и WebP. Для этого используйте функцию phpinfo() или выполните:
 * php -i | grep AVIF
 * AVIF Support => enabled
 * php -i | grep WebP
 * WebP Support => enabled
 *
 * В случае отсутствия поддержки форматов AVIF и WebP нужно их настроить. Инструкции для вашей операционной системы можно найти в интернете.
 *
 * Для ubuntu обновите вашу версию PHP из репозитория ppa:ondrej/php. Для этого выполните:
 * add-apt-repository ppa:ondrej/php
 * apt update
 * apt upgrade php8.3
 *
 * Вместо 8.3 укажите свою версию PHP.
 */

/**
 * Функция конвертирующая изображения в формате PNG, JPEG, GIF в AVIF, WebP
* - Проверяет, поддерживает ли браузер данный формат
* - GIF изображения конвертирует с качеством 100
* @param string $sourcePath — абсолютный или относительный путь до изображения
* @param int $quality — качество
* @return string — путь SRC
 */
function img2avif($sourcePath, $quality = 90) {
    // Узнаём поддерживаемые браузером форматы
    $accept = $_SERVER['HTTP_ACCEPT'] ?? null;
    // Получаем информацию о файле
    $info = pathinfo($sourcePath);
    // Путь до конвертированного файла
    $path = ($info['dirname'] ? $info['dirname'] . DIRECTORY_SEPARATOR : '') . $info['filename'] . '.';
    // Путь до корня публичной директории
    $root = $_SERVER['DOCUMENT_ROOT'] ?? '';
    // Проверяем поддержку форматов и сгенерированные файлы
    if(strpos($accept, 'image/webp')) {
        $type = 'webp';
        $path = $path . $type;
    } elseif($accept === null || strpos($accept, 'image/avif')) {
        $type = 'avif';
        $path = $path . $type;
    } else {
        return str_replace($root, '', $sourcePath);
    }
    if(!is_file($path)) {
        // Загружаем картинку в переменную PHP
        $image = imagecreatefromstring(file_get_contents($sourcePath));
        // Для GIF нужно качество 100
        if($info['extension'] === 'gif')
            $quality = 100;
        if($type === 'webp')
            imagewebp($image, $path, $quality);
        elseif($type === 'avif')
            imageavif($image, $path, $quality);
    }
    return str_replace($root, '', $path);
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Результат работы PHP функции, конвертирующей JPEG в WebP</h1>
        <img src="<?=img2avif('./photo.jpg')?>" />
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Результат работы PHP функции, конвертирующей JPEG в WebP</h1>
        <img src="./photo.jpg" />
    </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах