modx + webp просто и надежно - автоматически
Недавно нашел удачный плагин для преобразования картинок/рисунков в webp в автоматическом режиме — плагин сам решит поддерживает ли браузер webp и отдаст ему кэш страницы с webp, а если нет (apple) то отдаст обычную страницу… От вас ничего не требуется кроме установки плагина, не из репозитория (на странице все расписано).
Ссылка на github
Инструкция по установке
Да, в идеале установить бинарный «cwebp», но если нет доступа то GD отконрвертирует рисунки (да качество ниже и сжатие не лучшее, но PageSpeed Вас все равно полюбит ;) )
Комментарии: 20
Спасибо, но modx.com/extras/package/pthumb
webP + phpThumbOff, все работает как швейцарский нож уже 10 лет.
webP + phpThumbOff, все работает как швейцарский нож уже 10 лет.
- Точно не путаешь [[* вместо [[+ ?
- Формат файла должен быть таким f=webP (латинская буква P должна быть большая)
Тут дело в том, что плагин САМ смотрит ответы и принимает решение, что можно отдать страницу с webp или отдать с обычными форматами (той же iOS).
И ничего придумывать не надо.
И ничего придумывать не надо.
Не подскажете как вы вызываете phpThumbOff чтоб он webP генерил с заданным параметром качества?
Вызываю вот так:
В phpThumbOn, такая же история.
Вызываю вот так:
[[+image_absolute:phpthumbof=`w=350&h=195&zc=C&f=webp&q=10`]]
но параметр «q», как не меняй на качестве и весе картинки не отражается.В phpThumbOn, такая же история.
Привет.
Как я понял, ты вызываешь сниппет внутри pdoTools (из-за знака +), верно?
Лично я использую pThumb
Получилось?
Как я понял, ты вызываешь сниппет внутри pdoTools (из-за знака +), верно?
Лично я использую pThumb
Получилось?
Не получилось((
Не phpThumbOff, не phpThumbOn, не pThumb не понимают настройки качества для webP.
Мне кажется webP генерится по умолчанию с максимальным качеством, и это никак не поменять.
То есть наверно как-то можно, но у меня не получилось.
Не phpThumbOff, не phpThumbOn, не pThumb не понимают настройки качества для webP.
Мне кажется webP генерится по умолчанию с максимальным качеством, и это никак не поменять.
То есть наверно как-то можно, но у меня не получилось.
<picture>
<source type="image/webp"
srcset="[[+image_absolute:phpthumbon=`w=350&h=195&zc=C&q=50&f=webP`]],
[[+image_absolute:phpthumbon=`w=700&h=390&zc=C&q=50&f=webP`]] 2x">
<img title="[[+pagetitle]]" alt="[[+pagetitle]]"
src="[[+image_absolute:phpthumbon=`w=350&h=195&zc=C`]]"
srcset="[[+image_absolute:phpthumbon=`w=700&h=390&zc=C`]] 2x">
</picture>
Вэб пишная картинка получается в полтора раза тяжелее чем JPG. Весь смысл использования webP теряется.
У меня качество не меняется ни для webp, ни для png. Только для jpeg. В итоге, убрал эти webp и везде поставил jpeg и качество 30. Даже большие баннеры выглядят нормально, а весят считанные Kb
Изменил раздел на «Готовые решения», так как здесь речь не о компоненте MODX
Вроде как такая конструкция работает без всяких плагинов
<picture class="image image_cover">
{if $webp}
<source type="image/webp" data-srcset="{$webp}">
{/if}
<img class="lazyload" src="#" data-src="{$small?:$empty}" alt="{$pagetitle}" itemprop="image"/>
</picture>
Да.
Но когда страниц уже более 2 тыс., чанков и снипеттов за 300 именно этот плагин решение как «Поставил и забыл — оно все работает само» и ничего не надо переписывать и следить за слетевшим css.
picture не устроил тем, то надо было очень много чего переписать. А у нас работают «ленивые» люди, которые ищут простые пути, а не работу на многие человеко-часы.
Но когда страниц уже более 2 тыс., чанков и снипеттов за 300 именно этот плагин решение как «Поставил и забыл — оно все работает само» и ничего не надо переписывать и следить за слетевшим css.
picture не устроил тем, то надо было очень много чего переписать. А у нас работают «ленивые» люди, которые ищут простые пути, а не работу на многие человеко-часы.
Кстати не на всех хостингах это работает, там есть функция exec её часто блокирует.
Вопрос. Как его заставить работать по расписанию. У меня каждую ночь грузится с внешнего источника, по крону, n-ое количество картинок и json. Каждый день заходить в админку и руками жать на кнопку не хочется
По webp у меня есть такой сниппет, для google page speed insgiht хватает полностью, автоматом конвертирует все найденные картинки будь то в source будто в src, так же в функции может уменьшить или увеличить качетсво. работает на всех хостах.
<?php
/**
* OnManagerPageBeforeRender
* OnWebPagePrerender
* OnSiteRefresh
*
* Generate Webp image format
*
* Uses either Imagick or imagewebp to generate webp image
*
* @param string $file Path to image being converted.
* @param int $compression_quality Quality ranges from 0 (worst quality, smaller file) to 100 (best quality, biggest file).
*
* @return false|string Returns path to generated webp image, otherwise returns false.
*/
if(
$modx->event->name == 'OnSiteRefresh' ||
$modx->event->name == 'OnTemplateSave' ||
$modx->event->name == 'OnChunkSave' ||
$modx->event->name == 'OnPluginSave' ||
$modx->event->name == 'OnTemplateVarSave' ||
$modx->event->name == 'OnDocFormSave' ||
$modx->event->name == 'OnSnippetSave'
) {
$options= [xPDO::OPT_CACHE_KEY=>'webp_on_page']; // Clear webp modx cache
$modx->cacheManager->clean($options);
}
function jcphp01_modx_custom_generate_webp_image($file, $compression_quality = 80)
{
$fileWithBasePath = preg_replace("~\/(?!.*\/)(.*)~", '', MODX_BASE_PATH) . $file;
// check if file exists
if (!file_exists($fileWithBasePath)) {
return false;
}
// If output file already exists return path
$output_file = $file . '.webp';
$outputFileWithBasePath = $fileWithBasePath . '.webp';
if (file_exists($outputFileWithBasePath)) {
return $output_file;
}
$file_type = strtolower(pathinfo($fileWithBasePath, PATHINFO_EXTENSION));
if (function_exists('imagewebp')) {
switch ($file_type) {
case 'jpeg':
case 'jpg':
$image = imagecreatefromjpeg($fileWithBasePath);
break;
case 'png':
$image = imagecreatefrompng($fileWithBasePath);
imagepalettetotruecolor($image);
imagealphablending($image, true);
imagesavealpha($image, true);
break;
case 'gif':
$image = imagecreatefromgif($fileWithBasePath);
break;
default:
return false;
}
// Save the image
$result = imagewebp($image, $outputFileWithBasePath, $compression_quality);
if (false === $result) {
return false;
}
// Free up memory
imagedestroy($image);
return $output_file;
} elseif (class_exists('Imagick')) {
$image = new Imagick();
$image->readImage($fileWithBasePath);
if ($file_type === 'png') {
$image->setImageFormat('webp');
$image->setImageCompressionQuality($compression_quality);
$image->setOption('webp:lossless', 'true');
}
$image->writeImage($outputFileWithBasePath);
return $output_file;
}
return false;
}
function check_image_file_for_webp_converter_custom($img_real, &$webp_on_page){
static $uniq_imgs= [];
$img_real= trim($img_real);
if(in_array($img_real, $uniq_imgs)) return;
$uniq_imgs[]= $img_real;
$ext= strtolower(pathinfo($img_real, PATHINFO_EXTENSION));
if(
$ext == 'jpg' ||
$ext == 'jpeg' ||
$ext == 'png'
) {
$abs= jcphp01_modx_custom_generate_webp_image($img_real);
$abs_base= str_replace('//', '/', MODX_BASE_PATH.$abs);
if( file_exists($abs_base)){
$webp_on_page[$img_real]= $abs;
}
}
}
try{
if( // replace jpg and png images to webp
$modx->event->name == 'OnWebPagePrerender' &&
stripos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false
){
if($disable_replacing_for_logged_user && $modx->user->hasSessionContext('mgr')) return '';
$options= [xPDO::OPT_CACHE_KEY=>'webp_on_page'];
$cache_key= md5(MODX_SITE_URL.$_SERVER['REQUEST_URI']);
$cached_webp_on_page= $modx->cacheManager->get($cache_key, $options);
$output= &$modx->resource->_output;
if( empty($cached_webp_on_page) ){
$webp_on_page= [];
preg_match_all('/<img[^>]+>/i', $output, $result);
if(count($result)){ // Search images in img tag
foreach($result[0] as $img_tag) {
$img_tag= str_replace("'", '"', $img_tag); // src
preg_match('/(src)=("[^"]*")/i', $img_tag, $img[$img_tag]);
$img_real= str_replace('"', '', $img[$img_tag][2]);
check_image_file_for_webp_converter_custom($img_real, $webp_on_page);
preg_match('/(data-src)=("[^"]*")/i', $img_tag, $img[$img_tag]); // data-src
$img_real= str_replace('"', '', $img[$img_tag][2]);
check_image_file_for_webp_converter_custom($img_real, $webp_on_page);
preg_match('/(srcset)=("[^"]*")/i', $img_tag, $img[$img_tag]); // srcset
$srcset= explode(',', str_replace('"', '', $img[$img_tag][2]));
foreach($srcset as $src_item){
$src_a= explode(' ', $src_item);
if(isset($src_a[0]) && !empty($src_a[0])) {
check_image_file_for_webp_converter_custom($src_a[0], $webp_on_page);
} else {
if(isset($src_a[1]) && !empty($src_a[1])) {
check_image_file_for_webp_converter_custom($src_a[1], $webp_on_page);
}
}
}
}
}
preg_match_all('/url\(([^)]*)"?\)/iu', $output, $result);
if(count($result)){ // Search images in url css rules
foreach($result[1] as $img_tag) {
if(stripos($img_real, 'data:')) continue;
$img_real= str_replace(['"',"'"], '', $img_tag);
check_image_file_for_webp_converter_custom($img_real, $webp_on_page);
}
}
$webp_on_page['/webp/webp/']= '/webp/';
$webp_on_page['//webp/']= '/webp/';
$webp_on_page['.webp.webp']= '.webp';
if(count($webp_on_page)) $output= str_replace(array_keys($webp_on_page), array_values($webp_on_page), $output);
$modx->cacheManager->set($cache_key, serialize($webp_on_page), 0, $options);
} else {
$webp_on_page= unserialize($cached_webp_on_page);
if(count($webp_on_page)){
$output= str_replace(array_keys($webp_on_page), array_values($webp_on_page), $output);
}
}
return '';
}
} catch (Exception $e){
$modx->log(1, $e);
}
Подскажите что может быть. Установил плагин. Все прекрасно работало больше 2 месяцев.
А пару дней как перестал работать. в логах ошибок нету.
В админке при нажатии на «WEBP Конвертер» ничего не происходит.
А пару дней как перестал работать. в логах ошибок нету.
В админке при нажатии на «WEBP Конвертер» ничего не происходит.
Если вы не обновляли, или ничего не делали, что скорей всего проблема в хостинге, возможно отключили одну из опций благодаря которой работает это плагин, на подобии exec. Что у вас за хостинг? обычно при нажатии на кнопку конвертировать, он при ошибки пишет ошибку прям туда.
Uncaught DOMException: The quota has been exceeded. converter.js:244
<анонимный> site.com/connectors/converter/converter.js:244
ExtJS 2
a
b
— Вот такая ошибка в браузере
<анонимный> site.com/connectors/converter/converter.js:244
ExtJS 2
a
b
— Вот такая ошибка в браузере
Эта ошибка появляется после нажатия на кнопку? нужно смотреть сами ваши файлы, так от сюда не помочь
при нажатии и при перезагрузке страницы.
Здравствуйте! подскажите, что не так. Установил этот пакет, кнопка в админке появилась, но при нажтии происходит следующее: «Поиск изображений» — и через несколько секунд «Ошибка, попробуйте позже»
Здравствуйте. Сегодня попробовал установить этот пакет. Выдаёт ошибку Wrong bin file! при попытке просканировать изображения, а в консоли ошибок сайта пишет следующее.
ERROR @ /home/hosting/site.ru/www/connectors/converter/converter.php: 346) PHP warning: is_executable(): open_basedir restriction in effect. File(/bin/cwebp) is not within the allowed path(s): (/home/hosting/site.ru/)
Из-за этого ограничения он не видит бинарники? Или эта ошибка никак с этим не связана?
ERROR @ /home/hosting/site.ru/www/connectors/converter/converter.php: 346) PHP warning: is_executable(): open_basedir restriction in effect. File(/bin/cwebp) is not within the allowed path(s): (/home/hosting/site.ru/)
Из-за этого ограничения он не видит бинарники? Или эта ошибка никак с этим не связана?
Добрый день, подскажите, перестал работать плагин в Хроме и Эдж, а в Яндекс браузере работает. Что может быть?
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.