evoname Posted November 14, 2018 Report Share Posted November 14, 2018 Приветствую, коллеги!Подскажите пожалуйста, как реализовать конвертацию всех добавляемых изображений в 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 в симпле? Quote Link to post Share on other sites
Noxter Posted November 14, 2018 Report Share Posted November 14, 2018 Пожалуйста https://github.com/claviska/SimpleImage Quote Link to post Share on other sites
evoname Posted November 14, 2018 Author Report Share Posted November 14, 2018 Чукча не программист, чукча - веб-дизайнер. Могу шаблон сверстать, код написать не могу... По аналогии тоже не выходит( 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, сайт вообще свалился... Ругается на пропущенные скобки и фигурные скобки. Уже и демо посмотрел и так и эдак, нихрена не выходит( Други, подскажите, куда этот кусок кода всунуть, чтоб все заработало. Спасибо! Quote Link to post Share on other sites
question Posted November 30, 2018 Report Share Posted November 30, 2018 Интересная тема. Гугл к сайтам, использующим webP относится более лояльно.Автор, у вас что-то получилось? Quote Link to post Share on other sites
Noxter Posted November 30, 2018 Report Share Posted November 30, 2018 Интересная тема. Гугл к сайтам, использующим webP относится более лояльно. Автор, у вас что-то получилось?Чукча не программист, чукча - веб-дизайнер. Могу шаблон сверстать, код написать не могу... По аналогии тоже не выходит( Quote Link to post Share on other sites
evoname Posted December 10, 2018 Author Report Share Posted December 10, 2018 Отчасти получилось. Переработанный image.php добрые люди скинули, теперь хотя бы отпала проблема с масштабированием картинок. Автоматически не вышло, но руками вполне. Хотя и геморно это довольно. Загоняю все картинки в кракен, оттуда конвертирую в webp, в шаблоне дописал вывод картинки с тем же именем, но с расширением webp в тегах picture. Работает, но костыльно и много ручного труда. Впрочем, как я уже писал выше, когда не умеешь работать головой, приходится работать руками. Quote Link to post Share on other sites
question Posted December 11, 2018 Report Share Posted December 11, 2018 Странно, я ведь писал ответ...Для начала в районе 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 не создаётся, значит, у вашего хостера не установлены необходимые компоненты. Quote Link to post Share on other sites
evoname Posted December 11, 2018 Author Report Share Posted December 11, 2018 С созданием проблем нет, а с выдачей есть. Дело в том, что webp покамест не везде в ходу и мне нужно выводить изображения как в оригинальном формате, так и в webp, используя тег picture. А в рамках текущей реализации image.php это невозможно. Необходимо дописать внутри отдельную функцию, которая бы помимо ресайза выдавала бы файл еще и заданного в теге формата, а в идеале еще и задаваемой там же степени сжатия. В общем, пока я в "активном поиске". Quote Link to post Share on other sites
question Posted December 11, 2018 Report Share Posted December 11, 2018 Не понимаю, почему мой код не работает. Вроде, должен записывать файл (в моём случае с расширением jpg) с webp сжатием. Quote Link to post Share on other sites
evoname Posted December 11, 2018 Author Report Share Posted December 11, 2018 У меня вышло то, что вы хотите с неделю назад... Только толку от этого? Это даже не полрешения, это огрызок. Я описал выше, как это должно работать по-правильному. Но реализовать такое я не смогу, я не кодер. Надо просить кого-то с форума, вероятно за деньги. Quote Link to post Share on other sites
question Posted December 11, 2018 Report Share Posted December 11, 2018 Можете поделиться тем, что у вас есть?А то, что вы хотите, как я понимаю, делается так: есть resize, по аналогии пишется функция resize2, одна выдаёт webp, вторая - jpeg Quote Link to post Share on other sites
question Posted December 11, 2018 Report Share Posted December 11, 2018 (edited) Я понял, что вы хотите, заодно разобрался с тем, что такое 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 December 11, 2018 by question Quote Link to post Share on other sites
evoname Posted December 12, 2018 Author Report Share Posted December 12, 2018 Делиться особо не чем, я делал тоже, что вы написали выше. В итоге у меня создавался файл с исходным именем и расширением, но внутри файла лежал 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, для кого оптимизация сайта не пустой звук. Quote Link to post Share on other sites
question Posted December 12, 2018 Report Share Posted December 12, 2018 Поясняю, что делает мой код в resize.php. После создания ресайза в виде jpg/png/gif проверяет, есть ли такой файл и если он существует, кладёт рядом точно с тем же именем, но с расширением webp (ну и сжатием webp), то есть теперь у нас 2 файла на любой вкус.Далее - правка в htaccess:Если браузер поддерживает webp Если существует запрашиваемый файл, но с расширением webpТо происходит редирект с xxx.jpg на xxx.webp, то есть, браузеру отдаётся второй файл.В html-коде сайта никаких правок: запросили jpg, выдали то, что поддерживает браузер.Вот только одна беда, редирект в .htaccess не работает. Quote Link to post Share on other sites
evoname Posted December 12, 2018 Author Report Share Posted December 12, 2018 Вместо редиректа в htaccess лучше поправить выдачу в <Picture>, как я выше писал. Хотя общее количество правок и выше, но решение универсальнее. Если ваш первый скрипт работает так, как вы описали, то единственный пока увиденный мной минус - тот факт, что файлы не удаляются после удаления оригинала... В любом случае, спасибо, что хоть как-то двигаете эту тему вперед. Quote Link to post Share on other sites
question Posted December 12, 2018 Report Share Posted December 12, 2018 Мой вариант, если верить google page speed insights, работает. А вот мой браузер упорно грузит jpeg вместо webp. Quote Link to post Share on other sites
question Posted December 12, 2018 Report Share Posted December 12, 2018 Всё работает так здорово, что я сам не заметил подмены.Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных. Quote Link to post Share on other sites
Kami Posted February 11, 2019 Report Share Posted February 11, 2019 Всё работает так здорово, что я сам не заметил подмены.Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных. Не работает ваше решение, наверное проблема в htaccess. Quote Link to post Share on other sites
fuckmoney Posted February 11, 2019 Report Share Posted February 11, 2019 Не работает ваше решение, наверное проблема в htaccess. Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.phpДолжна быть строчка WebP Support - > enabled Quote Link to post Share on other sites
Kami Posted February 11, 2019 Report Share Posted February 11, 2019 Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.phpДолжна быть строчка WebP Support - > enabled WebP Support - > enabled Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpg Quote Link to post Share on other sites
fuckmoney Posted February 11, 2019 Report Share Posted February 11, 2019 WebP Support - > enabled Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpgНа сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.Увидеть можно в папке files/products - там будут и jpg и webp Quote Link to post Share on other sites
Kami Posted February 11, 2019 Report Share Posted February 11, 2019 На сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.Увидеть можно в папке files/products - там будут и jpg и webp у вас браузер какой нибудь в wepb увидел изображения? Quote Link to post Share on other sites
fuckmoney Posted February 12, 2019 Report Share Posted February 12, 2019 у вас браузер какой нибудь в wepb увидел изображения? Chrome и Яндекс.Браузер видят Quote Link to post Share on other sites
question Posted February 12, 2019 Report Share Posted February 12, 2019 у вас браузер какой нибудь в wepb увидел изображения?У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно. Quote Link to post Share on other sites
Kami Posted February 12, 2019 Report Share Posted February 12, 2019 У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно. Даже не создаются Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.