97 LIVE: всё про сжатие картинок, без потери качества онлайн

В этом эфире мы расскажем как сжимать картинки без потери качества онлайн или в ручном режиме.

Антон Белогородцев расскажет как настроить скрипт, которым мы сами пользуемся. И конечно, мы отдадим скрипт всем, кто будет с нами в прямом эфире.

Сам эфир будет в нашей веб-студии по адресу https://live.loading.express.

Или на канале YouTube:

Оплатить файлы скриптов: https://pay.loading.express/ob/ord/webp.

• 0:30 – Привет всем! Начинаем эфир

• 2:25 – Кратко, что вас ждёт в эфире: как сжимать картинки, о формате WEBP, демонстрация сравнения загрузки изображений в форматах webp, jpeg, jpg и др., делимся скриптами для автоматического сжатия изображений сайта. Подробнее – 4:34

• 2:58 – Как получить доступ к бесплатным скриптам

• 5:05 – Как работает живой скрипт для компрессии картинок

• 6:30 – Бонусный config Nginx для распознавания поддержки браузером пользователя webp формата, подробнее — 45:05

• 8:15 – Вопрос от зрителя: «В каком случае может быть вес webp больше jpg\png?»

• 10:06 – Раскрываем секреты WEBP формата, подробнее – 11:40

• 11:13 – Последние свежие онлайн вещания просматривайте по ссылке https://live.loading.express/

• 11:40 – Почему WEBP поддерживается не везде

• 13:36 – Каковы главные преимущества у WEBP формата

• 14:58 – Вопрос из зала: «Алексей, по поводу школы конверсии. На сайте не нашел, когда обучение? Или заказать услугу?»

• 15:10 – О Школе конверсии. О роли Usability (удобство использования) сайта и поведенческого анализа посетителей в повышении конверсии. Как купить курс – 22:40

• 16:54 – Комментируем вопрос: «Тенденцию заметил: чем меньше исходное изображение, тем разница меньше и даже png-иконка в пару килобайт может выйти выгоднее чем webp»

• 17:43 – В каких случаях Google PageSpeed не рекомендует использовать webp формат сжатия изображения

• 18:25 – Немного о предстоящем эфире «LazyLoad — Ленивая отложка» https://www.youtube.com/watch?v=9tueOTjl3z8

• 18:44 – Утверждение из зала о webp: «Примерно, как сжимает WebP? Когда он видит строчку одинаковых цветов сокращает код — типа 30 строчек одного цвета — это легко записать и благодаря чему сократить объём картинки, а когда цвета все разные в картинке — тогда сжимает меньше»

• 19:40 – Отвечаем подробно на вопрос о CDN: «По-моему Demi Murych в своем докладе говорил, что CDN не дает прироста в скорости загрузки»

• 22:34 – Вопрос из зала: «Насколько хорошо индексируются webp-картинки в поиске по картинкам?», отвечаем – 25:00

• 23:00 – Новости в эфире! Теперь замер скорости сайта доступен из города Минск, проверьте по ссылке https://loading.express/

• 25:24 – С 14 версии Safari, браузера для IOS (операционная система продукции Apple) планируется поддержка WEBP

• 26:14 – Вопрос из зала: «Полгода назад тестировал: включенный webp (в nginx) не давал ни одного балла по pagespeed. Из вашего опыта — сейчас webp по факту дает баллов?»

• 27:42 – Калькулятор расчета Google PageSpeed Insights

• 28:38 – Демонстрация трансформации изображений JPEG формата в WEBP на примере скрипта от LOADING.express

• 32:05 – Советы по внедрению кода в сайт, получить скрипт – 38:50 https://pay.loading.express/ob/ord/webp

• 34:36 – Как получить качественное ускорение загрузки сайта https://loading.express/

• 42:30 – Важный вопрос: «Можно проверку добавить на актуальность фото? Например, фото.jpg изменилось, а webp-версия осталось старая?»

• 43:53 – Вопрос из зала: «У меня уже есть сжатие webp на стороне nginix а как повторно запустить сжатие?»

• 45:05 – Как работает код для Nginx по отображению картинок формата WEBP/JPEG в зависимости от поддержки браузера. Скрипт доступен по ссылке https://pay.loading.express/ob/ord/webp

• 50:53 – Как скрипты помогут увеличить общую скорость загрузки страниц сайта

• 53:45 – Вопрос о сжатии: «Спасибо за скрипт) А как дело обстоит с файлами в подпапках?»

• 54:23 – Вопрос: «Эта сборка nginx-webp налету делает сжатие? Или эта картинка webp где-то будет храниться?»

• 54:45 – Вопрос из зала: «​В «примере верстки порядок source имеет значение?»

• 56:03 – Вопрос: «Когда есть смысл от etag off?»

• 59:52 – Можно получить ручной аудит сайта от экспертов LOADING.express

• 1:04:40 – Следующий эфир с новым бесплатным скриптом о LazyLoad для изображений по ссылке https://www.youtube.com/watch?v=9tueOTjl3z8