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

  • 2020-09-22
  • Дмитрий М.
  • 64

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

<p> Проще всего переконвертировать вручную все изображения и заново залить их на сайт. Однако это решение подходит только для небольших сайтов, где объём работы будет не существенный. </p> <p> Если же на сайте много страниц, а соответственно и изображений, необходимо процесс конвертации изображений автоматизировать. </p> <p> В случаи если Ваш сайт управляется системой CMS можно поступить следующим образом: </p> <ul> <li><b>Конвертируем </b>все изображения из формата <b>jpg/jpeg/png</b> в <b>.webp</b>.</li> <li>Отслеживаем системное событие CMS, вызываемое перед "отдачей" страницы клиенту.</li> <li><b>Заменяем пути</b> до изображений старых форматов (<b>jpg/jpeg/png</b>) на пути до изображений в формате <b>.webp</b>.</li> </ul> <h2>Конвертирование изображений jpg/png в .webp</h2> <p> Для конвертирования изображений воспользуемся плагином <a target="_blank" href="https://github.com/rosell-dk/webp-convert" rel="nofollow">WebP Convert</a>. Для работы плагина необходимо чтобы на хостинге были установлены и включены модули <b>gd</b> или <b>imagick</b>. ( Наличие модулей можете узнать у тех.поддержки вашего хостинга ) </p> <p> Плагин WebP Convert устанавливаем с помощью Composer или можете <a href="/upload/WebPConverter.zip">скачать</a> уже установленный с autoload.php </p> <pre class="line-numbers"><code class="language-php">require 'vendor/autoload.php'; // Подключение плагина WebP Convert use WebPConvert\WebPConvert; $source = __DIR__ . '/logo.jpg'; // Путь до конвертируемого изображения $destination = $source . '.webp'; // Путь до изображения в формате webp $options = []; // Список опций при конвертации WebPConvert::convert($source, $destination, $options);</code></pre> <p> В результате выполнения скрипта - получим по пути <b>$destination</b> новое изображение в формате <b>.webp</b> </p> <h2>Поиск изображений jpg/jpeg/png при помощи регулярных выражений в коде страницы.</h2> <p> Для преобразования всех изображений со страницы, для начало нужно из кода страницы получить ссылки на эти изображения. Ссылки будем искать в коде при помощи регулярных выражений. Нужно предусмотреть два варианта: первый - ссылки в теге <b>&lt;img/&gt;</b> в атрибуте <b>src</b>, и ссылки, когда изображение задано у элемента при помощи <b>css</b> свойства <b>background</b>. </p> <p> </p> <pre class="line-numbers"><code class="language-markup">&lt;html&gt; &lt;head&gt; &lt;title&gt;Пример страницы&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="/assets/img/picture_1.jpg" /&gt; &lt;img src="/assets/img/picture_2.jpg" /&gt; &lt;img src="/assets/img/picture_3.jpg" /&gt; &lt;img src="/assets/img/picture_4.jpg" /&gt; &lt;div class="pic-wrapper" style="background:url('assets/img/picture_bg1.jpg')"&gt;&lt;/div&gt; &lt;div class="pic-wrapper" style="background:url('assets/img/picture_bg2.jpg')"&gt;&lt;/div&gt; &lt;div class="pic-wrapper" style="background:url('assets/img/picture_bg3.jpg')"&gt;&lt;/div&gt; &lt;div class="pic-wrapper" style="background:url('assets/img/picture_bg4.jpg')"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code> </pre> <p> Допустим код страницы будет храниться в переменной <b>$content</b> тогда: </p> <pre class="line-numbers"><code class="language-php">preg_match_all('/&lt;img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\&gt;/m', $content, $result);</code> </pre> <p> В переменной <b>$result</b> получим список тегов <b>img</b> с адресами изображений: </p> <pre class="line-numbers"><code class="language-php">// Содержимое переменной $result Array ( [0] =&gt; Array ( [0] =&gt; &lt;img src="/assets/img/picture_1.jpg"&gt; [1] =&gt; &lt;img src="/assets/img/picture_2.jpg"&gt; [2] =&gt; &lt;img src="/assets/img/picture_3.jpg"&gt; [3] =&gt; &lt;img src="/assets/img/picture_4.jpg"&gt; ) [1] =&gt; Array ( [0] =&gt; /assets/img/picture_1.jpg [1] =&gt; /assets/img/picture_2.jpg [2] =&gt; /assets/img/picture_3.jpg [3] =&gt; /assets/img/picture_4.jpg ) )</code></pre> <p> Тоже самое нужно сделать для путей в <b>css</b> стиле <b>background</b>. Регулярное выражение для этого будет иметь вид: </p> <pre class="line-numbers"><code class="language-php">preg_match_all("/url\(('[^\"]*')/m", $content, $result);</code> </pre> <p> В переменной $result получим список тегов img с адресами изображений: </p> <pre class="line-numbers"><code class="language-php">Array ( [0] =&gt; Array ( [0] =&gt; url('assets/img/picture_bg1.jpg' [1] =&gt; url('assets/img/picture_bg2.jpg' [2] =&gt; url('assets/img/picture_bg2.jpg' [3] =&gt; url('assets/img/picture_bg2.jpg' [4] =&gt; url('assets/img/picture_bg3.jpg' [5] =&gt; url('assets/img/picture_bg4.jpg' ) [1] =&gt; Array ( [0] =&gt; 'assets/img/picture_bg1.jpg' [1] =&gt; 'assets/img/picture_bg2.jpg' [2] =&gt; 'assets/img/picture_bg2.jpg' [3] =&gt; 'assets/img/picture_bg2.jpg' [4] =&gt; 'assets/img/picture_bg3.jpg' [5] =&gt; 'assets/img/picture_bg4.jpg' ) )</code></pre> <p> Как видно из получившихся массивов, нам нужно предусмотреть варианты когда в пути файла в начале стоит слеш <b>/</b> и когда он отсутствует. Для этого к адресам картинок будем применять функцию <b>ltrim</b> с помощью которой будем убирать слеш <b>/</b> из начала адреса изображения. </p> <p> При конвертации изображений новые изображения будем складывать в отдельную папку <b>img-webp</b> для того, чтобы в случаи чего, можно было удалить новые изображения. При конвертации нужно использовать абсолютные пути до файла на сервере, для этого напишем функцию формирования адреса изображения. </p> <pre class="line-numbers"><code class="language-php">function newPicturePath($image){ $image = ltrim($image, '/'); $imageInfo = pathinfo($image); $fullImagePath = __DIR__.$image; $newImage = $imageInfo['dirname'].'/'.$imageInfo['filename'].'.webp'; $arImage = array( 'realpath' =&gt; $fullImagePath, //Полный адрес изображения на сервере для конвертации 'img' =&gt; $newImage //Новый адрес изображения для подстановки ); return $arImage; }</code></pre><br> <br>

06.10.2020 09:15:27

maxresdefault.jpg

maxresdefault.jpg

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

Для прохождении проверки Google Page Speed Inside одно из требований - использовать на сайте современные форматы изображений. В данном случаи идёт речь, об использовании формата webp для изображения на сайте.

Рассмотрим решение для выполнения этого требования.

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

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

В случаи если Ваш сайт управляется системой 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;
}




Статья была полезна? Поблагодарите автора.

Возврат к списку

Другие статьи