Что бы увидеть email и телефон, включите JavaScript.

MODX Revolution и формат графических изображений WebP


И снова здравствуйте, нам подвезли новый геморрой. А, именно новый формат изображений WebP. Всё больше и больше клиентов обращается за изменением изображений на своих сайтах, волна, только набирает свою силу и грядёт цунами. И когда сообщаешь, что еще не везде данный формат поддерживается. Они отвечают знаем, но Вы же можете сделать, чтобы, где поддерживается, выводился формат WebP. Ну как, говорится любой каприз за Ваши деньги.

Возможно, у некоторых из Вас, возник вопрос, с чем это всё связано и почему, такой ажиотаж вокруг данного формата. А, ну-ка догадайтесь, и Вы как всегда правы! Ветер дует из страны SEO и всяческих ТОПов. Но давайте всё рассмотрим последовательно, ведь мы с Вами труженики ножа и топора, о, прошу прощения, подработки у всех разные, ну так, о чем, это я? Ага, давайте, сначала немного о новом формате, от которого всё просто бегают по-маленькому, образно говоря. Что же это за формат WebP и откуда он вдруг, нарисовался на наши с Вами головы?

Знакомьтесь формат графических изображений WebP

WebP — формат графических изображений, который был разработан в недрах Google аж в 2010 году. Задумка у хитрого Google была в том, что надо бы, взять всё лучшее от форматов PNG, JPG и GIF, да и засунуть всё в один формат. Собственно, у них получилось, причем очень даже. Вот официальное исследование от Google https://developers.google.com/speed/webp/docs/webp_study, если кому интересно. Но в рамках этой статьи мы не рассматриваем данный формат, поэтому в картце о его преимуществах и недостатках, и затем, идём дальше.

Преимущества и недостатки WebP

Преимущества формата:

  • сохраняет такое же качество при меньшем размере картинки: при сжатии с потерями размер будет в среднем на 30% меньше, чем в JPEG, а без потерь в среднем на 25% меньше, чем PNG;
  • сочетает в себе все преимущества PNG, JPEG и GIF, поддерживает прозрачность и анимацию.

Недостатки формата:

  • формат поддерживают не все браузеры;
  • в пиксельной графике может потеряться часть цветов;
  • при сжатии с потерями изображение может выглядеть плоским.

И немного Вам, экспертного мнения:

Google активно продвигает WebP и будет продолжать это делать. Но, как известно, данный формат поддерживают 75% браузеров.

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

Положительное влияние наличия формата WebP на сайте на поисковую выдачу уже замечено.

(с) Андрей Прудко, директор студии интернет-маркетинга и веб-брендинга «Большая Буква»

Ну, а теперь к нашим с Вами делам, хотя дела у прокурора, а у нас простых web-мастеров, небольшие дельца.

Плагин MODX Revolution для отображения на сайте формата WebP

Многие пытливые умы, читающие эту статью, уже набросали себе парочку путей, по которым можно решить данную проблему. Первоначально услышав, что именно надо сделать, моя ленивая натура решила, создать TV и чтобы клиент добавлял туда второй тип изображения. Данную идею, я сразу отмел, достаточно было взглянуть на сайт клиента, там не просто было куча изображений. Но они были, немного не мало, вставлены в поле content. И главное ресурсов на сайте уже была большая куча и маленькая тележка. Копать всё и перекапывать, это надо сказать, было бы, покруче подвига Геракла в Авдеевых конюшнях.

Да, именно, так, мой дорогой друг, твой пытливый ум, прав! Я взглянул в сторону сниппета, который можно, было бы вызвать, где-нибудь в дебрях шаблонов и чанков. Но после мысленного подзатыльника, элемент ментального БДСМ, я вперил свои зоркие глазки в плагин. О, да, это то, что надо. И вот что у меня получилось.

Первая задача, определить работает ли браузер с форматом WebP и, если работает, отдать ему его, а если нет оставить первоначальный. Чудо, великие умы, уже об этом позаботились. Да, мой дорогой друг, наши с тобой умы не единственные величайшие в этом мире. Так вот в HTML 5 уже все есть, а именно волшебная конструкция тега picture. Вот так это будет:


	
	
	Изображение

Конечно, там можно другие форматы напихать, но об этом дальше.

Дело осталось за малым, найти и подменить обычный тег img нашим picture, при этом проверив есть ли файл формата WebP. Ну не буду томить, вот код плагина:

<?php
$output = &$modx->resource->_output;
$img = array();
preg_match_all('/<img[^>]+>/i',$output, $result);
foreach($result[0] as $img_tag){
    preg_match_all('/([a-zA-Z0-9_-]{1,})=(["|\'][^"]*["|\'])/i',$img_tag, $img);
    $atr = array();
    foreach ($img[1] as $k => $v){
		$atr[$v]=str_replace('"','',$img[2][$k]);
	}
	$finfo=pathinfo($atr['src']);
    $fname=$finfo['dirname'].'/'.$finfo['filename'].'.webp';
    if (stristr($fname,':')){
        $file_headers=@get_headers($fname);
        if($file_headers[0] == 'HTTP/1.1 200 OK'){
            $rout = "<picture><source type='image/webp' srcset='$fname'>";
                if ($finfo['extension'] == 'jpg' || $finfo['extension'] == 'jpeg') $rout .= "<source type='image/jpeg' srcset='".$atr['src']."'>";
                if ($finfo['extension'] == 'png') $rout .= "<source type='image/png' srcset='".$atr['src']."'>";
                if ($finfo['extension'] == 'gif') $rout .= "<source type='image/gif' srcset='".$atr['src']."'>";
            $rout .= "<img src='".$atr['src']."'";
            $falt = true;
            foreach ($atr as $k => $v){
                if ($k != 'src') $rout .= ' '.$k.'="'.$v.'"';
                if ($k == 'alt') $falt = false;
            }
            if ($falt) $rout .= ' alt="Изображение"';
            unset($atr);
            $rout .= "></picture>";
            $output = str_replace($img_tag, $rout, $output);
        }     
    }else{
        if(file_exists($fname)){
            $rout = "<picture><source type='image/webp' srcset='$fname'>";
                if ($finfo['extension'] == 'jpg' || $finfo['extension'] == 'jpeg') $rout .= "<source type='image/jpeg' srcset='".$atr['src']."'>";
                if ($finfo['extension'] == 'png') $rout .= "<source type='image/png' srcset='".$atr['src']."'>";
                if ($finfo['extension'] == 'gif') $rout .= "<source type='image/gif' srcset='".$atr['src']."'>";
            $rout .= "<img src='".$atr['src']."'";
            $falt = true;
            foreach ($atr as $k => $v){
                if ($k != 'src') $rout .= ' '.$k.'="'.$v.'"';
                if ($k == 'alt') $falt = false;
            }
            if ($falt) $rout .= ' alt="Изображение"';
            unset($atr);
            $rout .= "></picture>";
            $output = str_replace($img_tag, $rout, $output);
        }     
    }
}

Событие, на которое он реагирует выставляем OnWebPagePrerender. Суть, данное событие вызывается, когда страница готова отправиться браузеру. В этот момент мы хватаем всё то, что отправляется браузеру под видом страницы сайта. И исследуем с помощью регулярного выражения, отлавливая все теги img полностью. Полностью, потому как нам надо если вдруг есть файл с таким же названием, но с расширением webp, заменить весь тег нашим тегом picture.

Сформировав массив изображений, мы его перебираем и вновь используя регулярное выражение, вытаскиваем все атрибуты тега img и сохраняем их в массив $atr.

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

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

Твой острый ум, отметил, почему атрибут alt при своём отсутствии, всё равно заполняется и отображается. Всё просто, великий валидатор validator.w3.org указал матом на то, что данному атрибуту быть надо. Мы лишь скромные падованы, и выполняем требования великого мастера.

Из кода видно, что плагин работает с форматами png, jpeg, jpg и gif. После того как плагин запущен, всё что надо это по ftp закинуть в тоже место, где и изначальный файл изображения его копию в формате WebP. Вот один из конверторов https://image.online-convert.com/ru/convert-to-webp, сам пользовал, ощущений масса.

Да, совсем забыл, чтобы загружать изображения формата WebP, стандартными средствами MODX Revolution, надо будет залезть в системные настройки и там "Core -> Файловая система", добавить формат к разрешенным к загруке файлам и изображениям.

На этом всё, успехов тебе дорогой читатель и великих свершений!

03.08.2019 Исправлено: плагин прикручивал атрибуты предыдущего изображения к текущему.

Теги материала: MODX Revolution PHP Дополнения
Понравилась статья, поделитесь ей с друзьями!
RSS подписка по электронной почте


коммент.

avatar

Дмитрий

- 20 июня 2019, 13:08
В коде плагина ошибки.
avatar

Роман

- 20 июня 2019, 14:20
Добрый день, Дмитрий! Вы, пишите сразу, где именно?
avatar

Дмитрий

- 21 июня 2019, 10:26
Закинул код в админку — ошибки во многих строчках
— с кавычками в ручную переписал " на ' в строках типа этой:
$rout = "<picture><source srcset="$fname" type="image/webp">";
на
$rout = '<picture><source srcset="'.$fname.'" type="image/webp">';
тут ошибка:
$rout .= "<source srcset="".$atr[" type="image/png">";


попробовал плагин — так то работает, но с проверкой alt строки убрал, но проверку надо…
сможете поправить вот эту конструкцию? она меня немного в ступор ввела с моим знанием php
$rout .= "<img> $v){
                if ($k != 'src') $rout .= ' '.$k.'="'.$v.'"';
                if ($k == 'alt') $falt = false;
            }
я выложу рабочий код с правками
avatar

Роман

- 21 июня 2019, 14:18
Доброго времени суток, Дмитрий! Спасибо, за Вашу внимательность. Это редактор при сохранении ресурса заменял кавычки. Поправил, заодно чуть доработал, теперь должно всё нормально быть.
avatar

Дмитрий

- 21 июня 2019, 16:06
Класс, все заработало, благодарю
avatar

Степан

- 29 августа 2019, 12:28
Здравствуйте. Все работает, спасибо.
avatar

Вячеслав

- 29 декабря 2019, 15:56
У меня не работает :(
Что то нужно еще делать кроме как переконвертить изображения в webp и скопировать/вставить плагин? Пути все относительные, копировал все webp в папку с изображениями.
avatar

Роман

- 29 декабря 2019, 16:41
Доброго времени суток, Вячеслав! Код проверен на многих сайтах, надо смотреть по месту, что ни так. Опишите подробнее в чем выражается неработоспособность, ломает отображение или просто не меняет теги, что именно происходит?
avatar

Вячеслав

- 29 декабря 2019, 22:57
Не меняет теги, т.е. не поставляет picture вместо img. Можно указать сайт? У меня lazyload и обрезаю некоторые фото с помощью phpthumbon, может из-за этого?
avatar

Роман

- 29 декабря 2019, 23:09
Не должен, он срабатывает на событие перед самым выводом в браузер и не пересекается с phpthumbon. А, вот lazyload может, Вы из репозитория ставили, если да, то он тоже на OnWebPagePrerender висит и так же с помощью регулярки парсит выходной поток. Что пишет в логах ошибок сам modx?
avatar

Вячеслав

- 29 декабря 2019, 23:49
Lazyload не с репозитория, ставил отдельно от Гугла. Журнал чистый
avatar

Роман

- 30 декабря 2019, 00:56
Важно как ставили, писали плагин?
avatar

Вячеслав

- 30 декабря 2019, 14:54
Просто подключал скрипт в хеде, а дальше class менял на lazyload
avatar

Роман

- 30 декабря 2019, 14:55
Могу после 5 января глянуть что там у Вас, если будет актуально.
avatar

Вячеслав

- 30 декабря 2019, 15:32
Было бы отлично
avatar

Вячеслав

- 03 января 2020, 21:24
Не знаю из-за плагина или нет, но появились ошибки
[2020-01-03 21:13:46] (ERROR @ /home/k/kasta1zd/g2foot.com/public_html/core/model/modx/modx.class.php: 1031) `` is not a valid integer and may not be passed to makeUrl()
[2020-01-03 21:13:46] (ERROR @ /home/k/kasta1zd/g2foot.com/public_html/core/model/modx/modresponse.class.php: 210) Attempted to redirect to an empty URL.
avatar

Вячеслав

- 11 января 2020, 23:36
Ну что сможете посмотреть?
avatar

Роман

- 12 января 2020, 16:11
Да, на почту не киньте доступы, я гляну.
avatar

alexbeglov1989

- 13 февраля 2020, 11:55
Еще достаточно важный пункт по SEO — это оптимизация и сжатие картинок на сайте.
avatar

Константин

- 28 мая 2020, 23:46
Добрый день Роман, у меня плагин не работает если картинки выводятся с помощью pdoResourses или Gallery, показывается в jpg. Это наверно из-за того, что названия подменяются, например в Gallery на такое:
connector.php action=web/phpthumb&ctx=web&w=1400&h=1400&zc=0&far=&q=90&
src=https%3A%2F%2Fsite.ru%2Fassets%2Fgallery%2F1%2F172.jpg
Что-то с этим можно сделать?
avatar

Роман

- 29 мая 2020, 15:22
Доброго времени суток, Константин! Попробуйте без phpthumb. Есть, Caesium, она хорошо сжимает jpg. То есть загружайте сразу обработанные изображения.
avatar

Николай

- 09 января 2021, 11:27
Есть бесплатный плагин который все это делает в 2 клика modxWebpConverter

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *