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