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