Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

389 visualizaciones

Publicado el

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

Publicado en: Software
  • Inicia sesión para ver los comentarios

"Во все тяжкие с 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

×