evoname Опубликовано 14 ноября, 2018 Жалоба Поделиться Опубликовано 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 в симпле? Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 14 ноября, 2018 Жалоба Поделиться Опубликовано 14 ноября, 2018 Пожалуйста https://github.com/claviska/SimpleImage Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 14 ноября, 2018 Автор Жалоба Поделиться Опубликовано 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, сайт вообще свалился... Ругается на пропущенные скобки и фигурные скобки. Уже и демо посмотрел и так и эдак, нихрена не выходит( Други, подскажите, куда этот кусок кода всунуть, чтоб все заработало. Спасибо! Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 30 ноября, 2018 Жалоба Поделиться Опубликовано 30 ноября, 2018 Интересная тема. Гугл к сайтам, использующим webP относится более лояльно.Автор, у вас что-то получилось? Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 30 ноября, 2018 Жалоба Поделиться Опубликовано 30 ноября, 2018 Интересная тема. Гугл к сайтам, использующим webP относится более лояльно. Автор, у вас что-то получилось?Чукча не программист, чукча - веб-дизайнер. Могу шаблон сверстать, код написать не могу... По аналогии тоже не выходит( Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 10 декабря, 2018 Автор Жалоба Поделиться Опубликовано 10 декабря, 2018 Отчасти получилось. Переработанный image.php добрые люди скинули, теперь хотя бы отпала проблема с масштабированием картинок. Автоматически не вышло, но руками вполне. Хотя и геморно это довольно. Загоняю все картинки в кракен, оттуда конвертирую в webp, в шаблоне дописал вывод картинки с тем же именем, но с расширением webp в тегах picture. Работает, но костыльно и много ручного труда. Впрочем, как я уже писал выше, когда не умеешь работать головой, приходится работать руками. Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 11 декабря, 2018 Жалоба Поделиться Опубликовано 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 не создаётся, значит, у вашего хостера не установлены необходимые компоненты. Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 11 декабря, 2018 Автор Жалоба Поделиться Опубликовано 11 декабря, 2018 С созданием проблем нет, а с выдачей есть. Дело в том, что webp покамест не везде в ходу и мне нужно выводить изображения как в оригинальном формате, так и в webp, используя тег picture. А в рамках текущей реализации image.php это невозможно. Необходимо дописать внутри отдельную функцию, которая бы помимо ресайза выдавала бы файл еще и заданного в теге формата, а в идеале еще и задаваемой там же степени сжатия. В общем, пока я в "активном поиске". Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 11 декабря, 2018 Жалоба Поделиться Опубликовано 11 декабря, 2018 Не понимаю, почему мой код не работает. Вроде, должен записывать файл (в моём случае с расширением jpg) с webp сжатием. Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 11 декабря, 2018 Автор Жалоба Поделиться Опубликовано 11 декабря, 2018 У меня вышло то, что вы хотите с неделю назад... Только толку от этого? Это даже не полрешения, это огрызок. Я описал выше, как это должно работать по-правильному. Но реализовать такое я не смогу, я не кодер. Надо просить кого-то с форума, вероятно за деньги. Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 11 декабря, 2018 Жалоба Поделиться Опубликовано 11 декабря, 2018 Можете поделиться тем, что у вас есть?А то, что вы хотите, как я понимаю, делается так: есть resize, по аналогии пишется функция resize2, одна выдаёт webp, вторая - jpeg Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 11 декабря, 2018 Жалоба Поделиться Опубликовано 11 декабря, 2018 (изменено) Я понял, что вы хотите, заодно разобрался с тем, что такое 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> Изменено 11 декабря, 2018 пользователем question Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 12 декабря, 2018 Автор Жалоба Поделиться Опубликовано 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, для кого оптимизация сайта не пустой звук. Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 12 декабря, 2018 Жалоба Поделиться Опубликовано 12 декабря, 2018 Поясняю, что делает мой код в resize.php. После создания ресайза в виде jpg/png/gif проверяет, есть ли такой файл и если он существует, кладёт рядом точно с тем же именем, но с расширением webp (ну и сжатием webp), то есть теперь у нас 2 файла на любой вкус.Далее - правка в htaccess:Если браузер поддерживает webp Если существует запрашиваемый файл, но с расширением webpТо происходит редирект с xxx.jpg на xxx.webp, то есть, браузеру отдаётся второй файл.В html-коде сайта никаких правок: запросили jpg, выдали то, что поддерживает браузер.Вот только одна беда, редирект в .htaccess не работает. Цитата Ссылка на сообщение Поделиться на другие сайты
evoname Опубликовано 12 декабря, 2018 Автор Жалоба Поделиться Опубликовано 12 декабря, 2018 Вместо редиректа в htaccess лучше поправить выдачу в <Picture>, как я выше писал. Хотя общее количество правок и выше, но решение универсальнее. Если ваш первый скрипт работает так, как вы описали, то единственный пока увиденный мной минус - тот факт, что файлы не удаляются после удаления оригинала... В любом случае, спасибо, что хоть как-то двигаете эту тему вперед. Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 12 декабря, 2018 Жалоба Поделиться Опубликовано 12 декабря, 2018 Мой вариант, если верить google page speed insights, работает. А вот мой браузер упорно грузит jpeg вместо webp. Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 12 декабря, 2018 Жалоба Поделиться Опубликовано 12 декабря, 2018 Всё работает так здорово, что я сам не заметил подмены.Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных. Цитата Ссылка на сообщение Поделиться на другие сайты
Kami Опубликовано 11 февраля, 2019 Жалоба Поделиться Опубликовано 11 февраля, 2019 Всё работает так здорово, что я сам не заметил подмены.Загружается файл jpg во всех случаях, только в старых браузерах это обычный jpeg, в новых, поддерживающих webp - файл с тем же именем и тем же расширением, но со сжатием webp. То есть, по одному и тому же адресу старый браузер получит картинку весом 120 кб, новый - 60 кб.В итоге главная страница стала загружаться быстрее, вес с 2 мб снизил до 1.2 мб. Что особенно актуально для мобильных. Не работает ваше решение, наверное проблема в htaccess. Цитата Ссылка на сообщение Поделиться на другие сайты
fuckmoney Опубликовано 11 февраля, 2019 Жалоба Поделиться Опубликовано 11 февраля, 2019 Не работает ваше решение, наверное проблема в htaccess. Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.phpДолжна быть строчка WebP Support - > enabled Цитата Ссылка на сообщение Поделиться на другие сайты
Kami Опубликовано 11 февраля, 2019 Жалоба Поделиться Опубликовано 11 февраля, 2019 Работает, проблемы могут быть в gd и php версии, смотрите phpinfo.phpДолжна быть строчка WebP Support - > enabled WebP Support - > enabled Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpg Цитата Ссылка на сообщение Поделиться на другие сайты
fuckmoney Опубликовано 11 февраля, 2019 Жалоба Поделиться Опубликовано 11 февраля, 2019 WebP Support - > enabled Есть такое, в файл ресайза добавил файл . В штассес правило есть. Как увидеть например фото карточки товара в webp. все грузит в jpgНа сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.Увидеть можно в папке files/products - там будут и jpg и webp Цитата Ссылка на сообщение Поделиться на другие сайты
Kami Опубликовано 11 февраля, 2019 Жалоба Поделиться Опубликовано 11 февраля, 2019 На сайте грузить будет в jpg, но если браузер поддерживает webp будет грузить webp так же и поисковые роботы.Увидеть можно в папке files/products - там будут и jpg и webp у вас браузер какой нибудь в wepb увидел изображения? Цитата Ссылка на сообщение Поделиться на другие сайты
fuckmoney Опубликовано 12 февраля, 2019 Жалоба Поделиться Опубликовано 12 февраля, 2019 у вас браузер какой нибудь в wepb увидел изображения? Chrome и Яндекс.Браузер видят Цитата Ссылка на сообщение Поделиться на другие сайты
question Опубликовано 12 февраля, 2019 Жалоба Поделиться Опубликовано 12 февраля, 2019 у вас браузер какой нибудь в wepb увидел изображения?У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно. Цитата Ссылка на сообщение Поделиться на другие сайты
Kami Опубликовано 12 февраля, 2019 Жалоба Поделиться Опубликовано 12 февраля, 2019 У меня - все, установленные на компьютере. С проблемой Сергеевича знаком, насколько помню, у него создавались webp изображения, но htaccess не обрабатывался - проблема была с настройками сервера. Потому он вам и задал вопрос - у вас webp изображения не создаются или браузер их не выводит? Вы не ответили, поэтому где у вас проблема, непонятно. Даже не создаются Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.