Как использовать WebP-картинки в своём веб-проекте: подробная инструкция

[@InverserPro]

Год назад смотрел лекцию "Оптимизируй это". Там всплывал вопрос об отдаче webp в контейнер с jpg, но толком инфы я не нашел как это сделать все. Вы рассказали просто, как для детсада, очень признателен. Все понятно и прозрачно! Успехов!

[@Zeroxzed]

Спасибо за ваши видео. С удовольствием все смотрю, многому научился. Клиента одного вам отправил. Так что вы хорошим делом занялись. Знаниями делитесь, и клиентов получаете. Все в плюсе.

[@ДануфСвияга]

Можно настроить, чтобы команда конвертации в webp срабатывала при запросе фото, т.е. на лету, на фронтенде при открытии страницы сайта с фото, где ещё не было сконвертированных webp?

[@NickLavlinsky]

Да, вам для этого нужен модуль image_filter из Nginx.

[@ДануфСвияга]

Скажите, пожалуйста/ Допустим, не выходит настроить подмену фото на webp или же на виртуальном хостинге нет доступа к конфигу nginx. Как можно вместо nginx оставить отдачу картинок jpg и png на apache , чтобы осталась возможность подменять их через .htaccess?

[@NickLavlinsky]

Во-первых, можно переехать на нормальный хостинг. Во-вторых, используйте разметку картинок c тегом picture: css-tricks.com/using-webp-images/

[@ДануфСвияга]

@@NickLavlinsky Это понятно. 1) Как раз таки, например, на вирт. хосте beget можно попросить саппорт передать статику с nginx на apache полностью, на счет отдельных конкретных разрешений файлов не интересовался. 2) речь именно про исключение, а не редактирование html-разметки. Так как опять же на vps от хоста mirohost можно в панели самого хоста исключить нужные расширения. Вот и заинтересовало, как можно исключить кодом?

[@NickLavlinsky]

@@ДануфСвияга Не понял, что откуда исключить? Каким кодом?

[@ДануфСвияга]

@@NickLavlinsky может я конечно недопонимаю вот это все. На vps mirohost в штатной панели управления есть раздел "настройка nginx",в котором есть переключатель "вкл. отдачу статики на nginx", также есть "исключить расширения файлов": доьавляем png например и начинает работать подмена через .htaccess, как понимаю, что-то наподобие как и с php-файлами. Про код имел виду, возможно директивы в конфиге nginx, может location дополнительный...

[@NickLavlinsky]

@@ДануфСвияга Зачем вам панель, если есть VPS - зайдите в конфиг Nginx и настройте всё, как нужно.

[@qsock2151]

Сузествует ли хостинг, куда можно загружить анимированный webp и смотреть/делиться им как гифкой?

[@egorgorbachev]

как часто вы этот формат используете в работе ? и есть ли смысл его внедрения ?

[@NickLavlinsky]

Почти всегда.

[@rosrazrabotka21]

Подскажите, а как сразу все файлы из папки перевести в формат в webp командой или это не возможно?

[@NickLavlinsky]

Для этого нужно будет написать небольшой bash-скрипт или что-то вроде того.

[@rosrazrabotka21]

@@NickLavlinsky Спасибо, но к сожалению я не силен в создании таких bash-скриптов. Не подскажите, может где то в помощь по этому поводу можно какую нибудь инструкцию почитать?

[@NickLavlinsky]

Вы можете использовать для этого графические редакторы, например есть плагин для Photoshop: developers.google.com/speed/webp/docs/webpshop. По-моему, для GIMP тоже есть. Далее автоматизируйте обработку в Actions.

[@rosrazrabotka21]

@@NickLavlinsky Спасибо

[@egorgorbachev]

Понимаю не ваша техника работы но.. Может есть обзор готовых плагинов для ускорение движоков вот на пример для WP мне приходится как админу по сервакам использовать такие решения # Footer JavaScript - переносит все подключения, даже те, которые не нужно, в низ сайта # Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer. # Autoptimize WP Minify Fix Better WordPress Minify Они будут на лету сокращать файлы. вот может у вас тоже есть такая подборка ? было бы круто узнать. А то не все хотят платить программистам. Ведь есть админ по серверу и он должен ускорить сайт.

[@NickLavlinsky]

Наша техника работы использовать всё, чтобы ускорить сайт. Для WP у тебя без плагинов ничего получится, ибо стили и скрипты подключаются программно, а не лежат в статичных шаблонах. Поэтому мы тоже их используем по мере надобности.

[@egorgorbachev]

круто я много не знал .. спасибо