Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29

380 views

Published on

Разработчики давно ищут способы оптимизации размера изображения без потери качества. Если вы готовы пуститься во все тяжкие, я расскажу как это сделать. Профит гарантирован!

Published in: Software
  • Good info!.... STARTUPS...Send your pitchdeck to thousands of VC's and Angel's with just 1 click. Visit: Angelvisioninvestors.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

"Во все тяжкие с responsive images", Павел Померанцев, MoscowJS 29

  1. 1. Во все тяжкие с responsive images Павел Померанцев Unclip, Samsung Accelerator, Нью-Йорк github.com/pomerantsev facebook.com/pomerantsevp
  2. 2. 2 Сайт http://www.amc.com/shows/breaking-bad ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  3. 3. 3ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES http://httparchive.org/interesting.php
  4. 4. • Сжатие изображений • Дизайн-практики • SVG • Адаптивность! 4ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Скорость загрузки
  5. 5. 5ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Скорость — это важно?
  6. 6. 6ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Скорость — это важно?
  7. 7. 7ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Скорость — это важно?
  8. 8. Пиксель 8ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  9. 9. dpi = 577dpi = 163 9ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Разрешающая способность
  10. 10. Пиксели! http://www.sitepoint.com/css-techniques-for-retina-displays/ 10ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  11. 11. window.devicePixelRatio DPR 11ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  12. 12. dpi = 577 dpr = 4 dpi = 163 dpr = 1 12ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Разрешающая способность
  13. 13. Проблемы отображения width: 100px; height: 100px; 13ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  14. 14. Проблемы отображения width: 100px; height: 100px; 14ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES dpr: 4 оригинал: 100х100 объём: 1k
  15. 15. Спрос > предложение 15ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  16. 16. Проблемы отображения width: 100px; height: 100px; 16ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES dpr: 4 оригинал: 100х100 объём: 1k dpr: 1 оригинал: 400х400 объём: 16k
  17. 17. Предложение > спрос 17ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  18. 18. srcset ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  19. 19. srcset + x <img srcset="heisenberg_100.jpg 1x, heisenberg_200.jpg 2x"> 19ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  20. 20. srcset + x <img srcset="heisenberg_100.jpg 1x, heisenberg_200.jpg 2x"> 1 2 4 20ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  21. 21. srcset + x 21ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES 1x 2x 3x
  22. 22. srcset + x 22ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES http://caniuse.com/srcset
  23. 23. Поддержка старых браузеров <img srcset="heisenberg_100.jpg 1x, heisenberg_200.jpg 2x" src="heisenberg_200.jpg"> 23ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  24. 24. srcset + w ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  25. 25. Responsive design! img { width: 33vw; } @media (min-width: 1024px) { img { width: 300px; } } 25ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  26. 26. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 26ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  27. 27. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 27ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  28. 28. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 28ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  29. 29. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 29ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  30. 30. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 30ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  31. 31. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 31ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  32. 32. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 32ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Ширина экрана: 600px dpr: 2
  33. 33. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 33ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Ширина экрана: 600px dpr: 2
  34. 34. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 34ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Ширина экрана: 600px dpr: 2 Ширина изображения: 200px
  35. 35. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 35ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Ширина экрана: 600px dpr: 2 Ширина изображения: 200px * 2 = 400w
  36. 36. srcset + w + sizes <img srcset="heisenberg_1024.jpg 1024w, heisenberg_600.jpg 600w, heisenberg_100.jpg 100w” sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw” src="heisenberg_200.jpg"> 36ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Ширина экрана: 600px dpr: 2 Ширина изображения: 200px * 2 = 400w
  37. 37. srcset + w + sizes 37ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES http://caniuse.com/srcset
  38. 38. srcset + w + sizes 38ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES http://caniuse.com/srcset
  39. 39. picture ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  40. 40. <picture> <picture> <source type="image/webp" media="(min-width: 800px)" srcset="heisenberg_wide_large.webp 2000w, heisenberg_wide_medium.webp 1000w, heisenberg_wide_small.webp 600w" sizes="(min-width: 2000px) 1000px, 50vw"> <source media="(min-width: 800px)" srcset="heisenberg_wide_large.jpg 2000w, heisenberg_wide_medium.jpg 1000w, heisenberg_wide_small.jpg 600w" sizes="(min-width: 2000px) 1000px, 50vw"> <source type="image/webp" srcset="heisenberg_large.webp 2000w, heisenberg_medium.webp 1000w, heisenberg_small.webp 600w" sizes="50vw"> <source srcset="heisenberg_large.jpg 2000w, heisenberg_medium.jpg 1000w, heisenberg_small.jpg 600w" sizes="50vw"> <img src="heisenberg_medium.jpg"> </picture> 40ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  41. 41. Адаптивные изображения в браузере srcset + x 41ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  42. 42. Адаптивные изображения в браузере srcset + x 42ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES srcset + w + sizes
  43. 43. Адаптивные изображения в браузере srcset + x 43ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES srcset + w + sizes <picture>
  44. 44. • Сложность HTML • Сколько версий нужно для счастья? 44ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Проблемы
  45. 45. 45ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  46. 46. Server Client
  47. 47. client hints ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  48. 48. Client Hints <img src="jesse.jpg"> 48ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  49. 49. Client Hints 49ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  50. 50. Client Hints
 своими руками document.cookie = `dpr=${window.devicePixelRatio}; path=/`; 50ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  51. 51. Client Hints
 своими руками document.cookie = `dpr=${window.devicePixelRatio}; path=/`; • Изображения и HTML не могут быть на разных доменах • Нельзя передать ширину картинки 51ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  52. 52. Новый стандарт? 52ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES http://caniuse.com/client-hints-dpr-width-viewport
  53. 53. • DPR • Viewport-Width • Width 53ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  54. 54. Client Hints <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width"> 54ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES или Accept-CH: DPR,Width,Viewport-Width
  55. 55. Client Hints <img src="jesse.jpg"> 55ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  56. 56. Запрос: jesse.jpg 56ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  57. 57. Запрос: jesse.jpg Хедер DPR? Ответ: public/jesse.jpg Нет 57ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  58. 58. Запрос: jesse.jpg Хедер DPR? Ответ: public/jesse.jpg Закеширован для dpr = 2? Ответ: cache/jesse@2x.jpg Нет Да, dpr = 2 Да 58ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  59. 59. Запрос: jesse.jpg Хедер DPR? Ответ: public/jesse.jpg Закеширован для dpr = 2? Ответ: cache/jesse@2x.jpg Генерация Нет Да, dpr = 2 Нет Да 59ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  60. 60. <img src="jesse.jpg" sizes="(min-width: 850px) 260px, (min-width: 580px) 33vw, 50vw"> 60ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES Client Hints
  61. 61. Ура! • Адаптивные изображения в браузере: srcset и прочие • Адаптивные изображения на сервере: client hints 61ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
  62. 62. Спасибо! Павел Померанцев github.com/pomerantsev facebook.com/pomerantsevp

×