Jump to content

Recommended Posts

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

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

Link to post
Share on other sites
  • Replies 60
  • Created
  • Last Reply

Top Posters In This Topic

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

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

Link to post
Share on other sites
  • 3 weeks later...

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

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

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

Link to post
Share on other sites
  • 2 weeks later...

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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


 

Edited by question
Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

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

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

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

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites
  • 1 month later...

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

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

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

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

Link to post
Share on other sites

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

 

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

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

WebP Support - > enabled

Link to post
Share on other sites

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

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

WebP Support - > enabled

 

WebP Support - > enabled 

 

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

Link to post
Share on other sites

WebP Support - > enabled 

 

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

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

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

Link to post
Share on other sites

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

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

 

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...