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