�ݺ�ߣ

Во все тяжкие
с 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
• Адаптивность!
Скорость загрузки

Скорость — это важно?

Пиксель

dpi = 577dpi = 163
Разрешающая
способность

Пиксели!
http://www.sitepoint.com/css-techniques-for-retina-displays/

window.devicePixelRatio
DPR

dpi = 577
dpr = 4
dpi = 163
dpr = 1
Разрешающая
способность

Проблемы отображения
width: 100px; height: 100px;

dpr: 4
оригинал: 100х100
объём: 1k

Спрос > предложение

dpr: 4
объём: 1k
dpr: 1
объём: 16k

Предложение > спрос

srcset

srcset + x
<img srcset="heisenberg_100.jpg 1x,
heisenberg_200.jpg 2x">

srcset + x
heisenberg_200.jpg 2x">
1 2 4

srcset + x
1x
2x
3x

srcset + x
http://caniuse.com/srcset

Поддержка старых
браузеров
heisenberg_200.jpg 2x"
src=/slideshow/responsive-images-moscowjs-29/60293556/"heisenberg_200.jpg">

srcset + w

Responsive design!
img {
width: 33vw;
}
@media (min-width: 1024px) {
img {
width: 300px;
}
}

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”

srcset + w + sizes
50vw”

srcset + w + sizes
50vw”
Ширина экрана: 600px
dpr: 2

srcset + w + sizes
50vw”
dpr: 2

srcset + w + sizes
50vw”
dpr: 2
Ширина изображения: 200px

srcset + w + sizes
50vw”
dpr: 2
Ширина изображения: 200px * 2 = 400w

srcset + w + sizes

picture

Адаптивные изображения
в браузере
srcset + x

в браузере
srcset + x
srcset + w + sizes

в браузере
srcset + x
srcset + w + sizes <picture>

• Сложность HTML
• Сколько версий нужно для счастья?
Проблемы

client hints

Client Hints
<img src=/slideshow/responsive-images-moscowjs-29/60293556//slideshow/responsive-images-moscowjs-29/60293556/"jesse.jpg">

Client Hints

Client Hints 
своими руками
document.cookie =
`dpr=${window.devicePixelRatio}; path=/`;

Client Hints 
своими руками
document.cookie =
`dpr=${window.devicePixelRatio}; path=/`;
• Изображения и HTML не могут быть на разных доменах
• Нельзя передать ширину картинки

Новый стандарт?
http://caniuse.com/client-hints-dpr-width-viewport

• DPR
• Viewport-Width
• Width
Client Hints

Client Hints
<meta http-equiv="Accept-CH"
content="DPR,Width,Viewport-Width">
или
Accept-CH: DPR,Width,Viewport-Width

Client Hints
<img src=/slideshow/responsive-images-moscowjs-29/60293556//slideshow/responsive-images-moscowjs-29/60293556/"jesse.jpg">

Запрос:
jesse.jpg
Client Hints

Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Нет
Client Hints

Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Закеширован
для dpr = 2?
Ответ:
cache/jesse@2x.jpg
Нет
Да, dpr = 2
Да
Client Hints

Запрос:
jesse.jpg
Хедер DPR?
Ответ:
public/jesse.jpg
Закеширован
для dpr = 2?
Ответ:
cache/jesse@2x.jpg
Генерация
Нет
Да, dpr = 2
Нет
Да
Client Hints

<img src=/slideshow/responsive-images-moscowjs-29/60293556/"jesse.jpg"
50vw">
Client Hints

Ура!
• Адаптивные изображения в браузере: srcset и прочие
• Адаптивные изображения на сервере: client hints

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

�ݺ�ߣ

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

More Related Content

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