WebP: что это и как нам это использовать

Transcript

1. WEBP: ЧТО ЭТО И КАК НАМ ЭТО ИСПОЛЬЗОВАТЬ
2. О ЧЕМ ДОКЛАД? • “проблема” (?) в современном вебе • что может дать нам WebP? • как работать с WebP? • преимущества и недостатки • а нужно ли нам это в Production?
3. СТРАНИЦЫ СТАНОВЯТСЯ ВСЕ ТЯЖЕЛЕЕ
4. РАСПРЕДЕЛЕНИЕ РЕСУРСОВ • Images • Scripts • HTML • Stylesheets • Video • Fonts • Other
5. ПРОГНОЗ УВЕЛИЧЕНИЯ ВЕСА СТРАНИЦ
6. WEBP
7. ФАКТЫ ОТ GOOGLE • WebP на 26% меньше, чем PNG • WebP сжимается на 30% лучше, чем JPEG • WebP поддерживает прозрачность
8. ПРИМЕРЫ СЖАТИЯ С ПРОЗРАЧНОСТЬЮ
9. КТО ИСПОЛЬЗУЕТ?
10. ПОДДЕРЖКА БРАУЗЕРАМИ?
11. ДОЛЯ БРАУЗЕРОВ В МИРЕ Chrome - 63.98% Firefox - 13.6% IE - 8.21% Safari - 5.46% Edge - 4.3% Opera - 2.29%
12. КАК ИСПОЛЬЗОВАТЬ В PRODUCTION
13. ONLINE АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ Online WebP Converter - https://webp-converter.com/
14. СОФТ АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ XnConvert - https://www.xnview.com/en/xnconvert/
15. СОФТ АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ
16. PHOTOSHOP АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ WebP for Photoshop - https://github.com/fnordware/AdobeWebM
17. NODE АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ Imagemin - https://github.com/imagemin/imagemin Imagemin-webp - https://github.com/imagemin/imagemin-webp
18. GULP АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ gulp-webp - https://github.com/sindresorhus/gulp-webp
19. WEBPACK АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ webp-loader - https://www.npmjs.com/package/webp-loader file-loader - https://github.com/webpack-contrib/file-loader
20. SERVER SIDE АВТОМАТИЗАЦИЯ ПРЕОБРАЗОВАНИЙ cwebp, dwebp - https://developers.google.com/speed/webp/docs/using
21. CDN АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ Например: • MaxCDN - https://www.maxcdn.com/ • Cloudinary - https://cloudinary.com/ • KeyCDN - https://www.keycdn.com/
22. .HTACCESS АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ
23. PICTURE АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ
24. PICTURE АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ
25. PICTURE АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ
26. PICTURE АВТОМАТИЗАЦИЯ ОТДАЧИ КЛИЕНТУ
27. ПЛЮСЫ И МИНУСЫ
28. МИНУСЫ ОТ ИСПОЛЬЗОВАНИЯ ✗ слабая поддержка ✗ фолбеки ✗ пластмассовые лица ✗ сложности внедрения ✗ проблемы с интерактивом
29. ПЛЮСЫ ОТ ИСПОЛЬЗОВАНИЯ ✓ оптимизация загрузки ✓ поддержка прозрачности ✓ развивается компанией Google ✓ автоматизация обработки ✓ поддержка анимаций
30. ТАК НУЖНО ЛИ ЭТО ИСПОЛЬЗОВАТЬ?
31. • https://goo.gl/uf1LzV - «The average web page is 3MB. How much should 
 we care?», Tammy Everts • https://goo.gl/VLnocX - глава «What is WebP» из книги «Essential Image Optimization», Эдди Османи • https://goo.gl/NvaDKB - документация к WebP от Google • https://goo.gl/XufcX3 - голосование за внедрение поддержки WebP в Edge • https://goo.gl/qG62vV - статистика распространенности браузеров в мире на statCounter • https://goo.gl/zbGwMY - отличный курс статей по респонсивным изображениям в вебе • https://goo.gl/kMHnZy - «A collection of configuration scripts for serving WebP», Ilya Grigorik • https://goo.gl/JWJGZs - «Погодите, а WebP вообще-то ничего!», Зак Лезерман в переводе на Веб-стандартах ПОЛЕЗНЫЕ ССЫЛКИ
32. СПАСИБО ЗА ВНИМАНИЕ P.S…
 Совсем немного меня на Medium: 
 https://medium.com/@igorlesnevsky
33. ССЫЛКА НА ПРЕЗЕНТАЦИЮ