Сколько нужноверстальщиков,

чтобы вставить ?

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

Вопросы?