Конвертируем изображения jpg/jpeg/png в webp "на лету" для Google Page Speed

22 сен 2020

Дмитрий М.

2537

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

Если же на сайте много страниц, а соответственно и изображений, необходимо процесс конвертации изображений автоматизировать.

В случаи если Ваш сайт управляется системой CMS можно поступить следующим образом:

Конвертируем все изображения из формата jpg/jpeg/png в .webp.
Отслеживаем системное событие CMS, вызываемое перед "отдачей" страницы клиенту.
Заменяем пути до изображений старых форматов (jpg/jpeg/png) на пути до изображений в формате .webp.

Конвертирование изображений jpg/png в .webp

Для конвертирования изображений воспользуемся плагином WebP Convert. Для работы плагина необходимо чтобы на хостинге были установлены и включены модули gd или imagick. ( Наличие модулей можете узнать у тех.поддержки вашего хостинга )

Плагин WebP Convert устанавливаем с помощью Composer или можете скачать уже установленный с autoload.php

require 'vendor/autoload.php'; // Подключение плагина WebP Convert
use WebPConvert\WebPConvert;
$source = __DIR__ . '/logo.jpg'; // Путь до конвертируемого изображения
$destination = $source . '.webp'; // Путь до изображения в формате webp
$options = []; // Список опций при конвертации
WebPConvert::convert($source, $destination, $options);

В результате выполнения скрипта - получим по пути $destination новое изображение в формате .webp

Поиск изображений jpg/jpeg/png при помощи регулярных выражений в коде страницы.

Для преобразования всех изображений со страницы, для начало нужно из кода страницы получить ссылки на эти изображения. Ссылки будем искать в коде при помощи регулярных выражений. Нужно предусмотреть два варианта: первый - ссылки в теге <img/> в атрибуте src, и ссылки, когда изображение задано у элемента при помощи css свойства background.

<html>
    <head>
        <title>Пример страницы</title>
    </head>
    <body>
        <img src="/assets/img/picture_1.jpg" />
        <img src="/assets/img/picture_2.jpg" />
        <img src="/assets/img/picture_3.jpg" />
        <img src="/assets/img/picture_4.jpg" />
        <div class="pic-wrapper" style="background:url('assets/img/picture_bg1.jpg')"></div>
        <div class="pic-wrapper" style="background:url('assets/img/picture_bg2.jpg')"></div>
        <div class="pic-wrapper" style="background:url('assets/img/picture_bg3.jpg')"></div>
        <div class="pic-wrapper" style="background:url('assets/img/picture_bg4.jpg')"></div>
    </body>
</html>

Допустим код страницы будет храниться в переменной $content тогда:

preg_match_all('/<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/m', $content, $result);

В переменной $result получим список тегов img с адресами изображений:

// Содержимое переменной $result
Array
(
    [0] => Array
    (
            [0] => <img src="/assets/img/picture_1.jpg">
            [1] => <img src="/assets/img/picture_2.jpg">
            [2] => <img src="/assets/img/picture_3.jpg">
            [3] => <img src="/assets/img/picture_4.jpg">
     )
    [1] => Array
    (
            [0] => /assets/img/picture_1.jpg
            [1] => /assets/img/picture_2.jpg
            [2] => /assets/img/picture_3.jpg
            [3] => /assets/img/picture_4.jpg
     )
)

Тоже самое нужно сделать для путей в css стиле background. Регулярное выражение для этого будет иметь вид:

preg_match_all("/url\(('[^\"]*')/m", $content, $result);

В переменной $result получим список тегов img с адресами изображений:

Array
(
    [0] => Array
        (
            [0] => url('assets/img/picture_bg1.jpg'
            [1] => url('assets/img/picture_bg2.jpg'
            [2] => url('assets/img/picture_bg2.jpg'
            [3] => url('assets/img/picture_bg2.jpg'
            [4] => url('assets/img/picture_bg3.jpg'
            [5] => url('assets/img/picture_bg4.jpg'
        )

    [1] => Array
        (
            [0] => 'assets/img/picture_bg1.jpg'
            [1] => 'assets/img/picture_bg2.jpg'
            [2] => 'assets/img/picture_bg2.jpg'
            [3] => 'assets/img/picture_bg2.jpg'
            [4] => 'assets/img/picture_bg3.jpg'
            [5] => 'assets/img/picture_bg4.jpg'
        )

)

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

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

function newPicturePath($image){
    $image = ltrim($image, '/');
    $imageInfo = pathinfo($image);
    $fullImagePath = __DIR__.$image;
    $newImage = $imageInfo['dirname'].'/'.$imageInfo['filename'].'.webp';
    $arImage = array(
        'realpath' => $fullImagePath, //Полный адрес изображения на сервере для конвертации
        'img' => $newImage //Новый адрес изображения для подстановки
    );
    return $arImage;
}