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

1. Во все тяжкие
с responsive images
Павел Померанцев
Unclip, Samsung Accelerator, Нью-Йорк
github.com/pomerantsev
facebook.com/pomerantsevp

2. 2
Сайт
http://www.amc.com/shows/breaking-bad
ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

3. 3ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
http://httparchive.org/interesting.php

4. • Сжатие изображений
• Дизайн-практики
• SVG
• Адаптивность!
4ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Скорость загрузки

5. 5ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Скорость — это важно?

6. 6ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Скорость — это важно?

7. 7ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Скорость — это важно?

8. Пиксель
8ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

9. dpi = 577dpi = 163
9ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Разрешающая
способность

10. Пиксели!
http://www.sitepoint.com/css-techniques-for-retina-displays/
10ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

11. window.devicePixelRatio
DPR
11ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

12. dpi = 577
dpr = 4
dpi = 163
dpr = 1
12ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Разрешающая
способность

13. Проблемы отображения
width: 100px; height: 100px;
13ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

14. Проблемы отображения
width: 100px; height: 100px;
14ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
dpr: 4
оригинал: 100х100
объём: 1k

15. Спрос > предложение
15ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

16. Проблемы отображения
width: 100px; height: 100px;
16ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
dpr: 4
оригинал: 100х100
объём: 1k
dpr: 1
оригинал: 400х400
объём: 16k

17. Предложение > спрос
17ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

18. srcset
ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

19. srcset + x
<img srcset="heisenberg_100.jpg 1x,
heisenberg_200.jpg 2x">
19ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

20. srcset + x
<img srcset="heisenberg_100.jpg 1x,
heisenberg_200.jpg 2x">
1 2 4
20ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

21. srcset + x
21ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
1x
2x
3x

22. srcset + x
22ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
http://caniuse.com/srcset

23. Поддержка старых
браузеров
<img srcset="heisenberg_100.jpg 1x,
heisenberg_200.jpg 2x"
src="heisenberg_200.jpg">
23ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

24. srcset + w
ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

25. Responsive design!
img {
width: 33vw;
}
@media (min-width: 1024px) {
img {
width: 300px;
}
}
25ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. srcset + w + sizes
37ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
http://caniuse.com/srcset

38. srcset + w + sizes
38ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
http://caniuse.com/srcset

39. picture
ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

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. Адаптивные изображения
в браузере
srcset + x
41ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

42. Адаптивные изображения
в браузере
srcset + x
42ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
srcset + w + sizes

43. Адаптивные изображения
в браузере
srcset + x
43ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
srcset + w + sizes <picture>

44. • Сложность HTML
• Сколько версий нужно для счастья?
44ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Проблемы

45. 45ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

46. Server
Client

47. client hints
ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

48. Client Hints
<img src="jesse.jpg">
48ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

49. Client Hints
49ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

50. Client Hints
своими руками
document.cookie =
`dpr=${window.devicePixelRatio}; path=/`;
50ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

51. Client Hints
своими руками
document.cookie =
`dpr=${window.devicePixelRatio}; path=/`;
• Изображения и HTML не могут быть на разных доменах
• Нельзя передать ширину картинки
51ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

52. Новый стандарт?
52ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
http://caniuse.com/client-hints-dpr-width-viewport

53. • DPR
• Viewport-Width
• Width
53ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

54. Client Hints
<meta http-equiv="Accept-CH"
content="DPR,Width,Viewport-Width">
54ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
или
Accept-CH: DPR,Width,Viewport-Width

55. Client Hints
<img src="jesse.jpg">
55ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

56. Запрос:
jesse.jpg
56ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

57. Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Нет
57ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

58. Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Закеширован
для dpr = 2?
Ответ:
cache/jesse@2x.jpg
Нет
Да, dpr = 2
Да
58ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

59. Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Закеширован
для dpr = 2?
Ответ:
cache/jesse@2x.jpg
Генерация
Нет
Да, dpr = 2
Нет
Да
59ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

60. <img src="jesse.jpg"
sizes="(min-width: 850px) 260px,
(min-width: 580px) 33vw,
50vw">
60ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES
Client Hints

61. Ура!
• Адаптивные изображения в браузере: srcset и прочие
• Адаптивные изображения на сервере: client hints
61ПАВЕЛ ПОМЕРАНЦЕВВО ВСЕ ТЯЖКИЕ С RESPONSIVE IMAGES

62. Спасибо!
Павел Померанцев
github.com/pomerantsev
facebook.com/pomerantsevp