Проще всего переконвертировать вручную все изображения и заново залить их на сайт. Однако это решение подходит только для небольших сайтов, где объём работы будет не существенный.
Если же на сайте много страниц, а соответственно и изображений, необходимо процесс конвертации изображений автоматизировать.
В случаи если Ваш сайт управляется системой 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;
}