
WebP — формат изображений для веба, который активно пиарит компания Google. Есть он и есть, казалось бы, много каких форматов есть, если бы не одно но: при проверке через новый гугл-спид за отсутствие онных изображений сильно снижаются оценки. И если вам не приходилось выслушивать от клиентов или сеошников то, что показатели гугл-спида низкие и это срочно нужно поправить, то знайте: вы счастливчик. Ну да это все лирика.
Начнем с проблем с этим форматом:
- Большинство графических редакторов с ним не дружат.
- phpthumb с ним не дружит
- Apple с ним не дружит
- С ним вообще никто не дружит, кроме гугла)
Вариант номер один: забить. Тысячу раз так делал — реально работает и ничего делать не надо)
Вариант номер два, если первый ну вообще никак не получается — последовать дальнейшей инструкции.
1) Проверяем чтобы gd или imagick на сервере были включены. Если нет — включаем.
2) Через composer (кстати, есть модуль в extrats) ставим либу rosell-dk/webp-convert. Если composer по каким-то причинам не работает, то ставим его отседова.
3) Создаем плагин WebP ставим галочку напротив события OnWebPagePrerender и вставляем в него нижеследующий код:
//<?php
$userAgent = strtolower($_SERVER['HTTP_USER_AGENT']);
$notSupportDevice = array('iphone', 'ipod', 'ipad','macintosh','mac os','Edge','MSIE');
foreach ($notSupportDevice as $val) {
if(stripos($userAgent, $val) !== false) return;
}
require $modx->config['base_path'].'vendor/autoload.php';
use WebPConvert\WebPConvert;
$content = $modx->Event->params['documentOutput'];
//$content = &$modx->resource->_output; //Для Revolution раскомментируйте эту строку и первую.
$imgs = array();
preg_match_all('/<img[^>]+>/i',$content, $result);
if (count($result))
{
foreach($result[0] as $img_tag)
{
preg_match('/(src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
$img_real = str_replace('"','',$img[$img_tag][2]);
$img_real = str_replace('./','',$img_real);
if ((strpos($img_real, '.jpg')!==false) or (strpos($img_real, '.jpeg')!==false) or (strpos($img_real, '.png')!==false)) $imgs[] = $img_real;
}
$imgs = array_unique($imgs);
foreach($imgs as $img_real)
{
if(($img_real) && (file_exists($modx->config['base_path'].$img_real)))
{
if (!file_exists($modx->config['base_path'].$img_real.'.webp'))
{
$image = $modx->config['base_path'].$img_real;
$destination = $modx->config['base_path'].$img_real.'.webp';
if (WebPConvert::convert($image, $destination)) $i = $img_real.'.webp';
else $i = $img_real;
}
else $i = $img_real.'.webp';
$content = str_replace($img_real, $i, $content);
}
}
}
$modx->Event->output($content);
4) Сохраняем. Радуемся. Все картинки на сайте у нас теперь в формате WebP. Получаем звонкие монеты от клиентов, не забываем делиться с автором. Хотя бы кармой) Если сработает — то позитивной, если нет — то гневной)
P.S. Для работы на Revolution замените соответствующую строку.
Вараника 10.02.2019 12:29 #
Алексей Либер 10.02.2019 12:42 #
Ильин Сергей 15.02.2019 17:58 #
Этот формат реально крутой, особенно по мощьности зжатия. Но вот проблема в том что сафари и IE его не видят( а по этому надо добавлять картинки в несольких форматах, через html это легко сделать а вот с CSS пришлось по мучится…
Но можно и с .jpg взять 100 на спид тесте
Если что читайте тут подробнее, разбирал все обновы в спид тесте
Андрей 19.02.2019 09:18 #
Спасибо, тебе Серега! :)
Ильин Сергей 19.02.2019 15:00 #
Помощник Modx Revo 20.02.2019 23:30 #
Заранее спасибо)
Алексей Либер 20.02.2019 23:38 #
Дэн 08.04.2019 02:22 #
Поставил composerx пробовал через него<br />
Could not load package rosell-dk/webp-convert in packagist.org: [UnexpectedValueException] Could not parse version constraint ^2.11: Invalid version string "^2.11"<br />
Could not parse version constraint ^2.11: Invalid version string "^2.11"
Дмитрий 21.02.2019 10:24 #
Евгений Хаммер 06.03.2019 10:52 #
Алексей Либер 06.03.2019 14:25 #
На неделе допишу.
Chugun 29.03.2019 23:46 #
Алексей 01.04.2019 09:27 #
Алексей Либер 01.04.2019 09:37 #
Впрочем мы уже обсуждали тему поддержку браузерами на другом сайте, по-хорошему нужно первые пять строчек сделать более обдуманными и отсекать браузеры, которые не поддерживают формат.
Ну и в начале статьи я написал первый способ, к которому сам часто прибегаю)) Но СЕОшники иногда такие СЕОшники, что приходится выполнять капризы гугл-спида) А так я человек ленивый, то вот и накатал такое решение)
Алексей 02.04.2019 17:10 #
Сергей 15.05.2019 23:14 #
Получается идет папка webp-convert-master и в ней файлы проекта, папки: build-scripts, build-tests-webp-convert и т.д. и файлы
Если я загружаю в корень webp-convert-master и делаю все как вы написали, то выдается ошибка 500, я так понимаю связано с плагином, что-то не так подключаю. Может я должен ее как-то заинклюдить, какой-то определенный файл? Или я вообще не там копаю?
Алексей Либер 18.05.2019 10:55 #
Никита 12.01.2020 19:04 #
Ссылка не работает?((
Можете поправить ссылку
Алексей Либер 12.01.2020 19:14 #
Никита 12.01.2020 19:17 #
Хостинг Timeweb
Алексей Либер 12.01.2020 21:10 #
Никита 13.01.2020 17:16 #
yadi.sk/i/MRsKzJ_qIof4rQ
как быть?))
Алексей Либер 13.01.2020 17:20 #
Перейти на другой хостинг
Скинуть доступы мне на почту (и копейку на пиво) чтобы я сделал)))
Никита 13.01.2020 17:28 #
Если не исправят, то буду обращаться к Вам за помощью)))
Никита 13.01.2020 23:25 #
Но еще оптимизировать и оптимизировать.
Пока только 50 баллов выдает. А нужно 90 минимум, чтоб зеленый был кружок)))
lostinspace 11.07.2020 19:38 #
Не могу установить пакет. Может подскажете в чем может быть проблема.
Пишу в консоли:
composer require rosell-dk/webp-convert
Выдает ошибку:
[LogicException]
ComposerRepository: Undefined $data. Please report at github.com/co
mposer/composer/issues/new.
Пытаюсь по-другому:
В composer.json добавляю
Затем, в консоли php composer.phar update
В ответ:
Problem 1
— Installation request for rosell-dk/webp-convert 2.3.2 -> satisfiable by rosell-dk/webp-convert[2.3.2].
— rosell-dk/webp-convert 2.3.2 requires php ^5.6 | ^7.0 -> your PHP version (5.3.3) does not satisfy that requirement.
Хотя версия PHP в настройках хостинга 7.4.0
lostinspace 11.07.2020 19:57 #
Теперь вопрос в другом, phpthumbof никак с WebP нельзя подружить?
Яна Митрофанова 06.08.2020 11:15 #
Евгений 16.08.2020 05:54 #
https://github.com/commeta/modxWebpConverter
Алексей Либер 16.08.2020 08:54 #
Евгений 16.08.2020 10:50 #
1. Создаем подкаталог /connectors/converter/ и заливаем туда файлы <br />
— converter.php Серверное api<br />
— converter.js Скрипт для админки<br />
— Binaries Бинарники утилиты cwebp<br /><br />
2. Создаем в админке плагин: webp_converter.php и вешаем на событие OnManagerPageBeforeRender. После чего в правом верхнем углу появится значок, по клику запустится в фоне сканирование каталогов сайта, и будет создана копия каждой картинке в подкаталоге webp. т.е. /assets/logo.png -> /webp/assets/logo.png.webp<br />
3. Создаем в админке плагин: webp_replacer.php и вешаем на событие OnWebPagePrerender. После чего все картинки в коде HTML будут заменены на webp, если браузер их поддерживает.
Алексей Либер 16.08.2020 11:44 #
Евгений 17.08.2020 04:05 #
Евгений 20.08.2020 13:41 #
Взял солянку jpg & png, 24382 файлов, 3385MB.
Все отработало нормально, потребление памяти в пике: на win 6 580 936, на lin 3 816 368.
Сканирование подкаталогов заняло: 191ms SSD, 3123ms HDD.
Результирующий объем пережатых файлов: 1005MB, потери в качестве не заметил.
Открыл одновременно 12 вкладок, в результате кодировка пошла в 12 потоков, у меня на Ryzen 5 2600X Six-Core обработка всех файлов заняла около 45 минут.
Пока багов не вижу, можно и в установочный пакет завернуть, если есть кому? Я там мануал посмотрел, время займет, сейчас некогда возится.
Виктор 16.11.2020 12:23 #
Евгений 17.11.2020 07:54 #
Надо уточнить, какая OS, попробовать скачать другой бинарник, или установить из пакетов (если linux)
Игорь 19.09.2020 17:36 #
При клике на WEBP Конвертер ничего не происходит
Алексей Смирнов 22.01.2021 10:17 #
Читал о файлах jpeg, Png — в них могут применяться различные алгоритмы.
И вот именно более качественные алгоритмы применяются если мы говорим об webp, а то что jpeg может использовать тот же алгоритм и быть jpeg (ДЛЯ ВСЕХ БРАУЗЕРОВ) как то умалчивается.<br />
Смекаете?
те смысл таков. GD и Imagick поддерживают этот webp в новых версиях а jpeg всегда поддерживали.
Осталось дело за малым чтобы phpTumb дал возможность ВЫБРАТЬ правильный алгоритм и сохранить при качестве 60 так же хорошо как и webp. и гугл не ругается.<br />
Осталось только понять как в phpTumb а следовательно как в том же phpThubON ( Off И т.п.) указать что нужен самый крутой алгоритм.<br />
Ссылка на обсуждение тут:<br />
stackoverflow.com/questions/14072456/optimize-uploaded-images-with-php-jpeg<br />
предпоследний пост про Imagick::FILTER_LANCZOS<br />
Если кто сможет доработать или иссушку сделать или обсудить внедрение И сделать — дайте знать.<br />
сапсибо.
igorsrt 02.02.2021 17:26 #
А как подружить этот плагин, что бы он еще и в css картинки на webp менял? — т.е. например в слайдере: «background: url(»/assets/cache_image/assets/template/images/slider/slide.webp")
Алексей Либер 02.02.2021 17:34 #
igorsrt 02.02.2021 18:26 #
сама-то страница довольно быстро грузится, но вот гуглу-спид не нравятся именно эти мои 3 картинки из слайдера
Алексей Либер 02.02.2021 18:28 #
igorsrt 04.02.2021 18:22 #
0. Сформировал слайды в webp вручную (это не трудно);
1. В tv слайдера добавил галочку: «Есть картинка в формате webp»;
2. В чанке слайдов изменил на: «background: url(».
… так-то работает, но теперь возникает вопрос в совместимости с браузерами. Прочитал что, вроде, уже и Firefox, и ios уже поддерживают webp, но проверить-то не на чем ((
Алексей Либер 04.02.2021 18:27 #
igorsrt 02.02.2021 18:42 #
… Я не заставляю, просто уточнил )))
Роман 29.11.2022 23:13 #
Жутко режет качество на выходе. Не подскажете, куда копать?
И самое забавное, чем чаще обновляешь страницу, тем больше пикселизации