Сколько нужноверстальщиков,
чтобы вставить ?
2
<img>
<img>1. Предложили в 1993 году
2. Встроен в браузеры
3. Не блокирует загрузку
4. Доступен через alt
4
<img>1. Не умеет работать с ретиной
2. Не умеет адаптироваться
3. Не умеет кадрироваться
4. Не знает про новые форматы
5
Знаю-незнаю
Знаю-незнаюРазработчик Браузер Нужно
Ширина вьюпорта
Картинка к вьюпорту
Ретиновость экрана
Размеры картинок
11
<picture>
<picture>1. Предложили в 1997 году (не о том, правда)
2. Переосмыслили в 2011 году (по примеру <video>)
3. Долго думали, что же делать в рамках RICG
4. Определились со спецификацией в 2014 году
5. Собрали денег и внедрили в 2014 году
14
Выбиратор
1. Ретина
2. Адаптация
3. Кадрирование
4. Формат
18
РАКФ
1. Ретина
1. Ретина<img
src="400.png"
width="400"
srcset="600.png 1.5x,
800.png 2x,
1600.png 3x"
>
01.
02.
03.
04.
05.
06.
07.
21
Демо
2. Адаптация
2. Адаптацияimg {
width:100%;
max-width:100%;
}
@media (min-width:600px) {
img { width:50% }
}
01.
02.
03.
04.
05.
06.
07.
24
2. Адаптация<img
src="400.png"
srcset="400.png 400w,
800.png 800w,
1600.png 1600w"
sizes="(min-width:600px) 50vw, 100vw"
>
01.
02.
03.
04.
05.
06.
07.
27
Брейкпоинт 400pxМеньше 600 пикселей.
1. Весь экран: 400px → 400.png
2. Весь экран 2x: 800px → 800.png
3. Весь экран 3x: 1600px → 1600.png
30
Брейкпоинт 600pxРавен 600 пикселям.
1. Полэкрана: 300px → 400.png
2. Полэкрана 2x: 600px → 800.png
3. Полэкрана 3x: 1200px → 1600.png
31
Брейкпоинт 800pxБольше 600 пикселей.
1. Полэкрана: 400px → 400.png
2. Полэкрана 2x: 800px → 800.png
3. Полэкрана 3x: 1600px → 1600.png
32
Демо
3. Кадрирование
3. Кадрирование<picture>
<source media="(min-width:1024px)"
srcset="crowd.png">
<source media="(min-width:640px)"
srcset="group.png">
<img src="face.png">
</picture>
01.
02.
03.
04.
05.
06.
07.
37
4. Формат
Офтоп<img
src="webp.webp"
onerror="src='webp--no.png';
this.onerror=null"
alt="Нян Кэт">
Спасибо Матиасу Байненсу за трюк.
01.
02.
03.
04.
05.
40
4. Формат<picture>
<source type="image/webp"
srcset="picture.webp">
<source type="image/vnd.ms-photo"
srcset="picture.jpxr">
<img src="picture.jpg">
</picture>
01.
02.
03.
04.
05.
06.
07.
41
РАКФ
РАКФРАКФРАКФ
РАКФ!
РАКФ<picture>
<source
media="(min-width:1280px)"
sizes="50vw"
srcset="400.webp 400w,
800.webp 800w,
1600.webp 1600w"
44
Sizer Soze
Picturefill
Ещё!
Ещё!— Proposed new tag: IMG (1993)
— Handling fallback content for still images (1997)
— Notes on Adaptive Images (2011)
— Srcset and sizes
— Responsive Images: Use Cases and Documented Code Snippets
— Native Responsive Images
48
sokr.me/pic
@pepelsbey
pepelsbey.net
Shower
Вопросы?
Recommended