Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

Приветствую, коллеги!

Подскажите пожалуйста, как реализовать конвертацию всех добавляемых изображений в webp?

Правка api/image.php в виде добавления куска

		$canvas->setImageFormat('webp');
		$canvas->setImageAlphaChannel(imagick::ALPHACHANNEL_ACTIVATE);
		$canvas->setBackgroundColor(new ImagickPixel('transparent'));

после

// Убираем комменты и т.п. из картинки
    		$canvas->stripImage();

дает ошибки вида

PHP Fatal error:  Uncaught ImagickException: Unable to set image format in /home/c/cd51032/old/public_html/api/Image.php:411\nStack trace:\n#0 /home/c/cd51032/old/public_html/api/Image.php(411): Imagick->setimageformat('webp')\n#1  

 

Кто-то уже использовал webp или jpg xr в симпле?

Ссылка на сообщение
Поделиться на другие сайты
  • Ответов 60
  • Дата создания
  • Последний ответ

Лучшие авторы в теме

Лучшие авторы в теме

Чукча не программист, чукча - веб-дизайнер. Могу шаблон сверстать, код написать не могу... По аналогии тоже не выходит(

try {
  $image = new \claviska\SimpleImage();
  $image
    ->fromFile($src_file)
    ->autoOrient()
    ->bestFit(600, 600)
    ->overlay($overlay, 'center')
    ->toFile($dst_file, 'image/webp')
} catch(Exception $err) {
  // Handle errors
  echo $err->getMessage();
}

Вставил этот код в Image.php перед image_constrain_gd, сайт вообще свалился... Ругается на пропущенные скобки и фигурные скобки. Уже и демо посмотрел и так и эдак, нихрена не выходит( Други, подскажите, куда этот кусок кода всунуть, чтоб все заработало. Спасибо!

Ссылка на сообщение
Поделиться на другие сайты
  • 3 недели спустя...

Интересная тема. Гугл к сайтам, использующим webP относится более лояльно.

Автор, у вас что-то получилось?

Ссылка на сообщение
Поделиться на другие сайты

Интересная тема. Гугл к сайтам, использующим webP относится более лояльно.

Автор, у вас что-то получилось?

Чукча не программист, чукча - веб-дизайнер. Могу шаблон сверстать, код написать не могу... По аналогии тоже не выходит(

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

Отчасти получилось. Переработанный image.php добрые люди скинули, теперь хотя бы отпала проблема с масштабированием картинок. Автоматически не вышло, но руками вполне. Хотя и геморно это довольно. Загоняю все картинки в кракен, оттуда конвертирую в webp, в шаблоне дописал вывод картинки с тем же именем, но с расширением webp в тегах picture. Работает, но костыльно и много ручного труда. Впрочем, как я уже писал выше, когда не умеешь работать головой, приходится работать руками.

Ссылка на сообщение
Поделиться на другие сайты

Странно, я ведь писал ответ...

Для начала в районе 300 строки

            return imageJpeg($dst_img, $dst_file, $quality);

надо заменить на 

            return imageWebp($dst_img, $dst_file, $quality);

Вот только у меня сайт перестаёт работать, на первом же изображении код обрывается.

Автору советую проверить на работоспособность такой код:

<?

$file='1.jpg';
$image= imagecreatefromjpeg($file);
imagewebp($image,'1.webp',80);
imagedestroy($image);

?>

Если 1.webp не создаётся, значит, у вашего хостера не установлены необходимые компоненты.

Ссылка на сообщение
Поделиться на другие сайты

С созданием проблем нет, а с выдачей есть. Дело в том, что webp покамест не везде в ходу и мне нужно выводить изображения как в оригинальном формате, так и в webp, используя тег picture. А в рамках текущей реализации image.php это невозможно. Необходимо дописать внутри отдельную функцию, которая бы помимо ресайза выдавала бы файл еще и заданного в теге формата, а в идеале еще и задаваемой там же степени сжатия. В общем, пока я в "активном поиске".

Ссылка на сообщение
Поделиться на другие сайты

Не понимаю, почему мой код не работает. Вроде, должен записывать файл (в моём случае с расширением jpg) с webp сжатием.

Ссылка на сообщение
Поделиться на другие сайты

У меня вышло то, что вы хотите с неделю назад... Только толку от этого? Это даже не полрешения, это огрызок. Я описал выше, как это должно работать по-правильному. Но реализовать такое я не смогу, я не кодер. Надо просить кого-то с форума, вероятно за деньги.

Ссылка на сообщение
Поделиться на другие сайты

Можете поделиться тем, что у вас есть?

А то, что вы хотите, как я понимаю, делается так: есть resize, по аналогии пишется функция resize2, одна выдаёт webp, вторая - jpeg

Ссылка на сообщение
Поделиться на другие сайты

Я понял, что вы хотите, заодно разобрался с тем, что такое webp, какие браузеры поддерживают этот формат и как распознать такой браузер.

Всё гениальное просто. Очень просто, но потратил на это весь вечер.

В resize.php в самый конец добавляете

 

 

 

 
$webp_filename = preg_replace('/\.[^.]+$/','',$resized_filename).".webp";
if (file_exists($webp_filename))
{
}
else
{
    $imagetoconvert = imagecreatefromjpeg($resized_filename);  
    imagewebp($imagetoconvert, $webp_filename, 80);
    imagedestroy($resized_filename);
}
 

 

 

Далее в htaccess прописываете

 


AddType image/webp .webp
<IfModule mod_rewrite.c>
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept 
</IfModule> 


 

Изменено пользователем question
Ссылка на сообщение
Поделиться на другие сайты

Делиться особо не чем, я делал тоже, что вы написали выше. В итоге у меня создавался файл с исходным именем и расширением, но внутри файла лежал webp. Кроме хрома такую конструкцию никто не открывает. Это даже не костыль, это просто эксперимент по возможностям создания файлов webp в принципе.

Что касается того, что я хочу, то мне надо, чтобы я мог задавать выходной формат на этапе запроса файла в теге.

Вместо этого:

<img src="{$product->image->filename|resize:200:200}" alt="{$product->name|escape}"/>

Получить что-то вроде этого:

<picture>
        <source srcset="{$product->image->filename|resize:200:200|webp}" type="image/webp">
        <img src="{$product->image->filename|resize:200:200|jpg}" >
</picture>

Что до вашего кода, то он мне не совсем понятен. resize.php не содержит практически ничего, кроме информации о токенах и их использовании. Не совсем уловил связь между этим файлом и размещением вашего кода. Да и перезапись в htaccess как по мне не лучшее решение. Вы подошли к проблеме творчески и смастерили свой особенный и классный костыль) Но это, как ни крути, всё равно костыль. Я конечно и этого не напишу))) Сейчас общаюсь с человеком, который мне дал рабочий image.php, работающий с claviska simpleimage, на предмет доработки image.php до необходимого мне уровня.

Судя по тому, что пишут на хабре, скоро вставка картинки будет выглядеть как-то так:

<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.webp 200w,
				opera-fullshot-400.webp 400w,
				opera-fullshot-800.webp 800w,
				opera-fullshot-1200.webp 1200w,
				opera-fullshot-1600.webp 1600w,
				opera-fullshot-2000.webp 2000w"
		type="image/webp">
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.webp 200w,
				opera-closeup-400.webp 400w,
				opera-closeup-800.webp 800w,
				opera-closeup-1200.webp 1200w,
				opera-closeup-1600.webp 1600w,
				opera-closeup-2000.webp 2000w"
		type="image/webp">
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.jpg 200w,
				opera-fullshot-400.jpg 400w,
				opera-fullshot-800.jpg 800w,
				opera-fullshot-1200.jpg 1200w,
				opera-fullshot-1600.jpg 1800w,
				opera-fullshot-2000.jpg 2000w">
	<img
		src="opera-closeup-400.jpg" alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-closeup-200.jpg 200w,
				 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w,
				opera-closeup-1600.jpg 1600w,
				opera-closeup-2000.jpg 2000w">
</picture>

И тот функционал, что мне нужен, понадобится всем пользователям simpla, для кого оптимизация сайта не пустой звук.

Ссылка на сообщение
Поделиться на другие сайты

Поясняю, что делает мой код в resize.php. После создания ресайза в виде jpg/png/gif проверяет, есть ли такой файл и если он существует, кладёт рядом точно с тем же именем, но с расширением webp (ну и сжатием webp), то есть теперь у нас 2 файла на любой вкус.

Далее - правка в htaccess:

Если браузер поддерживает webp 

Если существует запрашиваемый файл, но с расширением webp

То происходит редирект с xxx.jpg на xxx.webp, то есть, браузеру отдаётся второй файл.

В html-коде сайта никаких правок: запросили jpg, выдали то, что поддерживает браузер.

Вот только одна беда, редирект в .htaccess не работает.

Ссылка на сообщение
Поделиться на другие сайты

Вместо редиректа в htaccess лучше поправить выдачу в <Picture>, как я выше писал. Хотя общее количество правок и выше, но решение универсальнее. Если ваш первый скрипт работает так, как вы описали, то единственный пока увиденный мной минус - тот факт, что файлы не удаляются после удаления оригинала... В любом случае, спасибо, что хоть как-то двигаете эту тему вперед.

Ссылка на сообщение
Поделиться на другие сайты

Мой вариант, если верить google page speed insights, работает. А вот мой браузер упорно грузит jpeg вместо webp.

Ссылка на сообщение
Поделиться на другие сайты

Всё работает так здорово, что я сам не заметил подмены.

Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.

В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных.

Ссылка на сообщение
Поделиться на другие сайты
  • 1 месяц спустя...

Всё работает так здорово, что я сам не заметил подмены.

Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.

В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных.

:) Не работает ваше решение, наверное проблема в htaccess. 

Ссылка на сообщение
Поделиться на другие сайты

:) Не работает ваше решение, наверное проблема в htaccess. 

 

Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.php

Должна быть строчка 

WebP Support - > enabled

Ссылка на сообщение
Поделиться на другие сайты

Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.php

Должна быть строчка 

WebP Support - > enabled

 

WebP Support - > enabled 

 

Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpg

Ссылка на сообщение
Поделиться на другие сайты

WebP Support - > enabled 

 

Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpg

На сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.

Увидеть можно в папке files/products - там будут и jpg и webp 

Ссылка на сообщение
Поделиться на другие сайты

На сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.

Увидеть можно в папке files/products - там будут и jpg и webp 

 

у вас браузер какой нибудь в wepb увидел изображения?

Ссылка на сообщение
Поделиться на другие сайты

у вас браузер какой нибудь в wepb увидел изображения?

У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно.

Ссылка на сообщение
Поделиться на другие сайты

У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно.

 

Даже не создаются

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...