Перейти к содержимому


Фото
- - - - -

Imagick WebP


  • Чтобы отвечать, сперва войдите на форум
32 ответов в теме

#1 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 14.11.2018 - 13:01

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

Подскажите пожалуйста, как реализовать конвертацию всех добавляемых изображений в 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 в симпле?



#2 Noxter

Noxter
  • Забаненый
  • 1 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 14.11.2018 - 14:10

Пожалуйста https://github.com/c...ska/SimpleImage

#3 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 14.11.2018 - 17:54

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

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, сайт вообще свалился... Ругается на пропущенные скобки и фигурные скобки. Уже и демо посмотрел и так и эдак, нихрена не выходит( Други, подскажите, куда этот кусок кода всунуть, чтоб все заработало. Спасибо!



#4 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 30.11.2018 - 14:48

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

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



#5 Noxter

Noxter
  • Забаненый
  • 1 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 30.11.2018 - 14:51

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

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



#6 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 10.12.2018 - 07:31

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



#7 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 11.12.2018 - 17:50

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

Для начала в районе 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 не создаётся, значит, у вашего хостера не установлены необходимые компоненты.



#8 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 11.12.2018 - 18:43

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



#9 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 11.12.2018 - 19:20

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



#10 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 11.12.2018 - 20:24

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



#11 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 11.12.2018 - 22:03

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

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



#12 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 11.12.2018 - 23:14

Я понял, что вы хотите, заодно разобрался с тем, что такое 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, 11.12.2018 - 23:33


#13 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 12.12.2018 - 07:12

Делиться особо не чем, я делал тоже, что вы написали выше. В итоге у меня создавался файл с исходным именем и расширением, но внутри файла лежал 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, для кого оптимизация сайта не пустой звук.



#14 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 12.12.2018 - 09:04

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

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

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

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

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

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

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



#15 evoname

evoname
  • Пользователь
  • 42 сообщений

Опубликовано 12.12.2018 - 13:08

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



#16 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 12.12.2018 - 14:03

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



#17 question

question
  • Пользователь
  • 275 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Россия

Опубликовано 12.12.2018 - 22:34

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

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

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



#18 Kami

Kami
  • Пользователь
  • 349 сообщений
  • Откуда:Россия

Опубликовано 11.02.2019 - 15:26

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

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

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

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



#19 sergeevizh

sergeevizh
  • Пользователь
  • 191 сообщений
  • Откуда:Москва

Опубликовано 11.02.2019 - 15:45

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

 

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

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

WebP Support - > enabled



#20 Kami

Kami
  • Пользователь
  • 349 сообщений
  • Откуда:Россия

Опубликовано 11.02.2019 - 21:39

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

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

WebP Support - > enabled

 

WebP Support - > enabled 

 

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






0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых